@assistkick/create 1.6.0 → 1.8.0

package/templates/assistkick-product-system/packages/frontend/src/utils/auto_save_service.test.ts

@@ -0,0 +1,167 @@
+import { describe, it, beforeEach, afterEach, mock } from 'node:test';
+import assert from 'node:assert/strict';
+import { AutoSaveService } from './auto_save_service.ts';
+
+describe('AutoSaveService', () => {
+  let service: AutoSaveService;
+  let saveFn: ReturnType<typeof mock.fn<(path: string, content: string) => Promise<void>>>;
+  let dirtyChangeFn: ReturnType<typeof mock.fn<(path: string, dirty: boolean) => void>>;
+  let errorFn: ReturnType<typeof mock.fn<(path: string, error: string) => void>>;
+
+  beforeEach(() => {
+    saveFn = mock.fn(async () => {});
+    dirtyChangeFn = mock.fn(() => {});
+    errorFn = mock.fn(() => {});
+    service = new AutoSaveService({
+      save: saveFn,
+      onDirtyChange: dirtyChangeFn,
+      onSaveError: errorFn,
+    });
+  });
+
+  afterEach(() => {
+    service.dispose();
+  });
+
+  it('marks path as dirty on change', () => {
+    service.handleChange('file.ts', 'content');
+    assert.equal(service.isDirty('file.ts'), true);
+  });
+
+  it('calls onDirtyChange(path, true) on change', () => {
+    service.handleChange('file.ts', 'content');
+    assert.equal(dirtyChangeFn.mock.calls.length, 1);
+    assert.deepEqual(dirtyChangeFn.mock.calls[0].arguments, ['file.ts', true]);
+  });
+
+  it('does not save immediately on change (debounced)', () => {
+    service.handleChange('file.ts', 'content');
+    assert.equal(saveFn.mock.calls.length, 0);
+  });
+
+  it('saveNow cancels pending debounce timer', async () => {
+    service.handleChange('file.ts', 'content');
+    assert.equal(saveFn.mock.calls.length, 0);
+
+    // saveNow should cancel the debounce and save immediately
+    service.saveNow('file.ts');
+    await new Promise((resolve) => setImmediate(resolve));
+
+    assert.equal(saveFn.mock.calls.length, 1);
+    assert.deepEqual(saveFn.mock.calls[0].arguments, ['file.ts', 'content']);
+  });
+
+  it('saveNow uses latest content when called after multiple changes', async () => {
+    service.handleChange('file.ts', 'v1');
+    service.handleChange('file.ts', 'v2');
+    service.handleChange('file.ts', 'v3');
+
+    service.saveNow('file.ts');
+    await new Promise((resolve) => setImmediate(resolve));
+
+    assert.equal(saveFn.mock.calls.length, 1);
+    assert.deepEqual(saveFn.mock.calls[0].arguments, ['file.ts', 'v3']);
+  });
+
+  it('saveNow triggers immediate save', async () => {
+    service.handleChange('file.ts', 'content');
+    assert.equal(saveFn.mock.calls.length, 0);
+
+    service.saveNow('file.ts');
+    // Allow promise microtask to run
+    await new Promise((resolve) => setImmediate(resolve));
+
+    assert.equal(saveFn.mock.calls.length, 1);
+    assert.deepEqual(saveFn.mock.calls[0].arguments, ['file.ts', 'content']);
+  });
+
+  it('saveNow does nothing when path has no pending changes', async () => {
+    service.saveNow('file.ts');
+    await new Promise((resolve) => setImmediate(resolve));
+    assert.equal(saveFn.mock.calls.length, 0);
+  });
+
+  it('clears dirty state after successful save', async () => {
+    service.handleChange('file.ts', 'content');
+    assert.equal(service.isDirty('file.ts'), true);
+
+    service.saveNow('file.ts');
+    await new Promise((resolve) => setImmediate(resolve));
+
+    assert.equal(service.isDirty('file.ts'), false);
+    // Should have called onDirtyChange(path, false)
+    const falseCalls = dirtyChangeFn.mock.calls.filter(
+      (c) => c.arguments[0] === 'file.ts' && c.arguments[1] === false,
+    );
+    assert.equal(falseCalls.length, 1);
+  });
+
+  it('calls onSaveError on save failure and keeps dirty state', async () => {
+    saveFn = mock.fn(async () => { throw new Error('Network error'); });
+    service = new AutoSaveService({
+      save: saveFn,
+      onDirtyChange: dirtyChangeFn,
+      onSaveError: errorFn,
+    });
+
+    service.handleChange('file.ts', 'content');
+    service.saveNow('file.ts');
+    await new Promise((resolve) => setImmediate(resolve));
+
+    assert.equal(errorFn.mock.calls.length, 1);
+    assert.equal(errorFn.mock.calls[0].arguments[0], 'file.ts');
+    assert.equal(errorFn.mock.calls[0].arguments[1], 'Network error');
+    // Dirty state should remain
+    assert.equal(service.isDirty('file.ts'), true);
+  });
+
+  it('tracks multiple files independently', () => {
+    service.handleChange('a.ts', 'content-a');
+    service.handleChange('b.ts', 'content-b');
+    assert.equal(service.isDirty('a.ts'), true);
+    assert.equal(service.isDirty('b.ts'), true);
+    assert.equal(service.isDirty('c.ts'), false);
+  });
+
+  it('saveAndDiscard saves and removes tracking for the path', async () => {
+    service.handleChange('file.ts', 'content');
+    assert.equal(service.isDirty('file.ts'), true);
+
+    service.saveAndDiscard('file.ts');
+    await new Promise((resolve) => setImmediate(resolve));
+
+    assert.equal(saveFn.mock.calls.length, 1);
+  });
+
+  it('dispose clears all timers and state', () => {
+    service.handleChange('a.ts', 'content-a');
+    service.handleChange('b.ts', 'content-b');
+    service.dispose();
+
+    assert.equal(service.isDirty('a.ts'), false);
+    assert.equal(service.isDirty('b.ts'), false);
+  });
+
+  it('does not clear dirty if content changed during save', async () => {
+    let resolvePromise: () => void;
+    const slowSave = mock.fn(() => new Promise<void>((resolve) => { resolvePromise = resolve; }));
+    service = new AutoSaveService({
+      save: slowSave,
+      onDirtyChange: dirtyChangeFn,
+      onSaveError: errorFn,
+    });
+
+    service.handleChange('file.ts', 'v1');
+    service.saveNow('file.ts');
+
+    // While save is in-flight, user types more
+    service.handleChange('file.ts', 'v2');
+
+    // Now resolve the first save
+    resolvePromise!();
+    await new Promise((resolve) => setImmediate(resolve));
+
+    // Should still be dirty because content changed to v2 during save
+    assert.equal(service.isDirty('file.ts'), true);
+  });
+});

package/templates/assistkick-product-system/packages/frontend/src/utils/auto_save_service.ts

@@ -0,0 +1,101 @@
+const DEBOUNCE_DELAY_MS = 3000;
+
+interface SaveFn {
+  (path: string, content: string): Promise<void>;
+}
+
+interface OnDirtyChange {
+  (path: string, dirty: boolean): void;
+}
+
+interface OnSaveError {
+  (path: string, error: string): void;
+}
+
+interface AutoSaveServiceDeps {
+  save: SaveFn;
+  onDirtyChange: OnDirtyChange;
+  onSaveError: OnSaveError;
+}
+
+export class AutoSaveService {
+  private save: SaveFn;
+  private onDirtyChange: OnDirtyChange;
+  private onSaveError: OnSaveError;
+  private timers: Map<string, ReturnType<typeof setTimeout>> = new Map();
+  private contents: Map<string, string> = new Map();
+  private saving: Map<string, boolean> = new Map();
+
+  constructor(deps: AutoSaveServiceDeps) {
+    this.save = deps.save;
+    this.onDirtyChange = deps.onDirtyChange;
+    this.onSaveError = deps.onSaveError;
+  }
+
+  handleChange = (path: string, content: string) => {
+    this.contents.set(path, content);
+    this.onDirtyChange(path, true);
+    this.clearTimer(path);
+
+    const timer = setTimeout(() => {
+      this.performSave(path);
+    }, DEBOUNCE_DELAY_MS);
+    this.timers.set(path, timer);
+  };
+
+  saveNow = (path: string) => {
+    this.clearTimer(path);
+    if (this.contents.has(path)) {
+      this.performSave(path);
+    }
+  };
+
+  saveAndDiscard = (path: string) => {
+    this.clearTimer(path);
+    if (this.contents.has(path)) {
+      this.performSave(path);
+    }
+    this.contents.delete(path);
+  };
+
+  isDirty = (path: string): boolean => {
+    return this.contents.has(path);
+  };
+
+  dispose = () => {
+    for (const timer of this.timers.values()) {
+      clearTimeout(timer);
+    }
+    this.timers.clear();
+    this.contents.clear();
+    this.saving.clear();
+  };
+
+  private performSave = async (path: string) => {
+    const content = this.contents.get(path);
+    if (content === undefined || this.saving.get(path)) return;
+
+    this.saving.set(path, true);
+    try {
+      await this.save(path, content);
+      // Only clear dirty if content hasn't changed during save
+      if (this.contents.get(path) === content) {
+        this.contents.delete(path);
+        this.onDirtyChange(path, false);
+      }
+    } catch (err: any) {
+      const message = err?.message || 'Failed to save file';
+      this.onSaveError(path, message);
+    } finally {
+      this.saving.set(path, false);
+    }
+  };
+
+  private clearTimer = (path: string) => {
+    const existing = this.timers.get(path);
+    if (existing) {
+      clearTimeout(existing);
+      this.timers.delete(path);
+    }
+  };
+}

package/templates/assistkick-product-system/packages/frontend/src/utils/composition_matcher.test.ts

@@ -0,0 +1,42 @@
+import { describe, it } from 'node:test';
+import assert from 'node:assert/strict';
+import { findCompositionModuleKey } from './composition_matcher.ts';
+
+describe('findCompositionModuleKey', () => {
+  const moduleKeys = [
+    '../../../video/compositions/intro_video/index.tsx',
+    '../../../video/compositions/product_demo/index.tsx',
+    '../../../video/compositions/outro/index.tsx',
+  ];
+
+  it('finds matching module by composition ID', () => {
+    const result = findCompositionModuleKey(moduleKeys, 'product_demo');
+    assert.equal(result, '../../../video/compositions/product_demo/index.tsx');
+  });
+
+  it('returns undefined for non-existent composition', () => {
+    const result = findCompositionModuleKey(moduleKeys, 'nonexistent');
+    assert.equal(result, undefined);
+  });
+
+  it('returns undefined for empty module keys', () => {
+    const result = findCompositionModuleKey([], 'intro_video');
+    assert.equal(result, undefined);
+  });
+
+  it('matches first found when multiple compositions exist', () => {
+    const result = findCompositionModuleKey(moduleKeys, 'intro_video');
+    assert.equal(result, '../../../video/compositions/intro_video/index.tsx');
+  });
+
+  it('does not match partial directory names', () => {
+    const result = findCompositionModuleKey(moduleKeys, 'intro');
+    assert.equal(result, undefined);
+  });
+
+  it('handles paths with different depth', () => {
+    const keys = ['./compositions/my_comp/index.tsx'];
+    const result = findCompositionModuleKey(keys, 'my_comp');
+    assert.equal(result, './compositions/my_comp/index.tsx');
+  });
+});

package/templates/assistkick-product-system/packages/frontend/src/utils/composition_matcher.ts

@@ -0,0 +1,17 @@
+/**
+ * Find the module key from an import.meta.glob result that matches
+ * a given composition ID by extracting the directory name from the path.
+ *
+ * Module keys look like: '../../../video/compositions/my_video/index.tsx'
+ * The composition ID matches the directory name (second-to-last segment).
+ */
+export const findCompositionModuleKey = (
+  moduleKeys: string[],
+  compositionId: string,
+): string | undefined => {
+  return moduleKeys.find(key => {
+    const parts = key.split('/');
+    const dirName = parts[parts.length - 2];
+    return dirName === compositionId;
+  });
+};

package/templates/assistkick-product-system/packages/frontend/src/utils/file_utils.test.ts

@@ -0,0 +1,145 @@
+import { describe, it } from 'node:test';
+import assert from 'node:assert/strict';
+import { getLanguageFromPath, getFileName, getParentPath, buildNewPath, updatePathPrefix } from './file_utils.ts';
+
+describe('getLanguageFromPath', () => {
+  it('returns typescript for .ts files', () => {
+    assert.equal(getLanguageFromPath('src/app.ts'), 'typescript');
+  });
+
+  it('returns typescript for .tsx files', () => {
+    assert.equal(getLanguageFromPath('components/Button.tsx'), 'typescript');
+  });
+
+  it('returns javascript for .js files', () => {
+    assert.equal(getLanguageFromPath('index.js'), 'javascript');
+  });
+
+  it('returns javascript for .jsx files', () => {
+    assert.equal(getLanguageFromPath('App.jsx'), 'javascript');
+  });
+
+  it('returns json for .json files', () => {
+    assert.equal(getLanguageFromPath('package.json'), 'json');
+  });
+
+  it('returns css for .css files', () => {
+    assert.equal(getLanguageFromPath('styles/index.css'), 'css');
+  });
+
+  it('returns markdown for .md files', () => {
+    assert.equal(getLanguageFromPath('README.md'), 'markdown');
+  });
+
+  it('returns python for .py files', () => {
+    assert.equal(getLanguageFromPath('script.py'), 'python');
+  });
+
+  it('returns html for .html files', () => {
+    assert.equal(getLanguageFromPath('index.html'), 'html');
+  });
+
+  it('returns yaml for .yml files', () => {
+    assert.equal(getLanguageFromPath('config.yml'), 'yaml');
+  });
+
+  it('returns shell for .sh files', () => {
+    assert.equal(getLanguageFromPath('deploy.sh'), 'shell');
+  });
+
+  it('returns plaintext for unknown extensions', () => {
+    assert.equal(getLanguageFromPath('file.xyz'), 'plaintext');
+  });
+
+  it('returns plaintext for files without extensions', () => {
+    assert.equal(getLanguageFromPath('Makefile'), 'plaintext');
+  });
+
+  it('handles nested paths correctly', () => {
+    assert.equal(getLanguageFromPath('src/components/deep/file.tsx'), 'typescript');
+  });
+
+  it('is case-insensitive for extensions', () => {
+    assert.equal(getLanguageFromPath('FILE.TS'), 'typescript');
+    assert.equal(getLanguageFromPath('style.CSS'), 'css');
+  });
+});
+
+describe('getFileName', () => {
+  it('returns the filename from a path', () => {
+    assert.equal(getFileName('src/components/Button.tsx'), 'Button.tsx');
+  });
+
+  it('returns the filename when no directory', () => {
+    assert.equal(getFileName('index.ts'), 'index.ts');
+  });
+
+  it('handles deeply nested paths', () => {
+    assert.equal(getFileName('a/b/c/d/file.js'), 'file.js');
+  });
+
+  it('returns the input for a single filename', () => {
+    assert.equal(getFileName('README.md'), 'README.md');
+  });
+});
+
+describe('getParentPath', () => {
+  it('returns parent directory for nested path', () => {
+    assert.equal(getParentPath('src/components/Button.tsx'), 'src/components');
+  });
+
+  it('returns empty string for root-level file', () => {
+    assert.equal(getParentPath('index.ts'), '');
+  });
+
+  it('returns parent for deeply nested path', () => {
+    assert.equal(getParentPath('a/b/c/d/file.js'), 'a/b/c/d');
+  });
+
+  it('returns parent directory for directory path', () => {
+    assert.equal(getParentPath('src/utils'), 'src');
+  });
+});
+
+describe('buildNewPath', () => {
+  it('builds new path in same directory', () => {
+    assert.equal(buildNewPath('src/old.ts', 'new.ts'), 'src/new.ts');
+  });
+
+  it('builds new path at root level', () => {
+    assert.equal(buildNewPath('old.ts', 'new.ts'), 'new.ts');
+  });
+
+  it('builds new path for nested file', () => {
+    assert.equal(buildNewPath('src/components/Old.tsx', 'New.tsx'), 'src/components/New.tsx');
+  });
+
+  it('builds new path for directory rename', () => {
+    assert.equal(buildNewPath('src/utils', 'helpers'), 'src/helpers');
+  });
+});
+
+describe('updatePathPrefix', () => {
+  it('replaces exact matching path', () => {
+    assert.equal(updatePathPrefix('src/old.ts', 'src/old.ts', 'src/new.ts'), 'src/new.ts');
+  });
+
+  it('replaces prefix for child paths', () => {
+    assert.equal(
+      updatePathPrefix('src/utils/helper.ts', 'src/utils', 'src/helpers'),
+      'src/helpers/helper.ts',
+    );
+  });
+
+  it('returns unchanged path when no match', () => {
+    assert.equal(updatePathPrefix('other/file.ts', 'src/old.ts', 'src/new.ts'), 'other/file.ts');
+  });
+
+  it('does not match partial directory names', () => {
+    assert.equal(updatePathPrefix('src/utils2/file.ts', 'src/utils', 'src/helpers'), 'src/utils2/file.ts');
+  });
+
+  it('handles root-level rename', () => {
+    assert.equal(updatePathPrefix('old/file.ts', 'old', 'new'), 'new/file.ts');
+  });
+});

package/templates/assistkick-product-system/packages/frontend/src/utils/file_utils.ts

@@ -0,0 +1,42 @@
+const EXTENSION_LANGUAGE_MAP: Record<string, string> = {
+  '.ts': 'typescript', '.tsx': 'typescript',
+  '.js': 'javascript', '.jsx': 'javascript',
+  '.json': 'json', '.html': 'html', '.htm': 'html',
+  '.css': 'css', '.scss': 'scss', '.less': 'less',
+  '.md': 'markdown', '.yaml': 'yaml', '.yml': 'yaml',
+  '.xml': 'xml', '.sql': 'sql',
+  '.sh': 'shell', '.bash': 'shell', '.zsh': 'shell',
+  '.py': 'python', '.rb': 'ruby', '.go': 'go', '.rs': 'rust',
+  '.java': 'java', '.c': 'c', '.cpp': 'cpp', '.h': 'c', '.hpp': 'cpp',
+  '.cs': 'csharp', '.php': 'php', '.swift': 'swift', '.kt': 'kotlin',
+  '.lua': 'lua', '.r': 'r', '.toml': 'toml', '.ini': 'ini',
+  '.env': 'plaintext', '.txt': 'plaintext', '.log': 'plaintext',
+};
+
+export const getLanguageFromPath = (filePath: string): string => {
+  const dotIdx = filePath.lastIndexOf('.');
+  if (dotIdx === -1) return 'plaintext';
+  const ext = filePath.slice(dotIdx).toLowerCase();
+  return EXTENSION_LANGUAGE_MAP[ext] || 'plaintext';
+};
+
+export const getFileName = (filePath: string): string => {
+  const parts = filePath.split('/');
+  return parts[parts.length - 1] || filePath;
+};
+
+export const getParentPath = (path: string): string => {
+  const lastSlash = path.lastIndexOf('/');
+  return lastSlash === -1 ? '' : path.substring(0, lastSlash);
+};
+
+export const buildNewPath = (oldPath: string, newName: string): string => {
+  const parent = getParentPath(oldPath);
+  return parent ? `${parent}/${newName}` : newName;
+};
+
+export const updatePathPrefix = (path: string, oldPrefix: string, newPrefix: string): string => {
+  if (path === oldPrefix) return newPrefix;
+  if (path.startsWith(oldPrefix + '/')) return newPrefix + path.substring(oldPrefix.length);
+  return path;
+};

package/templates/assistkick-product-system/packages/frontend/src/utils/task_status.test.ts

@@ -21,16 +21,10 @@ describe('getTaskIcon', () => {
 });
 
 describe('getTaskCssClass', () => {
-  it('returns correct class for completed', () => {
-    assert.equal(getTaskCssClass('completed'), 'kanban-task-item task-completed');
-  });
-
-  it('returns correct class for in_progress', () => {
-    assert.equal(getTaskCssClass('in_progress'), 'kanban-task-item task-in_progress');
-  });
-
-  it('returns correct class for pending', () => {
-    assert.equal(getTaskCssClass('pending'), 'kanban-task-item task-pending');
+  it('returns tailwind layout class for any status', () => {
+    assert.ok(getTaskCssClass('completed').includes('flex'));
+    assert.ok(getTaskCssClass('in_progress').includes('flex'));
+    assert.ok(getTaskCssClass('pending').includes('flex'));
   });
 });
 

package/templates/assistkick-product-system/packages/frontend/src/utils/task_status.ts

@@ -8,7 +8,25 @@ export const getTaskIcon = (status: string): string =>
   TASK_ICONS[status] ?? TASK_ICONS.pending;
 
 export const getTaskCssClass = (status: string): string =>
-  `kanban-task-item task-${status}`;
+  'flex items-center gap-1.5 text-[10px] font-mono py-px';
+
+export const getTaskIconClass = (status: string): string => {
+  switch (status) {
+    case 'completed': return 'text-[#40c057]';
+    case 'in_progress': return 'text-accent animate-pulse';
+    case 'pending': return 'text-content-secondary opacity-50';
+    default: return 'text-content-secondary opacity-50';
+  }
+};
+
+export const getTaskNameClass = (status: string): string => {
+  switch (status) {
+    case 'completed': return 'text-content-secondary line-through opacity-70';
+    case 'in_progress': return 'text-accent';
+    case 'pending': return 'text-content-secondary';
+    default: return 'text-content-secondary';
+  }
+};
 
 export const shouldShowTaskList = (tasks: { total: number } | undefined | null): boolean =>
   !!tasks && tasks.total > 0;

package/templates/assistkick-product-system/packages/frontend/vite.config.ts

@@ -1,5 +1,6 @@
 import { defineConfig, loadEnv } from 'vite';
 import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite';
 import { fileURLToPath } from 'node:url';
 import { dirname, resolve } from 'node:path';
 
@@ -12,7 +13,7 @@ export default defineConfig(({ mode }) => {
   const backendPort = parseInt(env.PORT || '3000', 10);
 
   return {
-    plugins: [react()],
+    plugins: [tailwindcss(), react()],
     build: {
       outDir: 'dist',
       emptyOutDir: true,
@@ -26,6 +27,11 @@ export default defineConfig(({ mode }) => {
           ws: true,
         },
       },
+      fs: {
+        // Allow serving composition files from the video package for
+        // the Remotion Player preview (import.meta.glob traverses here)
+        allow: [__dirname, resolve(__dirname, '..', 'video')],
+      },
     },
   };
 });

package/templates/assistkick-product-system/packages/shared/db/migrations/0004_tidy_matthew_murdock.sql

@@ -0,0 +1,9 @@
+CREATE TABLE `terminal_sessions` (
+	`id` text PRIMARY KEY NOT NULL,
+	`claude_session_id` text NOT NULL,
+	`project_id` text NOT NULL,
+	`project_name` text NOT NULL,
+	`name` text NOT NULL,
+	`created_at` text NOT NULL,
+	`last_used_at` text NOT NULL
+);