@qzoft/check-list 1.0.0

package/README.md

@@ -0,0 +1,130 @@
+# check-list
+
+A general-purpose MCP App that discovers and displays checklists from **all markdown files** in your project, rendered as an interactive checkbox UI inside VS Code Copilot Chat. Changes are saved automatically — no confirmation needed.
+
+## Prerequisites
+
+- Node.js 18+
+- VS Code Insiders (for [MCP Apps support](https://code.visualstudio.com/blogs/2026/01/26/mcp-apps-support))
+
+## Setup
+
+1. Clone this repo:
+   ```sh
+   git clone https://github.com/qzoft/check-list.git
+   cd check-list
+   ```
+
+2. Install dependencies:
+   ```sh
+   npm install
+   ```
+
+3. Build the project:
+   ```sh
+   npm run build
+   ```
+
+4. Open VS Code — the `.vscode/mcp.json` config auto-registers the server. VS Code will pick it up automatically when you open the workspace.
+
+5. In Copilot Chat, ask **"show my tasks"** → the `list_tasks` tool scans the project and renders the interactive checkbox UI.
+
+## Usage
+
+Once the server is running, you can use two tools in Copilot Chat:
+
+- **`list_tasks`** — scans all `.md` files in the project directory, finds checkbox items, and displays an interactive UI grouped by file and section. Toggle any checkbox and it saves automatically.
+- **`update_tasks`** — called automatically when you toggle a checkbox. Can also be called directly by Copilot to update tasks in any markdown file.
+
+## How it works
+
+```
+┌──────────────────────────┐
+│   VS Code Copilot Chat   │
+│                          │
+│  "show my tasks"         │
+│         │                │
+│         ▼                │
+│   list_tasks tool ───────┼──► MCP Server (Node.js)
+│         │                │         │
+│         │                │    scans project for *.md
+│         │                │    parses checkboxes
+│         │                │         │
+│   renders iframe UI ◄────┼─────────┘
+│   (task-checklist.html)  │
+│         │                │
+│   [checkbox toggle]      │
+│         │                │
+│   auto-save ─────────────┼──► MCP Server writes to file
+└──────────────────────────┘
+```
+
+1. The MCP server recursively discovers all `.md` files in the project directory.
+2. Each file is parsed for `## Section` headers and `- [ ]` / `- [x]` checkbox items.
+3. VS Code renders `ui/task-checklist.html` as an interactive iframe grouped by file.
+4. Toggling a checkbox **immediately saves** the change back to the originating file — no save button required.
+
+## Configuration
+
+| Variable      | Description                                         | Example                          |
+|---------------|-----------------------------------------------------|----------------------------------|
+| `PROJECT_DIR` | Root directory to scan for markdown files            | `~/repos/my-project`             |
+| `TASK_FILE`   | *(backward-compat)* Falls back to parent directory   | `~/repos/my-project/task.md`     |
+
+If neither is set, the server uses the current working directory.
+
+The project directory is configured in `.vscode/mcp.json`:
+
+```json
+{
+  "servers": {
+    "check-list": {
+      "command": "node",
+      "args": ["dist/server.js"],
+      "env": {
+        "PROJECT_DIR": "${workspaceFolder}"
+      }
+    }
+  }
+}
+```
+
+## Task file format
+
+The parser recognizes `## Section` headers and checkbox list items in any `.md` file:
+
+```markdown
+## Today
+- [ ] Write tests
+- [ ] Update README
+
+## This Week
+- [ ] Review PRs
+- [ ] Deploy to staging
+```
+
+Checkbox items that appear before any section header are grouped under a default "Tasks" section. Non-checkbox content is preserved as-is when writing back.
+
+The server skips common non-project directories (`node_modules`, `.git`, `dist`, `build`, etc.) during scanning.
+
+## Project structure
+
+```
+check-list/
+├── package.json
+├── tsconfig.json
+├── README.md
+├── .vscode/
+│   └── mcp.json          # VS Code MCP server config
+├── src/
+│   ├── server.ts          # MCP server entry point
+│   ├── parser.ts          # Markdown checkbox parser
+│   └── writer.ts          # File discovery & read/write
+└── ui/
+    └── task-checklist.html # MCP App UI rendered in iframe
+```
+
+## Learn more
+
+- [MCP Apps support in VS Code](https://code.visualstudio.com/blogs/2026/01/26/mcp-apps-support)
+- [Model Context Protocol SDK](https://github.com/modelcontextprotocol/typescript-sdk)

package/dist/parser.d.ts

@@ -0,0 +1,27 @@
+export interface Task {
+    text: string;
+    checked: boolean;
+    line: number;
+}
+export interface TaskSection {
+    name: string;
+    tasks: Task[];
+}
+/** Represents all checkbox tasks found in a single markdown file. */
+export interface FileTaskGroup {
+    file: string;
+    sections: TaskSection[];
+}
+/**
+ * Parses a markdown string, finding section headers (## SectionName) and
+ * checkbox lines within each section.
+ */
+export declare function parseTasks(markdown: string): TaskSection[];
+/**
+ * Applies updates to the original markdown, toggling checkbox state for each
+ * specified line. All other content is preserved exactly as-is.
+ */
+export declare function serializeTasks(original: string, updates: {
+    line: number;
+    checked: boolean;
+}[]): string;

package/dist/parser.js

@@ -0,0 +1,65 @@
+/**
+ * Parses a markdown string, finding section headers (## SectionName) and
+ * checkbox lines within each section.
+ */
+export function parseTasks(markdown) {
+    const lines = markdown.replace(/\r/g, '').split('\n');
+    const sections = [];
+    let currentSection = null;
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        // Match section headers: ## SectionName
+        const sectionMatch = line.match(/^##\s+(.+)$/);
+        if (sectionMatch) {
+            currentSection = { name: sectionMatch[1].trim(), tasks: [] };
+            sections.push(currentSection);
+            continue;
+        }
+        // Match checkbox lines (with or without a section header)
+        const checkedMatch = line.match(/^- \[x\]\s+(.+)$/i);
+        const uncheckedMatch = line.match(/^- \[ \]\s+(.+)$/);
+        if (checkedMatch || uncheckedMatch) {
+            // Ensure there is a section to hold the task
+            if (!currentSection) {
+                currentSection = { name: 'Tasks', tasks: [] };
+                sections.push(currentSection);
+            }
+            if (checkedMatch) {
+                currentSection.tasks.push({
+                    text: checkedMatch[1].trim(),
+                    checked: true,
+                    line: i,
+                });
+            }
+            else if (uncheckedMatch) {
+                currentSection.tasks.push({
+                    text: uncheckedMatch[1].trim(),
+                    checked: false,
+                    line: i,
+                });
+            }
+        }
+    }
+    return sections;
+}
+/**
+ * Applies updates to the original markdown, toggling checkbox state for each
+ * specified line. All other content is preserved exactly as-is.
+ */
+export function serializeTasks(original, updates) {
+    const lines = original.split('\n');
+    for (const update of updates) {
+        const line = lines[update.line];
+        if (line === undefined)
+            continue;
+        if (update.checked) {
+            // Mark as checked: replace - [ ] with - [x]
+            lines[update.line] = line.replace(/^(- )\[ \]/, '$1[x]');
+        }
+        else {
+            // Mark as unchecked: replace - [x] with - [ ]
+            lines[update.line] = line.replace(/^(- )\[[xX]\]/, '$1[ ]');
+        }
+    }
+    return lines.join('\n');
+}

package/dist/server.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/dist/server.js

@@ -0,0 +1,154 @@
+#!/usr/bin/env node
+import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
+import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
+import { registerAppTool, registerAppResource, RESOURCE_MIME_TYPE } from '@modelcontextprotocol/ext-apps/server';
+import { z } from 'zod';
+import { fileURLToPath } from 'url';
+import path from 'path';
+import fs from 'fs';
+import { discoverMarkdownFiles, readTaskFile, writeTaskFile } from './writer.js';
+import { parseTasks, serializeTasks } from './parser.js';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+// Use PROJECT_DIR if set, otherwise fall back to TASK_FILE's parent dir, or CWD
+const projectDir = (() => {
+    const dir = process.env['PROJECT_DIR'];
+    if (dir) {
+        return dir.startsWith('~')
+            ? path.join(process.env['HOME'] ?? '', dir.slice(1))
+            : path.resolve(dir);
+    }
+    // Backward-compat: if TASK_FILE is set, use its parent directory
+    const taskFile = process.env['TASK_FILE'];
+    if (taskFile) {
+        const resolved = taskFile.startsWith('~')
+            ? path.join(process.env['HOME'] ?? '', taskFile.slice(1))
+            : path.resolve(taskFile);
+        return path.dirname(resolved);
+    }
+    return process.cwd();
+})();
+// MCP App UI resource
+const uiHtmlPath = path.resolve(__dirname, '..', 'ui', 'task-checklist.html');
+const uiResourceUri = 'ui://check-list/task-checklist.html';
+const server = new McpServer({
+    name: 'check-list',
+    version: '2.0.0',
+});
+// Register the HTML resource for the UI
+registerAppResource(server, 'Task Checklist', uiResourceUri, { description: 'Interactive checkbox UI for task management' }, async () => ({
+    contents: [{
+            uri: uiResourceUri,
+            mimeType: RESOURCE_MIME_TYPE,
+            text: fs.readFileSync(uiHtmlPath, 'utf-8'),
+        }],
+}));
+registerAppTool(server, 'list_tasks', {
+    description: 'Discover and display checklists from all markdown files in the project',
+    _meta: { ui: { resourceUri: uiResourceUri } },
+}, async () => {
+    let mdFiles;
+    try {
+        mdFiles = await discoverMarkdownFiles(projectDir);
+    }
+    catch (err) {
+        const message = err instanceof Error ? err.message : String(err);
+        return {
+            isError: true,
+            content: [
+                {
+                    type: 'text',
+                    text: `Error scanning project directory ${projectDir}: ${message}`,
+                },
+            ],
+        };
+    }
+    const fileGroups = [];
+    for (const filePath of mdFiles) {
+        let content;
+        try {
+            content = await readTaskFile(filePath);
+        }
+        catch {
+            continue; // skip files we can't read
+        }
+        const sections = parseTasks(content);
+        const hasTasks = sections.some((s) => s.tasks.length > 0);
+        if (!hasTasks)
+            continue;
+        // Use relative path for cleaner display
+        const relPath = path.relative(projectDir, filePath);
+        fileGroups.push({ file: relPath, sections });
+    }
+    return {
+        content: [
+            {
+                type: 'text',
+                text: 'The tasks are displayed in the interactive UI above. Do not repeat or summarize the task content in your response — the user can already see and interact with them.',
+            },
+        ],
+        structuredContent: { files: fileGroups },
+    };
+});
+registerAppTool(server, 'update_tasks', {
+    description: 'Update checkbox states in a project markdown file (auto-saved on toggle)',
+    inputSchema: {
+        file: z.string().describe('Relative path to the markdown file within the project'),
+        updates: z.array(z.object({
+            line: z.number().describe('0-indexed line number in the markdown file'),
+            checked: z.boolean().describe('New checked state for the checkbox'),
+        })).describe('Array of line updates to apply'),
+    },
+    _meta: { ui: { resourceUri: uiResourceUri, visibility: ['app'] } },
+}, async ({ file, updates }) => {
+    const filePath = path.resolve(projectDir, file);
+    let content;
+    try {
+        content = await readTaskFile(filePath);
+    }
+    catch (err) {
+        const message = err instanceof Error ? err.message : String(err);
+        return {
+            isError: true,
+            content: [
+                {
+                    type: 'text',
+                    text: `Error reading file ${file}: ${message}`,
+                },
+            ],
+        };
+    }
+    const updated = serializeTasks(content, updates);
+    try {
+        await writeTaskFile(filePath, updated);
+    }
+    catch (err) {
+        const message = err instanceof Error ? err.message : String(err);
+        return {
+            isError: true,
+            content: [
+                {
+                    type: 'text',
+                    text: `Error writing file ${file}: ${message}`,
+                },
+            ],
+        };
+    }
+    const checkedCount = updates.filter((u) => u.checked).length;
+    const uncheckedCount = updates.filter((u) => !u.checked).length;
+    const parts = [];
+    if (checkedCount > 0)
+        parts.push(`${checkedCount} task(s) marked as done`);
+    if (uncheckedCount > 0)
+        parts.push(`${uncheckedCount} task(s) marked as undone`);
+    return {
+        content: [
+            {
+                type: 'text',
+                text: `✅ Saved ${file}: ${parts.join(', ')}.`,
+            },
+        ],
+    };
+});
+const transport = new StdioServerTransport();
+await server.connect(transport);

package/dist/writer.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Recursively discovers all `.md` files under the given directory,
+ * skipping common non-project directories.
+ */
+export declare function discoverMarkdownFiles(dir: string): Promise<string[]>;
+/**
+ * Reads the markdown file from disk and returns its content as a string.
+ */
+export declare function readTaskFile(filePath: string): Promise<string>;
+/**
+ * Writes the updated markdown content back to the local file.
+ */
+export declare function writeTaskFile(filePath: string, content: string): Promise<void>;

package/dist/writer.js

@@ -0,0 +1,59 @@
+import { promises as fs } from 'fs';
+import path from 'path';
+/** Directories to skip when discovering markdown files. */
+const IGNORED_DIRS = new Set([
+    'node_modules',
+    '.git',
+    'dist',
+    '.next',
+    '.nuxt',
+    'build',
+    'coverage',
+    'vendor',
+    '__pycache__',
+]);
+/**
+ * Recursively discovers all `.md` files under the given directory,
+ * skipping common non-project directories.
+ */
+export async function discoverMarkdownFiles(dir) {
+    const results = [];
+    async function walk(current) {
+        let entries;
+        try {
+            entries = await fs.readdir(current, { withFileTypes: true });
+        }
+        catch {
+            return; // skip directories we can't read
+        }
+        for (const entry of entries) {
+            if (entry.name.startsWith('.'))
+                continue;
+            const fullPath = path.join(current, entry.name);
+            if (entry.isDirectory()) {
+                if (!IGNORED_DIRS.has(entry.name)) {
+                    await walk(fullPath);
+                }
+            }
+            else if (entry.isFile() && entry.name.endsWith('.md')) {
+                results.push(fullPath);
+            }
+        }
+    }
+    await walk(dir);
+    // Sort alphabetically for consistent ordering in the UI
+    results.sort();
+    return results;
+}
+/**
+ * Reads the markdown file from disk and returns its content as a string.
+ */
+export async function readTaskFile(filePath) {
+    return fs.readFile(filePath, 'utf-8');
+}
+/**
+ * Writes the updated markdown content back to the local file.
+ */
+export async function writeTaskFile(filePath, content) {
+    await fs.writeFile(filePath, content, 'utf-8');
+}

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@qzoft/check-list",
+  "version": "1.0.0",
+  "description": "MCP App for interactive task management from markdown files",
+  "type": "module",
+  "main": "dist/server.js",
+  "bin": "dist/server.js",
+  "files": ["dist", "ui"],
+  "scripts": {
+    "build": "tsc",
+    "start": "node dist/server.js",
+    "prepare": "npm run build"
+  },
+  "dependencies": {
+    "@modelcontextprotocol/ext-apps": "^1.2.0",
+    "@modelcontextprotocol/sdk": "^1.27.1"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "typescript": "^5.7.0"
+  }
+}

package/ui/task-checklist.html

@@ -0,0 +1,369 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Tasks</title>
+  <style>
+    *, *::before, *::after {
+      box-sizing: border-box;
+    }
+
+    :root {
+      --bg: #ffffff;
+      --fg: #1f2328;
+      --border: #d1d5db;
+      --section-bg: #f6f8fa;
+      --checked-fg: #6b7280;
+      --accent: #0969da;
+      --accent-hover: #0550ae;
+      --file-bg: #f0f4f8;
+      --file-border: #c8d1da;
+      --radius: 6px;
+      --save-ok: #1a7f37;
+      --save-err: #cf222e;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      :root {
+        --bg: #0d1117;
+        --fg: #e6edf3;
+        --border: #30363d;
+        --section-bg: #161b22;
+        --checked-fg: #8b949e;
+        --accent: #58a6ff;
+        --accent-hover: #79c0ff;
+        --file-bg: #161b22;
+        --file-border: #30363d;
+        --save-ok: #3fb950;
+        --save-err: #f85149;
+      }
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      font-size: 14px;
+      background: var(--bg);
+      color: var(--fg);
+      margin: 0;
+      padding: 16px;
+      line-height: 1.5;
+    }
+
+    #app {
+      max-width: 600px;
+    }
+
+    h2 {
+      font-size: 16px;
+      font-weight: 600;
+      margin: 0 0 16px;
+    }
+
+    .file-group {
+      margin-bottom: 20px;
+      border: 1px solid var(--file-border);
+      border-radius: var(--radius);
+      overflow: hidden;
+    }
+
+    .file-header {
+      font-size: 12px;
+      font-weight: 600;
+      font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
+      padding: 6px 10px;
+      background: var(--file-bg);
+      border-bottom: 1px solid var(--file-border);
+      color: var(--checked-fg);
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+
+    .file-header .icon {
+      font-size: 14px;
+    }
+
+    .file-body {
+      padding: 8px 10px;
+    }
+
+    .section {
+      margin-bottom: 12px;
+    }
+
+    .section:last-child {
+      margin-bottom: 0;
+    }
+
+    .section-title {
+      font-size: 13px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      color: var(--checked-fg);
+      margin: 0 0 6px;
+      padding-bottom: 4px;
+      border-bottom: 1px solid var(--border);
+    }
+
+    .task-list {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+
+    .task-item {
+      display: flex;
+      align-items: flex-start;
+      gap: 8px;
+      padding: 3px 0;
+    }
+
+    .task-item input[type="checkbox"] {
+      margin-top: 2px;
+      flex-shrink: 0;
+      cursor: pointer;
+      accent-color: var(--accent);
+      width: 14px;
+      height: 14px;
+    }
+
+    .task-item input[type="checkbox"]:disabled {
+      cursor: wait;
+    }
+
+    .task-label {
+      cursor: pointer;
+      user-select: none;
+    }
+
+    .task-label.done {
+      text-decoration: line-through;
+      color: var(--checked-fg);
+    }
+
+    #status {
+      margin-top: 8px;
+      font-size: 12px;
+      color: var(--checked-fg);
+      min-height: 16px;
+      transition: opacity 0.3s;
+    }
+
+    #status.ok { color: var(--save-ok); }
+    #status.err { color: var(--save-err); }
+
+    #loading {
+      color: var(--checked-fg);
+    }
+  </style>
+</head>
+<body>
+  <div id="app">
+    <h2>📋 Tasks</h2>
+    <div id="sections">
+      <p id="loading">Loading tasks…</p>
+    </div>
+    <div id="status"></div>
+  </div>
+
+  <script>
+    const sectionsEl = document.getElementById('sections');
+    const statusEl = document.getElementById('status');
+
+    const STATUS_DISPLAY_MS = 3000;
+    let statusTimer = null;
+
+    // --- MCP Apps postMessage transport ---
+    let rpcId = 1;
+    const pendingRequests = new Map();
+
+    function sendRequest(method, params) {
+      const id = rpcId++;
+      window.parent.postMessage({ jsonrpc: '2.0', id, method, params }, '*');
+      return new Promise((resolve, reject) => {
+        pendingRequests.set(id, { resolve, reject });
+      });
+    }
+
+    function sendNotification(method, params) {
+      window.parent.postMessage({ jsonrpc: '2.0', method, params }, '*');
+    }
+
+    // Handle incoming messages from host
+    window.addEventListener('message', (event) => {
+      const data = event.data;
+      if (!data || typeof data !== 'object') return;
+
+      // Response to a pending request
+      if ('id' in data && pendingRequests.has(data.id)) {
+        const { resolve, reject } = pendingRequests.get(data.id);
+        pendingRequests.delete(data.id);
+        if (data.error) {
+          reject(new Error(data.error.message || JSON.stringify(data.error)));
+        } else {
+          resolve(data.result);
+        }
+        return;
+      }
+
+      // Notifications from host
+      if (data.method === 'ui/notifications/tool-result') {
+        handleToolResult(data.params);
+      }
+    });
+
+    function handleToolResult(result) {
+      try {
+        // Prefer structuredContent, fall back to parsing text content
+        let fileGroups = result.structuredContent?.files;
+        if (!fileGroups) {
+          const textContent = result.content?.find(c => c.type === 'text');
+          if (textContent) {
+            fileGroups = JSON.parse(textContent.text);
+          }
+        }
+        if (fileGroups) {
+          renderFileGroups(fileGroups);
+        }
+      } catch (err) {
+        sectionsEl.innerHTML = '<p>Error loading tasks: ' + (err.message || String(err)) + '</p>';
+      }
+    }
+
+    // Notify host when content size changes so the iframe resizes
+    let lastWidth = 0;
+    let lastHeight = 0;
+    const resizeObserver = new ResizeObserver(() => {
+      const width = document.documentElement.scrollWidth;
+      const height = document.documentElement.scrollHeight;
+      if (width !== lastWidth || height !== lastHeight) {
+        lastWidth = width;
+        lastHeight = height;
+        sendNotification('ui/notifications/size-changed', { width, height });
+      }
+    });
+    resizeObserver.observe(document.documentElement);
+
+    // Initialize: handshake with host
+    (async () => {
+      try {
+        await sendRequest('ui/initialize', {
+          protocolVersion: '2026-01-26',
+          capabilities: {},
+          clientInfo: { name: 'check-list', version: '1.0.0' },
+        });
+        sendNotification('ui/notifications/initialized', {});
+      } catch (err) {
+        console.error('MCP Apps init failed:', err);
+      }
+    })();
+
+    function showStatus(msg, type) {
+      statusEl.textContent = msg;
+      statusEl.className = type || '';
+      if (statusTimer) clearTimeout(statusTimer);
+      statusTimer = setTimeout(() => { statusEl.textContent = ''; statusEl.className = ''; }, STATUS_DISPLAY_MS);
+    }
+
+    /**
+     * Auto-save a single checkbox toggle by calling the update_tasks tool via the host.
+     */
+    async function autoSave(file, line, checked, checkboxEl, labelEl) {
+      checkboxEl.disabled = true;
+
+      try {
+        await sendRequest('tools/call', {
+          name: 'update_tasks',
+          arguments: { file, updates: [{ line, checked }] },
+        });
+        showStatus('\u2705 Saved', 'ok');
+      } catch (err) {
+        // Revert on failure
+        checkboxEl.checked = !checked;
+        labelEl.className = 'task-label' + (!checked ? ' done' : '');
+        showStatus('\u274C Error: ' + (err.message || String(err)), 'err');
+      } finally {
+        checkboxEl.disabled = false;
+      }
+    }
+
+    function renderFileGroups(fileGroups) {
+      sectionsEl.innerHTML = '';
+
+      const withTasks = fileGroups.filter(fg =>
+        fg.sections.some(s => s.tasks.length > 0)
+      );
+
+      if (withTasks.length === 0) {
+        sectionsEl.innerHTML = '<p>No checklists found in any markdown file.</p>';
+        return;
+      }
+
+      for (const fg of withTasks) {
+        const groupEl = document.createElement('div');
+        groupEl.className = 'file-group';
+
+        const headerEl = document.createElement('div');
+        headerEl.className = 'file-header';
+        const iconSpan = document.createElement('span');
+        iconSpan.className = 'icon';
+        iconSpan.textContent = '\uD83D\uDCC4';
+        headerEl.appendChild(iconSpan);
+        headerEl.appendChild(document.createTextNode(' ' + fg.file));
+        groupEl.appendChild(headerEl);
+
+        const bodyEl = document.createElement('div');
+        bodyEl.className = 'file-body';
+
+        const visibleSections = fg.sections.filter(s => s.tasks.length > 0);
+
+        for (const section of visibleSections) {
+          const sectionEl = document.createElement('div');
+          sectionEl.className = 'section';
+
+          const titleEl = document.createElement('div');
+          titleEl.className = 'section-title';
+          titleEl.textContent = section.name;
+          sectionEl.appendChild(titleEl);
+
+          const listEl = document.createElement('ul');
+          listEl.className = 'task-list';
+
+          for (const task of section.tasks) {
+            const itemEl = document.createElement('li');
+            itemEl.className = 'task-item';
+
+            const checkboxEl = document.createElement('input');
+            checkboxEl.type = 'checkbox';
+            checkboxEl.checked = task.checked;
+            checkboxEl.id = 'task-' + fg.file + '-' + task.line;
+
+            const labelEl = document.createElement('label');
+            labelEl.htmlFor = checkboxEl.id;
+            labelEl.className = 'task-label' + (task.checked ? ' done' : '');
+            labelEl.textContent = task.text;
+
+            checkboxEl.addEventListener('change', () => {
+              const newChecked = checkboxEl.checked;
+              labelEl.className = 'task-label' + (newChecked ? ' done' : '');
+              autoSave(fg.file, task.line, newChecked, checkboxEl, labelEl);
+            });
+
+            itemEl.appendChild(checkboxEl);
+            itemEl.appendChild(labelEl);
+            listEl.appendChild(itemEl);
+          }
+
+          sectionEl.appendChild(listEl);
+          bodyEl.appendChild(sectionEl);
+        }
+
+        groupEl.appendChild(bodyEl);
+        sectionsEl.appendChild(groupEl);
+      }
+    }
+  </script>
+</body>
+</html>