Output
View the File Tree Demo
Demo Kontask
Shows kongate's file structure with collapsible directories, file icons, and git status badges.
What You'll See
- 📂 Root header with path
- 📁 Collapsible directories - click to expand/collapse
- 📘 File type icons - TypeScript, JSON, Markdown
- M Git status badges - modified, untracked
- 📊 File info - line counts, language
Note
The demo kontask is in PENDING status because it uses the template system. Approve it to mark as complete, or just view it to see the rendering.
After Viewing
Let me know how it looks:
Quick Actions
Original Request
No layout configured
Details
Type
General
Status
Completed
Scope
vibetools
Tags
kontasksfile-treedemo
Created
3 Jan 2026, 10:15 am
Updated
3 Jan 2026, 10:15 am
Created By
claude
Raw Data
{
"id": "a90622c4-d16e-442e-80b5-802b22c01419",
"type": "general",
"status": "completed",
"title": "File tree demo link",
"description": "Direct link to view the file_tree template demo",
"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 16px 0;\">View the File Tree Demo</h2>\n\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\">\n<h3 style=\"color:#61afef;margin:0 0 12px 0;\">Demo Kontask</h3>\n<p style=\"margin:0 0 12px 0;\"><a href=\"https://konui.konnect.technology/kontasks/7735f3e1-dd41-4f97-bebd-43a1dbacec65\" style=\"color:#3b82f6;font-weight:bold;\">View File Tree Demo →</a></p>\n<p style=\"color:#9ca3af;margin:0;\">Shows kongate's file structure with collapsible directories, file icons, and git status badges.</p>\n</div>\n\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\">\n<h3 style=\"color:#c678dd;margin:0 0 12px 0;\">What You'll See</h3>\n<ul style=\"margin:0;padding-left:20px;line-height:1.8;\">\n<li>📂 <strong>Root header</strong> with path</li>\n<li>📁 <strong>Collapsible directories</strong> - click to expand/collapse</li>\n<li>📘 <strong>File type icons</strong> - TypeScript, JSON, Markdown</li>\n<li><span style=\"background:#e5c07b;color:#1e1e1e;padding:1px 4px;border-radius:2px;font-size:0.7rem;font-weight:bold;\">M</span> <strong>Git status badges</strong> - modified, untracked</li>\n<li>📊 <strong>File info</strong> - line counts, language</li>\n</ul>\n</div>\n\n<div style=\"background:#1a3a1a;border:1px solid #22c55e;padding:16px;border-radius:6px;margin-bottom:16px;\">\n<h3 style=\"color:#22c55e;margin:0 0 8px 0;\">Note</h3>\n<p style=\"margin:0;\">The demo kontask is in PENDING status because it uses the template system. Approve it to mark as complete, or just view it to see the rendering.</p>\n</div>\n\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-top:16px;\">\n<h4 style=\"margin:0 0 8px 0;color:#fff;\">After Viewing</h4>\n<p style=\"color:#9ca3af;margin:0;\">Let me know how it looks:</p>\n</div>\n</div>",
"choices": [
{
"label": "Looks good!",
"value": "The file tree template looks good - commit the implementation",
"primary": true
},
{
"label": "Needs changes",
"value": "The file tree template needs some changes - let me describe what to fix"
},
{
"label": "Fix auto-complete",
"value": "Update auto-complete logic so layout-based kontasks are also auto-completed"
}
],
"requestedAt": "2026-01-03T12:40:00Z",
"requestId": "1e278f40-189a-4e5b-94fb-268054ac30e7"
},
"createdBy": "claude",
"createdAt": "2026-01-03T00:15:59.187Z",
"updatedAt": "2026-01-03T00:15:59.351Z",
"requestId": "1e278f40-189a-4e5b-94fb-268054ac30e7",
"scope": "vibetools",
"tags": [
"kontasks",
"file-tree",
"demo"
],
"targetUser": "claude"
}