@assistkick/create 1.9.0 → 1.11.0

package/templates/assistkick-product-system/packages/frontend/src/hooks/use_file_tree_cache.ts

@@ -0,0 +1,69 @@
+/**
+ * useFileTreeCache — fetches project file tree, flattens to paths, caches client-side.
+ * Re-fetches on window focus regain.
+ * Excludes common library/build directories for autocomplete relevance.
+ */
+
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { apiClient } from '../api/client';
+
+interface TreeEntry {
+  name: string;
+  path: string;
+  type: 'file' | 'directory';
+  children?: TreeEntry[];
+}
+
+const EXCLUDED_DIRS = new Set([
+  'node_modules', '.git', '__pycache__', '.venv', 'venv',
+  'dist', 'build', '.next', '.nuxt', 'target', 'vendor',
+  '.tox', 'eggs', '.mypy_cache', '.pytest_cache',
+  '.cache', 'coverage', '.nyc_output',
+]);
+
+const flattenTree = (entries: TreeEntry[]): string[] => {
+  const paths: string[] = [];
+
+  for (const entry of entries) {
+    if (EXCLUDED_DIRS.has(entry.name)) continue;
+
+    paths.push(entry.path);
+
+    if (entry.type === 'directory' && entry.children) {
+      paths.push(...flattenTree(entry.children));
+    }
+  }
+
+  return paths;
+};
+
+export const useFileTreeCache = (projectId: string | null): string[] => {
+  const [filePaths, setFilePaths] = useState<string[]>([]);
+  const lastProjectIdRef = useRef<string | null>(null);
+
+  const fetchTree = useCallback(async () => {
+    if (!projectId) return;
+    try {
+      const { tree } = await apiClient.fetchFileTree(projectId);
+      setFilePaths(flattenTree(tree));
+    } catch {
+      // Silently fail — file tree is optional for autocomplete
+    }
+  }, [projectId]);
+
+  // Fetch when projectId changes
+  useEffect(() => {
+    if (projectId === lastProjectIdRef.current) return;
+    lastProjectIdRef.current = projectId;
+    fetchTree();
+  }, [projectId, fetchTree]);
+
+  // Re-fetch on window focus regain
+  useEffect(() => {
+    const handleFocus = () => fetchTree();
+    window.addEventListener('focus', handleFocus);
+    return () => window.removeEventListener('focus', handleFocus);
+  }, [fetchTree]);
+
+  return filePaths;
+};

package/templates/assistkick-product-system/packages/frontend/src/hooks/use_mention_autocomplete.ts

@@ -0,0 +1,284 @@
+/**
+ * useMentionAutocomplete — manages autocomplete trigger detection, item filtering,
+ * keyboard navigation, and mention parsing for the chat input.
+ *
+ * Supports:
+ * - @ trigger anywhere for file path autocomplete
+ * - / trigger at input start for skill autocomplete
+ * - Fuzzy matching with substring fallback
+ * - Keyboard navigation (arrow keys, Enter/Tab, Escape)
+ */
+
+import { useState, useCallback, useMemo, useRef } from 'react';
+import type { SkillInfo } from '../api/client';
+
+export interface AutocompleteItem {
+  label: string;
+  value: string;
+  description?: string;
+  type: 'file' | 'skill';
+}
+
+export interface Mention {
+  type: 'file' | 'skill';
+  value: string;
+  displayValue: string;
+  startIndex: number;
+  endIndex: number;
+}
+
+interface TriggerInfo {
+  type: 'file' | 'skill';
+  query: string;
+  triggerIndex: number;
+}
+
+const MAX_DROPDOWN_ITEMS = 50;
+
+/**
+ * Fuzzy match: checks if all characters of the query appear in order
+ * in the candidate string (case-insensitive).
+ */
+const fuzzyMatch = (query: string, candidate: string): boolean => {
+  const lq = query.toLowerCase();
+  const lc = candidate.toLowerCase();
+  let qi = 0;
+  for (let ci = 0; ci < lc.length && qi < lq.length; ci++) {
+    if (lc[ci] === lq[qi]) qi++;
+  }
+  return qi === lq.length;
+};
+
+/**
+ * Detect autocomplete trigger from text and cursor position.
+ * / at position 0 triggers skill autocomplete.
+ * @ preceded by whitespace or at start triggers file autocomplete.
+ */
+const detectTrigger = (text: string, cursorPos: number): TriggerInfo | null => {
+  if (cursorPos === 0) return null;
+  const beforeCursor = text.slice(0, cursorPos);
+
+  // / at start of input — only if no whitespace yet (still typing skill name)
+  if (beforeCursor.startsWith('/')) {
+    const afterSlash = beforeCursor.slice(1);
+    if (!/\s/.test(afterSlash)) {
+      return { type: 'skill', query: afterSlash, triggerIndex: 0 };
+    }
+  }
+
+  // @ trigger: find the last @ before cursor that's preceded by whitespace or at start
+  const lastAtIndex = beforeCursor.lastIndexOf('@');
+  if (lastAtIndex >= 0) {
+    if (lastAtIndex === 0 || /\s/.test(beforeCursor[lastAtIndex - 1])) {
+      const query = beforeCursor.slice(lastAtIndex + 1);
+      if (!/\s/.test(query)) {
+        return { type: 'file', query, triggerIndex: lastAtIndex };
+      }
+    }
+  }
+
+  return null;
+};
+
+/**
+ * Parse completed mentions from the text value.
+ * A mention is valid when the path/skill name matches known values.
+ */
+const parseMentions = (text: string, filePathSet: Set<string>, skillFolderNameSet: Set<string>): Mention[] => {
+  const mentions: Mention[] = [];
+
+  // /skill at start
+  if (text.startsWith('/')) {
+    const match = text.match(/^\/(\S+)/);
+    if (match && skillFolderNameSet.has(match[1])) {
+      mentions.push({
+        type: 'skill',
+        value: match[1],
+        displayValue: match[1],
+        startIndex: 0,
+        endIndex: match[0].length,
+      });
+    }
+  }
+
+  // @file mentions — must be preceded by whitespace or at start
+  const atRegex = /(?:^|\s)@(\S+)/g;
+  let m;
+  while ((m = atRegex.exec(text)) !== null) {
+    const path = m[1];
+    if (filePathSet.has(path)) {
+      const atIndex = text.indexOf('@', m.index);
+      mentions.push({
+        type: 'file',
+        value: path,
+        displayValue: path,
+        startIndex: atIndex,
+        endIndex: atIndex + path.length + 1,
+      });
+    }
+  }
+
+  return mentions;
+};
+
+/**
+ * Filter and sort candidates using fuzzy match with substring fallback.
+ */
+const filterCandidates = (candidates: AutocompleteItem[], query: string): AutocompleteItem[] => {
+  if (!query) return candidates.slice(0, MAX_DROPDOWN_ITEMS);
+
+  const fuzzyResults = candidates.filter(c => fuzzyMatch(query, c.label));
+  if (fuzzyResults.length > 0) return fuzzyResults.slice(0, MAX_DROPDOWN_ITEMS);
+
+  const lower = query.toLowerCase();
+  return candidates.filter(c => c.label.toLowerCase().includes(lower)).slice(0, MAX_DROPDOWN_ITEMS);
+};
+
+interface UseMentionAutocompleteOptions {
+  filePaths: string[];
+  skills: SkillInfo[];
+  value: string;
+  onChange: (value: string) => void;
+  textareaRef: React.RefObject<HTMLTextAreaElement | null>;
+}
+
+export const useMentionAutocomplete = ({
+  filePaths,
+  skills,
+  value,
+  onChange,
+  textareaRef,
+}: UseMentionAutocompleteOptions) => {
+  const [trigger, setTrigger] = useState<TriggerInfo | null>(null);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const dismissedAtRef = useRef<number | null>(null);
+
+  const filePathSet = useMemo(() => new Set(filePaths), [filePaths]);
+  const skillFolderNameSet = useMemo(() => new Set(skills.map(s => s.folderName)), [skills]);
+
+  // Build autocomplete items from trigger
+  const items = useMemo((): AutocompleteItem[] => {
+    if (!trigger) return [];
+
+    if (trigger.type === 'file') {
+      const candidates = filePaths.map(p => ({
+        label: p,
+        value: `@${p}`,
+        type: 'file' as const,
+      }));
+      return filterCandidates(candidates, trigger.query);
+    }
+
+    if (trigger.type === 'skill') {
+      const candidates = skills.map(s => ({
+        label: s.folderName,
+        value: `/${s.folderName}`,
+        description: s.description,
+        type: 'skill' as const,
+      }));
+      return filterCandidates(candidates, trigger.query);
+    }
+
+    return [];
+  }, [trigger, filePaths, skills]);
+
+  // Parse current mentions
+  const mentions = useMemo(
+    () => parseMentions(value, filePathSet, skillFolderNameSet),
+    [value, filePathSet, skillFolderNameSet],
+  );
+
+  const showDropdown = trigger !== null && items.length > 0;
+
+  // Called when text or cursor position changes
+  const onTextChange = useCallback((text: string, cursorPos: number) => {
+    const newTrigger = detectTrigger(text, cursorPos);
+
+    if (newTrigger) {
+      // If this trigger was dismissed and query hasn't changed, keep it dismissed
+      if (dismissedAtRef.current === newTrigger.triggerIndex) {
+        setTrigger(null);
+        return;
+      }
+      // New trigger or query changed — clear dismissed state
+      dismissedAtRef.current = null;
+    }
+
+    setTrigger(newTrigger);
+    if (newTrigger) setSelectedIndex(0);
+  }, []);
+
+  // Handle autocomplete item selection
+  const selectItem = useCallback((item: AutocompleteItem) => {
+    if (!trigger || !textareaRef.current) return;
+
+    const textarea = textareaRef.current;
+    const cursorPos = textarea.selectionStart;
+    const before = value.slice(0, trigger.triggerIndex);
+    const afterCursor = value.slice(cursorPos);
+    const insertText = item.value + ' ';
+    const newValue = before + insertText + afterCursor;
+
+    onChange(newValue);
+    setTrigger(null);
+    dismissedAtRef.current = null;
+
+    // Position cursor after inserted text
+    const newCursorPos = trigger.triggerIndex + insertText.length;
+    requestAnimationFrame(() => {
+      textarea.selectionStart = newCursorPos;
+      textarea.selectionEnd = newCursorPos;
+      textarea.focus();
+    });
+  }, [trigger, value, onChange, textareaRef]);
+
+  // Handle keyboard events for dropdown navigation
+  const onKeyDown = useCallback((e: React.KeyboardEvent<HTMLTextAreaElement>): boolean => {
+    if (!showDropdown) return false;
+
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault();
+        setSelectedIndex(i => (i + 1) % items.length);
+        return true;
+      case 'ArrowUp':
+        e.preventDefault();
+        setSelectedIndex(i => (i - 1 + items.length) % items.length);
+        return true;
+      case 'Enter':
+      case 'Tab':
+        e.preventDefault();
+        if (items[selectedIndex]) {
+          selectItem(items[selectedIndex]);
+        }
+        return true;
+      case 'Escape':
+        e.preventDefault();
+        dismissedAtRef.current = trigger?.triggerIndex ?? null;
+        setTrigger(null);
+        return true;
+      default:
+        return false;
+    }
+  }, [showDropdown, items, selectedIndex, selectItem, trigger]);
+
+  // Remove a mention from the text
+  const removeMention = useCallback((mention: Mention) => {
+    const before = value.slice(0, mention.startIndex);
+    const after = value.slice(mention.endIndex);
+    const newValue = (before + after.replace(/^ /, '')).trimStart();
+    onChange(newValue);
+  }, [value, onChange]);
+
+  return {
+    showDropdown,
+    dropdownType: trigger?.type ?? 'file',
+    items,
+    selectedIndex,
+    mentions,
+    onTextChange,
+    onKeyDown,
+    selectItem,
+    removeMention,
+  };
+};

package/templates/assistkick-product-system/packages/frontend/src/lib/attachment_manager.test.ts

@@ -0,0 +1,183 @@
+import { describe, it, beforeEach } from 'node:test';
+import assert from 'node:assert/strict';
+import { AttachmentManager } from './attachment_manager.ts';
+
+describe('AttachmentManager', () => {
+  let mgr: AttachmentManager;
+
+  beforeEach(() => {
+    mgr = new AttachmentManager();
+  });
+
+  describe('addUpload', () => {
+    it('adds an upload attachment with uploading=true', () => {
+      const file = { name: 'photo.png', size: 1024, type: 'image/png' } as File;
+      const att = mgr.addUpload(file, 'data:image/png;base64,abc');
+
+      assert.equal(att.name, 'photo.png');
+      assert.equal(att.size, 1024);
+      assert.equal(att.mimeType, 'image/png');
+      assert.equal(att.source, 'upload');
+      assert.equal(att.preview, 'data:image/png;base64,abc');
+      assert.equal(att.uploading, true);
+      assert.equal(att.path, '');
+    });
+
+    it('assigns unique IDs', () => {
+      const f1 = { name: 'a.txt', size: 10, type: 'text/plain' } as File;
+      const f2 = { name: 'b.txt', size: 20, type: 'text/plain' } as File;
+      const a1 = mgr.addUpload(f1, null);
+      const a2 = mgr.addUpload(f2, null);
+      assert.notEqual(a1.id, a2.id);
+    });
+
+    it('defaults mimeType when file.type is empty', () => {
+      const file = { name: 'data.bin', size: 100, type: '' } as File;
+      const att = mgr.addUpload(file, null);
+      assert.equal(att.mimeType, 'application/octet-stream');
+    });
+  });
+
+  describe('addWorkspaceFile', () => {
+    it('adds a workspace file reference with uploading=false', () => {
+      const att = mgr.addWorkspaceFile('src/app.ts', 'app.ts', 2048, 'text/typescript');
+
+      assert.equal(att.name, 'app.ts');
+      assert.equal(att.path, 'src/app.ts');
+      assert.equal(att.size, 2048);
+      assert.equal(att.source, 'workspace');
+      assert.equal(att.uploading, false);
+    });
+  });
+
+  describe('markUploaded', () => {
+    it('sets path and uploading=false for the given attachment', () => {
+      const file = { name: 'doc.pdf', size: 500, type: 'application/pdf' } as File;
+      const att = mgr.addUpload(file, null);
+
+      const result = mgr.markUploaded(att.id, '.chat-uploads/123_doc.pdf');
+      assert.equal(result, true);
+
+      const updated = mgr.getAttachments().find((a) => a.id === att.id);
+      assert.equal(updated?.path, '.chat-uploads/123_doc.pdf');
+      assert.equal(updated?.uploading, false);
+    });
+
+    it('returns false for unknown id', () => {
+      assert.equal(mgr.markUploaded('nonexistent', '/path'), false);
+    });
+  });
+
+  describe('markUploadFailed', () => {
+    it('removes the attachment', () => {
+      const file = { name: 'fail.txt', size: 10, type: 'text/plain' } as File;
+      const att = mgr.addUpload(file, null);
+      assert.equal(mgr.getCount(), 1);
+
+      mgr.markUploadFailed(att.id);
+      assert.equal(mgr.getCount(), 0);
+    });
+  });
+
+  describe('remove', () => {
+    it('removes an attachment by id', () => {
+      const file = { name: 'a.txt', size: 10, type: 'text/plain' } as File;
+      const att = mgr.addUpload(file, null);
+      assert.equal(mgr.getCount(), 1);
+
+      const result = mgr.remove(att.id);
+      assert.equal(result, true);
+      assert.equal(mgr.getCount(), 0);
+    });
+
+    it('returns false for unknown id', () => {
+      assert.equal(mgr.remove('nonexistent'), false);
+    });
+  });
+
+  describe('clear', () => {
+    it('removes all attachments', () => {
+      mgr.addUpload({ name: 'a.txt', size: 10, type: 'text/plain' } as File, null);
+      mgr.addUpload({ name: 'b.txt', size: 20, type: 'text/plain' } as File, null);
+      assert.equal(mgr.getCount(), 2);
+
+      mgr.clear();
+      assert.equal(mgr.getCount(), 0);
+    });
+  });
+
+  describe('getReadyPaths', () => {
+    it('returns only paths of non-uploading attachments', () => {
+      const f1 = { name: 'uploading.txt', size: 10, type: 'text/plain' } as File;
+      mgr.addUpload(f1, null); // uploading=true, path=''
+
+      mgr.addWorkspaceFile('src/ready.ts', 'ready.ts', 100, 'text/typescript');
+
+      const f2 = { name: 'done.txt', size: 50, type: 'text/plain' } as File;
+      const att2 = mgr.addUpload(f2, null);
+      mgr.markUploaded(att2.id, '.chat-uploads/done.txt');
+
+      const paths = mgr.getReadyPaths();
+      assert.deepEqual(paths, ['src/ready.ts', '.chat-uploads/done.txt']);
+    });
+  });
+
+  describe('hasUploading', () => {
+    it('returns true when any attachment is uploading', () => {
+      mgr.addUpload({ name: 'a.txt', size: 10, type: 'text/plain' } as File, null);
+      assert.equal(mgr.hasUploading(), true);
+    });
+
+    it('returns false when no attachments are uploading', () => {
+      mgr.addWorkspaceFile('a.ts', 'a.ts', 100, 'text/typescript');
+      assert.equal(mgr.hasUploading(), false);
+    });
+
+    it('returns false when empty', () => {
+      assert.equal(mgr.hasUploading(), false);
+    });
+  });
+});
+
+describe('AttachmentManager static methods', () => {
+  describe('isImage', () => {
+    it('returns true for image MIME types', () => {
+      assert.equal(AttachmentManager.isImage('image/png'), true);
+      assert.equal(AttachmentManager.isImage('image/jpeg'), true);
+      assert.equal(AttachmentManager.isImage('image/gif'), true);
+      assert.equal(AttachmentManager.isImage('image/webp'), true);
+      assert.equal(AttachmentManager.isImage('image/svg+xml'), true);
+    });
+
+    it('returns false for non-image MIME types', () => {
+      assert.equal(AttachmentManager.isImage('text/plain'), false);
+      assert.equal(AttachmentManager.isImage('application/pdf'), false);
+      assert.equal(AttachmentManager.isImage('video/mp4'), false);
+    });
+  });
+
+  describe('formatMessageWithAttachments', () => {
+    it('returns message unchanged when no attachments', () => {
+      const result = AttachmentManager.formatMessageWithAttachments('Hello', []);
+      assert.equal(result, 'Hello');
+    });
+
+    it('appends file list to message', () => {
+      const result = AttachmentManager.formatMessageWithAttachments('Fix the bug', [
+        'src/app.ts',
+        'docs/screenshot.png',
+      ]);
+      assert.equal(
+        result,
+        'Fix the bug\n\nAttached files:\n- src/app.ts\n- docs/screenshot.png',
+      );
+    });
+
+    it('handles single attachment', () => {
+      const result = AttachmentManager.formatMessageWithAttachments('Look at this', [
+        'image.png',
+      ]);
+      assert.equal(result, 'Look at this\n\nAttached files:\n- image.png');
+    });
+  });
+});

package/templates/assistkick-product-system/packages/frontend/src/lib/attachment_manager.ts

@@ -0,0 +1,150 @@
+/**
+ * AttachmentManager — pure logic for managing file attachments in Chat v2.
+ *
+ * Tracks files attached to a chat message before it is sent.
+ * Supports two sources:
+ *   - 'upload': files dropped/selected from the user's computer (need uploading)
+ *   - 'workspace': files referenced from the project workspace (path-only)
+ *
+ * This class is framework-agnostic — the Zustand store wraps it for React.
+ */
+
+export type AttachmentSource = 'upload' | 'workspace';
+
+export interface Attachment {
+  id: string;
+  name: string;
+  /** Relative path within the project workspace (set after upload for 'upload' source) */
+  path: string;
+  size: number;
+  mimeType: string;
+  source: AttachmentSource;
+  /** Data URL preview for images (generated client-side) */
+  preview: string | null;
+  /** Whether this attachment is still being uploaded */
+  uploading: boolean;
+}
+
+const IMAGE_MIME_TYPES = new Set([
+  'image/png',
+  'image/jpeg',
+  'image/gif',
+  'image/webp',
+  'image/svg+xml',
+  'image/bmp',
+]);
+
+export class AttachmentManager {
+  private attachments: Attachment[] = [];
+  private idCounter = 0;
+
+  private nextId = (): string => {
+    return `att_${++this.idCounter}_${Date.now()}`;
+  };
+
+  getAttachments = (): readonly Attachment[] => {
+    return this.attachments;
+  };
+
+  getCount = (): number => {
+    return this.attachments.length;
+  };
+
+  hasUploading = (): boolean => {
+    return this.attachments.some((a) => a.uploading);
+  };
+
+  /**
+   * Add a file attachment from the user's computer.
+   * Returns the attachment with uploading=true; caller must update path after upload.
+   */
+  addUpload = (file: File, preview: string | null): Attachment => {
+    const att: Attachment = {
+      id: this.nextId(),
+      name: file.name,
+      path: '',
+      size: file.size,
+      mimeType: file.type || 'application/octet-stream',
+      source: 'upload',
+      preview,
+      uploading: true,
+    };
+    this.attachments = [...this.attachments, att];
+    return att;
+  };
+
+  /**
+   * Add a workspace file reference (no upload needed).
+   */
+  addWorkspaceFile = (path: string, name: string, size: number, mimeType: string): Attachment => {
+    const att: Attachment = {
+      id: this.nextId(),
+      name,
+      path,
+      size,
+      mimeType: mimeType || 'application/octet-stream',
+      source: 'workspace',
+      preview: null,
+      uploading: false,
+    };
+    this.attachments = [...this.attachments, att];
+    return att;
+  };
+
+  /**
+   * Mark an attachment as uploaded and set its workspace path.
+   */
+  markUploaded = (id: string, path: string): boolean => {
+    const idx = this.attachments.findIndex((a) => a.id === id);
+    if (idx === -1) return false;
+    this.attachments = this.attachments.map((a) =>
+      a.id === id ? { ...a, path, uploading: false } : a,
+    );
+    return true;
+  };
+
+  /**
+   * Mark an attachment upload as failed and remove it.
+   */
+  markUploadFailed = (id: string): boolean => {
+    return this.remove(id);
+  };
+
+  remove = (id: string): boolean => {
+    const len = this.attachments.length;
+    this.attachments = this.attachments.filter((a) => a.id !== id);
+    return this.attachments.length < len;
+  };
+
+  clear = (): void => {
+    this.attachments = [];
+  };
+
+  /**
+   * Get all attachment paths for inclusion in the CLI prompt.
+   * Only returns attachments that have been fully uploaded.
+   */
+  getReadyPaths = (): string[] => {
+    return this.attachments
+      .filter((a) => !a.uploading && a.path)
+      .map((a) => a.path);
+  };
+
+  /**
+   * Check if a MIME type is an image type.
+   */
+  static isImage = (mimeType: string): boolean => {
+    return IMAGE_MIME_TYPES.has(mimeType);
+  };
+
+  /**
+   * Format attachment references for inclusion in a CLI prompt message.
+   * Appends a section listing attached file paths.
+   */
+  static formatMessageWithAttachments = (message: string, paths: string[]): string => {
+    if (paths.length === 0) return message;
+
+    const fileList = paths.map((p) => `- ${p}`).join('\n');
+    return `${message}\n\nAttached files:\n${fileList}`;
+  };
+}