FileViewer Component Demo

Details

Raw Data

{
  "id": "40d65eab-e104-4f31-a349-9602a49a765f",
  "type": "general",
  "status": "completed",
  "title": "FileViewer Component Demo",
  "description": "New component with modal overlay and syntax highlighting - click files to view",
  "context": {
    "output": "<div style=\"background:#1e1e1e;color:#e0e0e0;padding:20px;border-radius:8px;font-family:system-ui,-apple-system,sans-serif;\">\n<h2 style=\"color:#fff;margin:0 0 12px 0;\">📂 FileViewer Component</h2>\n<p style=\"color:#9ca3af;margin:0 0 16px 0;\">Click any file to open in full-screen modal with syntax highlighting!</p>\n\n<div data-component=\"file-viewer\" data-files='[{\"path\": \"src/router.ts\", \"lang\": \"ts\", \"content\": \"import { Router } from \\\"oak\\\";\\nimport { handleKontask } from \\\"./kontasks.ts\\\";\\n\\nconst router = new Router();\\n\\n// Main routes\\nrouter.get(\\\"/\\\", (ctx) => {\\n  ctx.response.body = \\\"Welcome to greatVibe!\\\";\\n});\\n\\nrouter.get(\\\"/api/tasks\\\", async (ctx) => {\\n  const tasks = await listTasks();\\n  ctx.response.body = { tasks };\\n});\\n\\nexport default router;\"}, {\"path\": \"config.json\", \"lang\": \"json\", \"content\": \"{\\n  \\\"name\\\": \\\"greatVibe\\\",\\n  \\\"version\\\": \\\"1.0.0\\\",\\n  \\\"port\\\": 8666,\\n  \\\"features\\\": {\\n    \\\"kontasks\\\": true,\\n    \\\"fileViewer\\\": true,\\n    \\\"syntaxHighlight\\\": true\\n  }\\n}\"}, {\"path\": \"README.md\", \"lang\": \"md\", \"content\": \"# greatVibe Platform\\n\\n**Interactive kontask components** for rich UI experiences.\\n\\n## Components\\n\\n- `SortableList` - Drag and drop\\n- `SimpleChart` - Bar/line charts\\n- `ExpandableTree` - Collapsible hierarchy\\n- `MultiSelect` - Checkbox list\\n- `StepWizard` - Multi-step forms\\n- `FileViewer` - **NEW!** Modal file viewer\\n\\n## Usage\\n\\n```html\\n<div data-component=\\\"file-viewer\\\" data-files=\\\"[...]\\\"></div>\\n```\"}, {\"path\": \"main.go\", \"lang\": \"go\", \"content\": \"package main\\n\\nimport (\\n\\t\\\"fmt\\\"\\n\\t\\\"net/http\\\"\\n)\\n\\nfunc main() {\\n\\tfmt.Println(\\\"Starting gvShell...\\\")\\n\\t\\n\\thttp.HandleFunc(\\\"/\\\", func(w http.ResponseWriter, r *http.Request) {\\n\\t\\tw.Write([]byte(\\\"Hello from Go!\\\"))\\n\\t})\\n\\t\\n\\thttp.ListenAndServe(\\\":8080\\\", nil)\\n}\"}]' data-id=\"demo-files\"></div>\n\n<div style=\"background:#22c55e20;border:1px solid #22c55e;padding:16px;border-radius:6px;margin-top:16px;\">\n<h4 style=\"color:#22c55e;margin:0 0 8px 0;\">✓ Features</h4>\n<ul style=\"color:#9ca3af;margin:0;padding-left:20px;line-height:1.8;\">\n<li><strong>Full-screen modal</strong> - Click backdrop or ✕ to close</li>\n<li><strong>Syntax highlighting</strong> - TypeScript, JavaScript, JSON, Markdown, Go</li>\n<li><strong>Line numbers</strong> - Easy code reference</li>\n<li><strong>📋 Copy button</strong> - One-click copy to clipboard</li>\n<li><strong>Escape key</strong> - Press ESC to close</li>\n<li><strong>One Dark theme</strong> - Consistent with kontask styling</li>\n</ul>\n</div>\n</div>",
    "requestedAt": "2026-01-07T08:52:00Z",
    "requestId": "5c756b8b-4643-4e86-8485-f5a4be81a56d",
    "choices": [
      {
        "label": "Looks great!",
        "value": "The FileViewer works perfectly, commit all Phase 3 components to git",
        "primary": true
      },
      {
        "label": "Add more languages",
        "value": "Add syntax highlighting for more languages (Python, Rust, etc.)"
      }
    ]
  },
  "createdBy": "claude",
  "createdAt": "2026-01-07T00:28:06.463Z",
  "updatedAt": "2026-01-07T00:28:06.699Z",
  "requestId": "5c756b8b-4643-4e86-8485-f5a4be81a56d",
  "scope": "vibetools",
  "tags": [
    "kontasks",
    "components",
    "file-viewer"
  ],
  "targetUser": "claude"
}