lemming-cli 0.1.0__py3-none-any.whl

lemming/web/favicon.js

@@ -0,0 +1,40 @@
+window.updateFavicon = (state) => {
+  const emoji = '🐹';
+  let overlay = '';
+
+  // Badge position: Bottom-Right (75, 75)
+  const bx = 75;
+  const by = 75;
+
+  if (state === 'running') {
+    overlay = `
+      <circle cx="${bx}" cy="${by}" r="30" fill="white" />
+      <circle cx="${bx}" cy="${by}" r="22" fill="#1e40af">
+        <animate attributeName="r" values="16;26;16" dur="1s" repeatCount="indefinite" />
+        <animate attributeName="fill-opacity" values="0.6;1;0.6" dur="1s" repeatCount="indefinite" />
+      </circle>
+    `;
+  } else if (state === 'error') {
+    overlay = `
+      <circle cx="${bx}" cy="${by}" r="30" fill="white" />
+      <circle cx="${bx}" cy="${by}" r="24" fill="#9f1239" />
+      <path d="M${bx - 10} ${by - 10} l20 20 M${bx + 10} ${by - 10} l-20 20" stroke="white" stroke-width="10" stroke-linecap="round" />
+    `;
+  } else if (state === 'success') {
+    overlay = `
+      <circle cx="${bx}" cy="${by}" r="30" fill="white" />
+      <circle cx="${bx}" cy="${by}" r="24" fill="#065f46" />
+      <path d="M${bx - 12} ${by} l8 8 l16 -16" stroke="white" stroke-width="10" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+    `;
+  }
+
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <text y=".9em" font-size="90">${emoji}</text>
+    ${overlay}
+  </svg>`;
+
+  const link = document.querySelector('link[rel="icon"]');
+  if (link) {
+    link.href = `data:image/svg+xml,${encodeURIComponent(svg)}`;
+  }
+};

lemming/web/favicon.spec.js

@@ -0,0 +1,242 @@
+import * as fs from 'node:fs';
+import * as path from 'node:path';
+import { expect, test } from '@playwright/test';
+
+const indexHtmlPath = path.resolve(process.cwd(), 'src/lemming/web/index.html');
+const indexJsPath = path.resolve(process.cwd(), 'src/lemming/web/index.js');
+const filesHtmlPath = path.resolve(process.cwd(), 'src/lemming/web/files.html');
+const logsHtmlPath = path.resolve(process.cwd(), 'src/lemming/web/logs.html');
+const manchaJsPath = path.resolve(process.cwd(), 'src/lemming/web/mancha.js');
+const faviconJsPath = path.resolve(process.cwd(), 'src/lemming/web/favicon.js');
+
+test.describe('Favicon Status Synchronization', () => {
+  test.beforeEach(async ({ page }) => {
+    // Serve static files via mocks
+    await page.route('**/static/mancha.js', async (route) => {
+      await route.fulfill({
+        contentType: 'application/javascript',
+        body: fs.readFileSync(manchaJsPath, 'utf8'),
+      });
+    });
+    await page.route('**/static/favicon.js', async (route) => {
+      await route.fulfill({
+        contentType: 'application/javascript',
+        body: fs.readFileSync(faviconJsPath, 'utf8'),
+      });
+    });
+    await page.route('**/static/index.js', async (route) => {
+      await route.fulfill({
+        contentType: 'application/javascript',
+        body: fs.readFileSync(indexJsPath, 'utf8'),
+      });
+    });
+  });
+
+  test('Dashboard (index.html) favicon status and seen state', async ({
+    page,
+  }) => {
+    let loopRunning = false;
+    let tasks = [];
+
+    await page.route('**/api/data**', async (route) => {
+      await route.fulfill({
+        contentType: 'application/json',
+        json: { loop_running: loopRunning, tasks: tasks, context: '', cwd: '' },
+      });
+    });
+    await page.route('**/api/runners', async (route) => {
+      await route.fulfill({
+        contentType: 'application/json',
+        json: ['agy', 'aider'],
+      });
+    });
+
+    await page.route('**/api/hooks', async (route) => {
+      await route.fulfill({
+        contentType: 'application/json',
+        json: ['roadmap'],
+      });
+    });
+
+    await page.route('http://localhost:8000/', async (route) => {
+      await route.fulfill({
+        contentType: 'text/html',
+        body: fs.readFileSync(indexHtmlPath, 'utf8'),
+      });
+    });
+
+    await page.goto('http://localhost:8000/');
+    await page.waitForFunction(() => window.ManchaApp !== undefined);
+    await page.evaluate(async () => await window.ManchaApp);
+
+    // Initial idle
+    await expect(async () => {
+      const href = await page.evaluate(
+        () => document.querySelector('link[rel="icon"]').href,
+      );
+      const svg = decodeURIComponent(href);
+      expect(svg).toContain('🐹');
+      expect(svg).not.toContain('circle');
+    }).toPass();
+
+    // Running
+    loopRunning = true;
+    tasks = [{ id: 't1', status: 'in_progress', attempts: 1 }];
+    await expect(async () => {
+      const href = await page.evaluate(
+        () => document.querySelector('link[rel="icon"]').href,
+      );
+      const svg = decodeURIComponent(href);
+      expect(svg).toContain('circle');
+      expect(svg).toContain('animate');
+    }).toPass();
+
+    // Success
+    loopRunning = false;
+    tasks = [{ id: 't1', status: 'completed', attempts: 1 }];
+    await expect(async () => {
+      const href = await page.evaluate(
+        () => document.querySelector('link[rel="icon"]').href,
+      );
+      const svg = decodeURIComponent(href);
+      expect(svg).toContain('circle');
+      expect(svg).toContain('#065f46'); // green
+    }).toPass();
+
+    // Mark as seen
+    await page.evaluate(() => {
+      Object.defineProperty(document, 'visibilityState', {
+        value: 'visible',
+        writable: true,
+      });
+      document.dispatchEvent(new Event('visibilitychange'));
+    });
+
+    // Reload shows idle
+    await page.reload();
+    await page.waitForFunction(() => window.ManchaApp !== undefined);
+    await page.evaluate(async () => await window.ManchaApp);
+    await expect(async () => {
+      const href = await page.evaluate(
+        () => document.querySelector('link[rel="icon"]').href,
+      );
+      const svg = decodeURIComponent(href);
+      expect(svg).not.toContain('circle');
+    }).toPass();
+  });
+
+  test('Files (files.html) favicon status reflects project status', async ({
+    page,
+  }) => {
+    let loopRunning = true;
+    let tasks = [{ id: 't1', status: 'in_progress', attempts: 1 }];
+
+    await page.route('**/api/data**', async (route) => {
+      await route.fulfill({
+        contentType: 'application/json',
+        json: { loop_running: loopRunning, tasks: tasks, context: '', cwd: '' },
+      });
+    });
+    await page.route('**/api/files/**', async (route) => {
+      await route.fulfill({
+        contentType: 'application/json',
+        json: { path: '', contents: [] },
+      });
+    });
+    await page.route('http://localhost:8000/files/', async (route) => {
+      await route.fulfill({
+        contentType: 'text/html',
+        body: fs.readFileSync(filesHtmlPath, 'utf8'),
+      });
+    });
+
+    await page.goto('http://localhost:8000/files/');
+    await page.waitForFunction(() => window.ManchaApp !== undefined);
+    await page.evaluate(async () => await window.ManchaApp);
+
+    await expect(async () => {
+      const href = await page.evaluate(
+        () => document.querySelector('link[rel="icon"]').href,
+      );
+      const svg = decodeURIComponent(href);
+      expect(svg).toContain('circle'); // running
+    }).toPass();
+
+    // Error
+    loopRunning = false;
+    tasks = [{ id: 't1', status: 'pending', attempts: 1 }];
+    await expect(async () => {
+      const href = await page.evaluate(
+        () => document.querySelector('link[rel="icon"]').href,
+      );
+      const svg = decodeURIComponent(href);
+      expect(svg).toContain('#9f1239'); // red
+    }).toPass();
+  });
+
+  test('Logs (logs.html) favicon status reflects task status', async ({
+    page,
+  }) => {
+    let taskStatus = 'in_progress';
+    const attempts = 1;
+
+    await page.route('**/api/tasks/t1', async (route) => {
+      await route.fulfill({
+        contentType: 'application/json',
+        json: {
+          id: 't1',
+          status: taskStatus,
+          attempts: attempts,
+          description: 'Task 1',
+        },
+      });
+    });
+    await page.route('**/api/tasks/t1/log**', async (route) => {
+      await route.fulfill({
+        contentType: 'application/json',
+        json: { log: 'test log' },
+      });
+    });
+    await page.route('http://localhost:8000/tasks/t1/log', async (route) => {
+      await route.fulfill({
+        contentType: 'text/html',
+        body: fs.readFileSync(logsHtmlPath, 'utf8'),
+      });
+    });
+
+    await page.goto('http://localhost:8000/tasks/t1/log');
+    await page.waitForFunction(() => window.ManchaApp !== undefined);
+    await page.evaluate(async () => await window.ManchaApp);
+
+    await expect(async () => {
+      const href = await page.evaluate(
+        () => document.querySelector('link[rel="icon"]').href,
+      );
+      const svg = decodeURIComponent(href);
+      expect(svg).toContain('circle'); // running
+    }).toPass();
+
+    // Success
+    taskStatus = 'completed';
+    await expect(async () => {
+      const href = await page.evaluate(
+        () => document.querySelector('link[rel="icon"]').href,
+      );
+      const svg = decodeURIComponent(href);
+      expect(svg).toContain('#065f46'); // green
+    }).toPass();
+
+    // Mark as seen
+    await page.evaluate(() => {
+      Object.defineProperty(document, 'visibilityState', {
+        value: 'visible',
+        writable: true,
+      });
+      document.dispatchEvent(new Event('visibilitychange'));
+    });
+    const lastSeen = await page.evaluate(() =>
+      localStorage.getItem('lemming[]_last_seen_state'),
+    );
+    expect(lastSeen).toBe(JSON.stringify('success'));
+  });
+});

lemming/web/files.html

@@ -0,0 +1,375 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Lemming</title>
+    <link
+      rel="icon"
+      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🐹</text></svg>"
+    />
+    <style id="mancha-cloak">
+      html {
+        background-color: #f9fafb; /* Gray 50 */
+      }
+      @media (prefers-color-scheme: dark) {
+        html {
+          background-color: #1f2937; /* Gray 800 */
+        }
+      }
+      body {
+        opacity: 0 !important;
+      }
+    </style>
+    <style>
+      /* Loading indicator visible during cloaking */
+      html.mancha-loading::after {
+        content: 'Loading Files...';
+        position: fixed;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-family: ui-sans-serif, system-ui, sans-serif;
+        font-size: 1.25rem;
+        font-weight: 600;
+        color: #4f46e5; /* Indigo 600 */
+        z-index: 9999;
+        animation: mancha-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+      }
+
+      @media (prefers-color-scheme: dark) {
+        html.mancha-loading::after {
+          color: #818cf8; /* Indigo 400 */
+        }
+      }
+
+      @keyframes mancha-pulse {
+        0%,
+        100% {
+          opacity: 1;
+        }
+        50% {
+          opacity: 0.5;
+        }
+      }
+    </style>
+    <script src="/static/mancha.js" css="utils"></script>
+    <script src="/static/favicon.js"></script>
+  </head>
+  <body
+    class="bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-100 font-sans min-h-screen flex flex-col"
+  >
+    <div class="max-w-4xl mx-auto p-4 flex-grow w-full flex flex-col">
+      <div :show="loading" class="flex-grow flex items-center justify-center">
+        <span class="text-gray-400 text-sm animate-pulse">Loading...</span>
+      </div>
+      <header
+        :show="!loading"
+        class="mb-4 flex items-center justify-between gap-4 shrink-0"
+      >
+        <div class="flex items-center gap-4 shrink-0">
+          <a
+            :attr:href="'/' + ($$project ? '?project=' + encodeURIComponent($$project) : '')"
+            class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 transition duration-200"
+            title="Back to Dashboard"
+            aria-label="Back to Dashboard"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="h-6 w-6"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
+              />
+            </svg>
+          </a>
+          <h1
+            class="text-2xl font-bold text-indigo-600 dark:text-indigo-400"
+            title="Lemming Task Runner"
+          >
+            Lemming Task Runner
+          </h1>
+        </div>
+        <div
+          class="text-sm font-mono text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-900 px-2 py-1 rounded truncate min-w-0"
+          :attr:title="'/' + path"
+        >
+          /{{ path }}
+        </div>
+      </header>
+
+      <section
+        :show="!loading"
+        class="bg-white dark:bg-gray-900 rounded-lg shadow-sm border border-gray-200 dark:border-gray-600 overflow-hidden"
+      >
+        <div class="overflow-x-auto">
+          <table class="w-full text-left border-collapse">
+            <thead
+              class="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-600"
+            >
+              <tr>
+                <th
+                  class="px-4 py-2 text-xs font-semibold text-gray-500 uppercase tracking-wider"
+                >
+                  Name
+                </th>
+                <th
+                  class="px-4 py-2 text-xs font-semibold text-gray-500 uppercase tracking-wider w-32"
+                >
+                  Size
+                </th>
+                <th
+                  class="px-4 py-2 text-xs font-semibold text-gray-500 uppercase tracking-wider w-48"
+                >
+                  Last Modified
+                </th>
+              </tr>
+            </thead>
+            <tbody class="bg-white dark:bg-gray-900">
+              <tr
+                :if="path"
+                class="border-b border-gray-200 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
+              >
+                <td class="px-4 py-2" colspan="3">
+                  <a
+                    :attr:href="'/files/' + path.split('/').slice(0, -1).join('/')"
+                    class="text-indigo-600 hover:text-indigo-800 font-medium flex items-center gap-2"
+                  >
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      class="h-4 w-4"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                    >
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"
+                      />
+                    </svg>
+                    .. / Parent Directory
+                  </a>
+                </td>
+              </tr>
+              <tr
+                :for="item in contents"
+                :key="item.path"
+                class="border-b border-gray-200 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
+              >
+                <td class="px-4 py-2">
+                  <a
+                    :attr:href="'/files/' + item.path"
+                    :attr:class="'flex items-center gap-2 ' + (item.is_dir ? 'text-indigo-600 font-medium' : 'text-gray-700 dark:text-gray-300')"
+                    :attr:target="item.is_dir ? '' : '_blank'"
+                  >
+                    <svg
+                      :if="item.is_dir"
+                      xmlns="http://www.w3.org/2000/svg"
+                      class="h-4 w-4 text-indigo-400"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                    >
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
+                      />
+                    </svg>
+                    <svg
+                      :if="!item.is_dir"
+                      xmlns="http://www.w3.org/2000/svg"
+                      class="h-4 w-4 text-gray-400"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                    >
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"
+                      />
+                    </svg>
+                    {{ item.name }}
+                  </a>
+                </td>
+                <td class="px-4 py-2 text-sm text-gray-500 font-mono">
+                  {{ formatSize(item.size) }}
+                </td>
+                <td class="px-4 py-2 text-sm text-gray-500">
+                  {{ formatDate(item.modified) }}
+                </td>
+              </tr>
+              <tr :if="!loading && contents.length === 0">
+                <td
+                  class="px-4 py-8 text-center text-gray-500 text-sm"
+                  colspan="3"
+                >
+                  This directory is empty.
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </div>
+
+    <script>
+      (async () => {
+        window.ManchaApp = Mancha.initMancha({
+          cloak: true,
+          callback: async (renderer) => {
+            const { $ } = renderer;
+
+            $.path = '';
+            $.contents = [];
+            $.loading = true;
+
+            // --- Project Scoping ---
+            // $$project is auto-synced with the ?project= URL query param by mancha.
+            $.$$project = $.$$project ?? '';
+
+            // --- Persistence Management (scoped by project) ---
+            const Storage = {
+              getPrefix() {
+                return `lemming[${$.$$project}]_`;
+              },
+              get(key, fallback) {
+                try {
+                  const val = localStorage.getItem(this.getPrefix() + key);
+                  return val !== null ? JSON.parse(val) : fallback;
+                } catch {
+                  return fallback;
+                }
+              },
+              set(key, val) {
+                localStorage.setItem(
+                  this.getPrefix() + key,
+                  JSON.stringify(val),
+                );
+              },
+            };
+
+            $.faviconState = 'idle';
+            $.lastSeenState = null; // Hydrate after mount
+
+            $.formatSize = (bytes) => {
+              if (bytes === null || bytes === undefined) return '';
+              if (bytes === 0) return '0 B';
+              const k = 1024;
+              const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+              const i = Math.floor(Math.log(bytes) / Math.log(k));
+              return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
+            };
+
+            $.formatDate = (ts) => {
+              return ts ? new Date(ts * 1000).toLocaleString() : '';
+            };
+
+            $.fetchFiles = async () => {
+              // Extract path from URL: /files/some/path -> some/path
+              const pathname = window.location.pathname;
+              const path = pathname
+                .replace(/^\/files\/?/, '')
+                .replace(/\/$/, '');
+
+              const [filesRes, dataRes] = await Promise.all([
+                fetch(`/api/files/${path}`),
+                fetch(
+                  $.$$project
+                    ? `/api/data?project=${encodeURIComponent($.$$project)}`
+                    : '/api/data',
+                ),
+              ]);
+
+              if (filesRes.ok) {
+                const data = await filesRes.json();
+                $.path = data.path;
+                $.contents = data.contents;
+
+                // Update title: Use the top-most folder from the current path or project.
+                const currentPath = $.path || $.$$project || '';
+                const folderName = currentPath.split('/').filter(Boolean)[0];
+                if (folderName) {
+                  document.title = `Lemming · ${folderName}`;
+                } else {
+                  document.title = 'Lemming';
+                }
+              } else {
+                console.error('Failed to fetch files');
+              }
+
+              if (dataRes.ok) {
+                const data = await dataRes.json();
+                const hasError = data.tasks.some(
+                  (t) => t.status === 'pending' && t.attempts > 0,
+                );
+                const allCompleted =
+                  data.tasks.length > 0 &&
+                  data.tasks.every((t) => t.status === 'completed');
+                const state = data.loop_running
+                  ? 'running'
+                  : hasError
+                    ? 'error'
+                    : allCompleted
+                      ? 'success'
+                      : 'idle';
+
+                $.faviconState = state;
+
+                // If a run starts, reset the last seen state
+                if (state === 'running') {
+                  $.lastSeenState = null;
+                  Storage.set('last_seen_state', null);
+                }
+
+                // If the current terminal state has already been seen by the user, show 'idle' favicon instead.
+                const effectiveState =
+                  (state === 'success' || state === 'error') &&
+                  state === $.lastSeenState
+                    ? 'idle'
+                    : state;
+                if (window.updateFavicon) window.updateFavicon(effectiveState);
+              }
+
+              $.loading = false;
+            };
+
+            document.addEventListener('visibilitychange', () => {
+              if (document.visibilityState === 'visible') {
+                // Force an immediate fetch when returning to the tab.
+                $.fetchFiles();
+
+                const state = $.faviconState;
+                if (state === 'success' || state === 'error') {
+                  $.lastSeenState = state;
+                  Storage.set('last_seen_state', state);
+                  if (window.updateFavicon) window.updateFavicon('idle');
+                }
+              }
+            });
+
+            await renderer.mount(document.body);
+
+            // Hydrate persistence after mount
+            $.lastSeenState = Storage.get('last_seen_state', null);
+
+            await $.fetchFiles();
+            setInterval(() => $.fetchFiles(), 1000);
+          },
+        });
+      })();
+    </script>
+  </body>
+</html>