@assistkick/create 1.9.0 → 1.11.0

package/templates/assistkick-product-system/packages/frontend/src/components/HighlightedText.tsx

@@ -0,0 +1,87 @@
+/**
+ * HighlightedText — splits text around case-insensitive search matches
+ * and wraps each match in a <mark> tag for visual highlighting.
+ *
+ * When searchQuery is empty or absent, renders children as-is.
+ */
+
+import type { ReactNode } from 'react';
+
+interface HighlightedTextProps {
+  text: string;
+  searchQuery: string;
+  /** Index of the currently focused match (0-based global index across all messages). -1 = none. */
+  activeMatchIndex?: number;
+  /** The starting global index offset for matches within this text. */
+  matchIndexOffset?: number;
+}
+
+export function HighlightedText({
+  text,
+  searchQuery,
+  activeMatchIndex = -1,
+  matchIndexOffset = 0,
+}: HighlightedTextProps) {
+  if (!searchQuery) return <>{text}</>;
+
+  const query = searchQuery.toLowerCase();
+  const parts: ReactNode[] = [];
+  let remaining = text;
+  let localIdx = 0;
+
+  while (remaining.length > 0) {
+    const lowerRemaining = remaining.toLowerCase();
+    const matchPos = lowerRemaining.indexOf(query);
+
+    if (matchPos === -1) {
+      parts.push(remaining);
+      break;
+    }
+
+    // Text before the match
+    if (matchPos > 0) {
+      parts.push(remaining.slice(0, matchPos));
+    }
+
+    const matchedText = remaining.slice(matchPos, matchPos + searchQuery.length);
+    const globalIdx = matchIndexOffset + localIdx;
+    const isActive = globalIdx === activeMatchIndex;
+
+    parts.push(
+      <mark
+        key={`${matchIndexOffset}-${localIdx}`}
+        className={
+          isActive
+            ? 'bg-accent text-surface rounded-sm px-[1px]'
+            : 'bg-accent/30 text-content rounded-sm px-[1px]'
+        }
+        data-search-match={globalIdx}
+      >
+        {matchedText}
+      </mark>,
+    );
+
+    remaining = remaining.slice(matchPos + searchQuery.length);
+    localIdx++;
+  }
+
+  return <>{parts}</>;
+}
+
+/**
+ * Count the number of case-insensitive occurrences of `query` in `text`.
+ */
+export function countMatches(text: string, query: string): number {
+  if (!query) return 0;
+  const lower = text.toLowerCase();
+  const q = query.toLowerCase();
+  let count = 0;
+  let pos = 0;
+  while (true) {
+    const idx = lower.indexOf(q, pos);
+    if (idx === -1) break;
+    count++;
+    pos = idx + q.length;
+  }
+  return count;
+}

package/templates/assistkick-product-system/packages/frontend/src/components/ImageLightbox.tsx

@@ -0,0 +1,192 @@
+/**
+ * ImageLightbox — fullscreen overlay for viewing chat images.
+ *
+ * Features:
+ * - Fullscreen dark backdrop with the image centered
+ * - Prev/next navigation when multiple images are present
+ * - Zoom via mouse wheel, pan by dragging when zoomed
+ * - Closes on Escape, clicking the backdrop, or the close button
+ * - Keyboard navigation: Arrow Left/Right for prev/next
+ */
+
+import { useState, useCallback, useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { X, ChevronLeft, ChevronRight } from 'lucide-react';
+
+export interface LightboxImage {
+  src: string;
+  alt: string;
+}
+
+interface ImageLightboxProps {
+  images: LightboxImage[];
+  initialIndex: number;
+  onClose: () => void;
+}
+
+const MIN_ZOOM = 1;
+const MAX_ZOOM = 5;
+const ZOOM_STEP = 0.3;
+
+export function ImageLightbox({ images, initialIndex, onClose }: ImageLightboxProps) {
+  const [currentIndex, setCurrentIndex] = useState(initialIndex);
+  const [zoom, setZoom] = useState(1);
+  const [pan, setPan] = useState({ x: 0, y: 0 });
+  const [dragging, setDragging] = useState(false);
+  const dragStart = useRef({ x: 0, y: 0 });
+  const panStart = useRef({ x: 0, y: 0 });
+
+  const hasMultiple = images.length > 1;
+
+  const resetTransform = useCallback(() => {
+    setZoom(1);
+    setPan({ x: 0, y: 0 });
+  }, []);
+
+  const goNext = useCallback(() => {
+    if (!hasMultiple) return;
+    resetTransform();
+    setCurrentIndex((prev) => (prev + 1) % images.length);
+  }, [hasMultiple, images.length, resetTransform]);
+
+  const goPrev = useCallback(() => {
+    if (!hasMultiple) return;
+    resetTransform();
+    setCurrentIndex((prev) => (prev - 1 + images.length) % images.length);
+  }, [hasMultiple, images.length, resetTransform]);
+
+  // Keyboard handling
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose();
+      } else if (e.key === 'ArrowRight') {
+        goNext();
+      } else if (e.key === 'ArrowLeft') {
+        goPrev();
+      }
+    };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, [onClose, goNext, goPrev]);
+
+  // Mouse wheel zoom
+  const handleWheel = useCallback((e: React.WheelEvent) => {
+    e.preventDefault();
+    setZoom((prev) => {
+      const next = prev + (e.deltaY < 0 ? ZOOM_STEP : -ZOOM_STEP);
+      const clamped = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, next));
+      if (clamped === 1) setPan({ x: 0, y: 0 });
+      return clamped;
+    });
+  }, []);
+
+  // Pan handling
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    if (zoom <= 1) return;
+    e.preventDefault();
+    setDragging(true);
+    dragStart.current = { x: e.clientX, y: e.clientY };
+    panStart.current = { ...pan };
+  }, [zoom, pan]);
+
+  const handleMouseMove = useCallback((e: React.MouseEvent) => {
+    if (!dragging) return;
+    setPan({
+      x: panStart.current.x + (e.clientX - dragStart.current.x),
+      y: panStart.current.y + (e.clientY - dragStart.current.y),
+    });
+  }, [dragging]);
+
+  const handleMouseUp = useCallback(() => {
+    setDragging(false);
+  }, []);
+
+  // Click on backdrop closes
+  const handleBackdropClick = useCallback((e: React.MouseEvent) => {
+    if (e.target === e.currentTarget) {
+      onClose();
+    }
+  }, [onClose]);
+
+  const current = images[currentIndex];
+  if (!current) return null;
+
+  const content = (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/90"
+      onClick={handleBackdropClick}
+      onMouseMove={handleMouseMove}
+      onMouseUp={handleMouseUp}
+      onMouseLeave={handleMouseUp}
+      role="dialog"
+      aria-label="Image lightbox"
+    >
+      {/* Close button */}
+      <button
+        type="button"
+        className="absolute top-4 right-4 z-10 p-2 rounded-full bg-black/50 hover:bg-black/70 text-white transition-colors cursor-pointer border-none"
+        onClick={onClose}
+        aria-label="Close lightbox"
+      >
+        <X size={20} />
+      </button>
+
+      {/* Image counter */}
+      {hasMultiple && (
+        <span className="absolute top-4 left-1/2 -translate-x-1/2 z-10 text-[13px] font-mono text-white/70 bg-black/50 px-3 py-1 rounded-full">
+          {currentIndex + 1} / {images.length}
+        </span>
+      )}
+
+      {/* Previous button */}
+      {hasMultiple && (
+        <button
+          type="button"
+          className="absolute left-4 top-1/2 -translate-y-1/2 z-10 p-2 rounded-full bg-black/50 hover:bg-black/70 text-white transition-colors cursor-pointer border-none"
+          onClick={goPrev}
+          aria-label="Previous image"
+        >
+          <ChevronLeft size={24} />
+        </button>
+      )}
+
+      {/* Next button */}
+      {hasMultiple && (
+        <button
+          type="button"
+          className="absolute right-4 top-1/2 -translate-y-1/2 z-10 p-2 rounded-full bg-black/50 hover:bg-black/70 text-white transition-colors cursor-pointer border-none"
+          onClick={goNext}
+          aria-label="Next image"
+        >
+          <ChevronRight size={24} />
+        </button>
+      )}
+
+      {/* Image */}
+      <div
+        className="max-w-[90vw] max-h-[90vh] overflow-hidden select-none"
+        onWheel={handleWheel}
+        onMouseDown={handleMouseDown}
+        style={{ cursor: zoom > 1 ? (dragging ? 'grabbing' : 'grab') : 'default' }}
+      >
+        <img
+          src={current.src}
+          alt={current.alt}
+          className="max-w-[90vw] max-h-[90vh] object-contain transition-transform duration-100"
+          style={{
+            transform: `scale(${zoom}) translate(${pan.x / zoom}px, ${pan.y / zoom}px)`,
+          }}
+          draggable={false}
+        />
+      </div>
+
+      {/* Image name */}
+      <span className="absolute bottom-4 left-1/2 -translate-x-1/2 z-10 text-[12px] font-mono text-white/60 bg-black/50 px-3 py-1 rounded-full max-w-[60vw] truncate">
+        {current.alt}
+      </span>
+    </div>
+  );
+
+  return createPortal(content, document.body);
+}

package/templates/assistkick-product-system/packages/frontend/src/components/KanbanView.tsx

@@ -225,11 +225,11 @@ export function KanbanView({ graphData, projectId, onCardClick, onIssuesClick }:
     setDraggedCard(featureId);
     e.dataTransfer.effectAllowed = 'move';
     e.dataTransfer.setData('text/plain', featureId);
-    (e.target as HTMLElement).classList.add('dragging');
+    (e.target as HTMLElement).classList.add('opacity-40');
   };
 
   const handleDragEnd = (e: React.DragEvent) => {
-    (e.target as HTMLElement).classList.remove('dragging');
+    (e.target as HTMLElement).classList.remove('opacity-40');
     setDraggedCard(null);
     setDragOverColumn(null);
   };

package/templates/assistkick-product-system/packages/frontend/src/components/MentionPill.tsx

@@ -0,0 +1,33 @@
+/**
+ * MentionPill — renders a detected @file or /skill mention as a removable pill.
+ * Shows an icon, the mention value, and an X button for removal.
+ */
+
+import { X, FileText, Terminal } from 'lucide-react';
+import type { Mention } from '../hooks/use_mention_autocomplete';
+
+interface MentionPillProps {
+  mention: Mention;
+  onRemove: (mention: Mention) => void;
+}
+
+export const MentionPill = ({ mention, onRemove }: MentionPillProps) => {
+  return (
+    <span className="inline-flex items-center gap-1 px-2 py-0.5 bg-accent/10 border border-accent/20 rounded text-[11px] font-mono text-accent">
+      {mention.type === 'file' ? (
+        <FileText size={10} className="shrink-0" />
+      ) : (
+        <Terminal size={10} className="shrink-0" />
+      )}
+      <span className="truncate max-w-[200px]">{mention.displayValue}</span>
+      <button
+        type="button"
+        className="ml-0.5 text-accent/60 hover:text-accent cursor-pointer bg-transparent border-none p-0 leading-none"
+        onClick={() => onRemove(mention)}
+        tabIndex={-1}
+      >
+        <X size={10} />
+      </button>
+    </span>
+  );
+};

package/templates/assistkick-product-system/packages/frontend/src/components/MermaidBlock.tsx

@@ -0,0 +1,148 @@
+/**
+ * MermaidBlock — renders a mermaid code block as an inline SVG diagram.
+ *
+ * Lazily loads the mermaid library on first render. Respects dark/light theme.
+ * Falls back to raw source with error indicator on syntax errors.
+ * Provides an enlarge button to open the diagram fullscreen.
+ */
+
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { Maximize2, AlertTriangle } from 'lucide-react';
+import { DiagramOverlay } from './DiagramOverlay';
+import { resolveMermaidTheme, getDesignSystemThemeVariables } from '../lib/mermaid_helpers';
+
+type MermaidApi = typeof import('mermaid').default;
+
+let mermaidInstance: MermaidApi | null = null;
+let mermaidLoadPromise: Promise<MermaidApi> | null = null;
+
+const loadMermaid = (): Promise<MermaidApi> => {
+  if (mermaidInstance) return Promise.resolve(mermaidInstance);
+  if (mermaidLoadPromise) return mermaidLoadPromise;
+
+  mermaidLoadPromise = import('mermaid').then((mod) => {
+    mermaidInstance = mod.default;
+    mermaidInstance.initialize({ startOnLoad: false, securityLevel: 'strict' });
+    return mermaidInstance;
+  });
+
+  return mermaidLoadPromise;
+};
+
+let renderCounter = 0;
+
+interface MermaidBlockProps {
+  code: string;
+}
+
+export const MermaidBlock = ({ code }: MermaidBlockProps) => {
+  const [svgHtml, setSvgHtml] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [overlayOpen, setOverlayOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const renderDiagram = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    setSvgHtml(null);
+
+    try {
+      const mermaid = await loadMermaid();
+      const theme = resolveMermaidTheme(document.documentElement.getAttribute('data-theme'));
+
+      mermaid.initialize({
+        startOnLoad: false,
+        securityLevel: 'strict',
+        theme,
+        themeVariables: getDesignSystemThemeVariables(),
+        flowchart: { padding: 16, nodeSpacing: 60, rankSpacing: 60 },
+      });
+
+      const id = `mermaid-${Date.now()}-${renderCounter++}`;
+      const { svg } = await mermaid.render(id, code.trim());
+      setSvgHtml(svg);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Failed to render diagram';
+      setError(message);
+    } finally {
+      setLoading(false);
+    }
+  }, [code]);
+
+  useEffect(() => {
+    renderDiagram();
+  }, [renderDiagram]);
+
+  // Re-render on theme change
+  useEffect(() => {
+    const observer = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        if (mutation.attributeName === 'data-theme') {
+          renderDiagram();
+          break;
+        }
+      }
+    });
+
+    observer.observe(document.documentElement, { attributes: true });
+    return () => observer.disconnect();
+  }, [renderDiagram]);
+
+  const openOverlay = useCallback(() => {
+    setOverlayOpen(true);
+  }, []);
+
+  const closeOverlay = useCallback(() => {
+    setOverlayOpen(false);
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-6 px-4 rounded-md bg-surface-raised text-content-secondary text-xs font-mono">
+        Rendering diagram…
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="rounded-md border border-edge overflow-hidden">
+        <div className="flex items-center gap-1.5 px-3 py-1.5 bg-surface-raised text-xs text-amber-400 border-b border-edge">
+          <AlertTriangle size={13} />
+          <span>Mermaid rendering error</span>
+        </div>
+        <pre className="bg-surface-raised py-2.5 px-3 overflow-x-auto text-xs leading-normal font-mono text-content m-0">
+          {code}
+        </pre>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <div
+        ref={containerRef}
+        className="mermaid-diagram relative group rounded-md border border-edge overflow-hidden bg-surface-raised"
+      >
+        <div
+          className="p-5 overflow-x-auto [&_svg]:max-w-full [&_svg]:h-auto"
+          dangerouslySetInnerHTML={{ __html: svgHtml! }}
+        />
+        <button
+          type="button"
+          onClick={openOverlay}
+          className="absolute top-2 right-2 p-1.5 rounded bg-surface/80 border border-edge text-content-secondary
+                     opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer hover:text-content hover:bg-surface"
+          aria-label="Enlarge diagram"
+        >
+          <Maximize2 size={14} />
+        </button>
+      </div>
+
+      {overlayOpen && svgHtml && (
+        <DiagramOverlay svgHtml={svgHtml} onClose={closeOverlay} />
+      )}
+    </>
+  );
+};

package/templates/assistkick-product-system/packages/frontend/src/components/PermissionDialog.tsx

@@ -0,0 +1,91 @@
+/**
+ * PermissionDialog — modal shown when Claude CLI requests permission to use a tool.
+ * Offers three choices: Allow once, Allow for this session, Allow always.
+ * Also offers a Deny option.
+ */
+
+import React, { useCallback } from 'react';
+
+export type PermissionDecision = 'allow_once' | 'allow_session' | 'allow_always' | 'deny';
+
+export interface PermissionRequestData {
+  requestId: string;
+  toolName: string;
+  input: Record<string, unknown>;
+}
+
+interface PermissionDialogProps {
+  request: PermissionRequestData | null;
+  onRespond: (requestId: string, decision: PermissionDecision) => void;
+}
+
+export function PermissionDialog({ request, onRespond }: PermissionDialogProps) {
+  const handleDecision = useCallback((decision: PermissionDecision) => {
+    if (!request) return;
+    onRespond(request.requestId, decision);
+  }, [request, onRespond]);
+
+  if (!request) return null;
+
+  const inputSummary = Object.keys(request.input).length > 0
+    ? JSON.stringify(request.input, null, 2)
+    : null;
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-[1000]">
+      <div
+        className="bg-surface border border-edge rounded-xl p-6 w-[480px] max-w-[90vw] shadow-[0_8px_32px_rgba(0,0,0,0.3)]"
+        onClick={e => e.stopPropagation()}
+      >
+        <div className="flex items-center gap-2 mb-4">
+          <div className="w-2 h-2 rounded-full bg-[#f5a623] animate-pulse" />
+          <h2 className="m-0 text-lg text-content font-mono">Permission Required</h2>
+        </div>
+
+        <p className="text-sm text-content-secondary mb-3 font-mono">
+          Claude wants to use the following tool:
+        </p>
+
+        <div className="bg-surface-raised border border-edge rounded-lg px-4 py-3 mb-4">
+          <div className="font-mono text-sm text-accent font-semibold">{request.toolName}</div>
+          {inputSummary && (
+            <pre className="mt-2 text-xs text-content-secondary font-mono whitespace-pre-wrap break-words max-h-[200px] overflow-y-auto m-0">
+              {inputSummary}
+            </pre>
+          )}
+        </div>
+
+        <div className="flex flex-col gap-2">
+          <button
+            className="w-full h-9 bg-transparent border border-accent rounded text-accent font-mono text-[13px] cursor-pointer transition-[background,color] duration-150 hover:bg-accent hover:text-white"
+            onClick={() => handleDecision('allow_once')}
+            type="button"
+          >
+            Allow once
+          </button>
+          <button
+            className="w-full h-9 bg-transparent border border-accent rounded text-accent font-mono text-[13px] cursor-pointer transition-[background,color] duration-150 hover:bg-accent hover:text-white"
+            onClick={() => handleDecision('allow_session')}
+            type="button"
+          >
+            Allow for this session
+          </button>
+          <button
+            className="w-full h-9 bg-transparent border border-accent rounded text-accent font-mono text-[13px] cursor-pointer transition-[background,color] duration-150 hover:bg-accent hover:text-white"
+            onClick={() => handleDecision('allow_always')}
+            type="button"
+          >
+            Allow always for this tool
+          </button>
+          <button
+            className="w-full h-9 bg-transparent border border-error rounded text-error font-mono text-[13px] cursor-pointer transition-[background,color] duration-150 hover:bg-error hover:text-white mt-1"
+            onClick={() => handleDecision('deny')}
+            type="button"
+          >
+            Deny
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}