@assistkick/create 1.9.0 → 1.11.0

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

@@ -0,0 +1,87 @@
+/**
+ * ToolResultCard — displays a tool result as a collapsible accordion card
+ * in the chat stream. Collapsed by default, showing a brief summary.
+ * Expands to reveal the full tool output.
+ */
+
+import { useState } from 'react';
+import { ChevronDown, ChevronRight } from 'lucide-react';
+import type { ToolResultBlock } from '../hooks/use_chat_stream';
+
+interface ToolResultCardProps {
+  result: ToolResultBlock;
+  /** Tool name for display context (e.g. "Read", "Bash") */
+  toolName?: string;
+}
+
+/** Normalize content to a string — handles string, array-of-blocks, or other shapes. */
+const contentToString = (content: ToolResultBlock['content']): string => {
+  if (!content) return '';
+  if (typeof content === 'string') return content;
+  if (Array.isArray(content)) {
+    return (content as Array<Record<string, unknown>>)
+      .filter(c => typeof c.text === 'string')
+      .map(c => c.text as string)
+      .join('\n');
+  }
+  return String(content);
+};
+
+/** Generate a brief summary of the result for the collapsed view. */
+const summarizeResult = (result: ToolResultBlock, toolName?: string): string => {
+  const prefix = result.isError ? '✗ Error' : '✓ Result';
+  const label = toolName ? `${prefix} from ${toolName}` : prefix;
+
+  const text = contentToString(result.content);
+  if (!text) return `${label}: (empty)`;
+
+  // Show first meaningful line, truncated
+  const firstLine = text.split('\n').find(l => l.trim()) ?? '';
+  const MAX = 100;
+  const preview = firstLine.length > MAX ? `${firstLine.slice(0, MAX)}…` : firstLine;
+  return preview ? `${label}: ${preview}` : label;
+};
+
+export const ToolResultCard = ({ result, toolName }: ToolResultCardProps) => {
+  const [expanded, setExpanded] = useState(false);
+  const summary = summarizeResult(result, toolName);
+
+  return (
+    <div className="rounded-lg border border-edge bg-surface-alt overflow-hidden my-1">
+      <button
+        type="button"
+        onClick={() => setExpanded(prev => !prev)}
+        className="flex w-full items-center gap-2 px-3 py-2 text-left hover:bg-surface-raised/50 transition-colors cursor-pointer"
+      >
+        <span className="shrink-0 text-sm" aria-hidden="true">
+          {result.isError ? '❌' : '📤'}
+        </span>
+        <span
+          className={`text-[12px] font-mono flex-1 truncate ${
+            result.isError ? 'text-error' : 'text-content-secondary'
+          }`}
+        >
+          {summary}
+        </span>
+        {expanded
+          ? <ChevronDown size={13} className="text-content-muted shrink-0" />
+          : <ChevronRight size={13} className="text-content-muted shrink-0" />}
+      </button>
+
+      {expanded && (
+        <div className="border-t border-edge px-3 py-2">
+          <div className="text-[10px] font-mono text-content-muted uppercase tracking-wider mb-1">
+            {result.isError ? 'Error' : 'Output'}
+          </div>
+          <pre
+            className={`text-[12px] font-mono whitespace-pre-wrap break-words m-0 max-h-[400px] overflow-y-auto ${
+              result.isError ? 'text-error' : 'text-content-secondary'
+            }`}
+          >
+            {contentToString(result.content) || '(empty)'}
+          </pre>
+        </div>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,149 @@
+/**
+ * ToolUseCard — displays a Claude tool invocation as a collapsible card
+ * in the chat stream. Shows tool name and a brief summary when collapsed;
+ * expands to reveal the full tool input.
+ *
+ * Follows the design system: surface-alt background, edge borders,
+ * content-secondary text, monospace font at 13px.
+ */
+
+import { useState } from 'react';
+import { ChevronDown, ChevronRight } from 'lucide-react';
+import { summarizeToolUse, toolIcon } from '../lib/tool_use_summary';
+import { ToolDiffView } from './ToolDiffView';
+import type { ToolResultBlock } from '../hooks/use_chat_stream';
+
+interface ToolUseCardProps {
+  name: string;
+  input: Record<string, unknown>;
+  isStreaming?: boolean;
+  result?: ToolResultBlock;
+}
+
+/**
+ * Format tool input as indented JSON for the expanded view.
+ * Omits very large string values (e.g. file contents) to keep the card readable.
+ */
+const formatInput = (input: Record<string, unknown>): string => {
+  const MAX_STRING_LEN = 500;
+
+  const replacer = (_key: string, value: unknown): unknown => {
+    if (typeof value === 'string' && value.length > MAX_STRING_LEN) {
+      return `${value.slice(0, MAX_STRING_LEN)}… (${value.length} chars)`;
+    }
+    return value;
+  };
+
+  return JSON.stringify(input, replacer, 2);
+};
+
+/** Normalize result content to a string — handles string, array-of-blocks, or other shapes. */
+const contentToString = (content: ToolResultBlock['content']): string => {
+  if (!content) return '';
+  if (typeof content === 'string') return content;
+  if (Array.isArray(content)) {
+    return (content as Array<Record<string, unknown>>)
+      .filter(c => typeof c.text === 'string')
+      .map(c => c.text as string)
+      .join('\n');
+  }
+  return String(content);
+};
+
+type ViewTab = 'humanized' | 'raw';
+
+const hasHumanizedView = (name: string): boolean => name === 'Edit' || name === 'Write';
+
+export const ToolUseCard = ({ name, input, isStreaming, result }: ToolUseCardProps) => {
+  const [expanded, setExpanded] = useState(false);
+  const [viewTab, setViewTab] = useState<ViewTab>('humanized');
+  const summary = summarizeToolUse(name, input);
+  const icon = toolIcon(name);
+
+  // Build collapsed summary: include result status indicator
+  const resultIcon = result
+    ? result.isError ? '✗' : '✓'
+    : null;
+
+  return (
+    <div className="rounded-lg border border-edge bg-surface-alt overflow-hidden my-1">
+      <button
+        type="button"
+        onClick={() => setExpanded(prev => !prev)}
+        className="flex w-full items-center gap-2 px-3 py-2 text-left hover:bg-surface-raised/50 transition-colors cursor-pointer"
+      >
+        <span className="shrink-0 text-sm" aria-hidden="true">{icon}</span>
+        <span className="text-[12px] font-mono text-content-secondary flex-1 truncate">
+          {resultIcon && (
+            <span className={`mr-1.5 ${result?.isError ? 'text-error' : 'text-green-400'}`}>
+              {resultIcon}
+            </span>
+          )}
+          {summary}
+        </span>
+        {isStreaming && (
+          <span className="shrink-0 w-1.5 h-1.5 rounded-full bg-accent animate-pulse" />
+        )}
+        {expanded
+          ? <ChevronDown size={13} className="text-content-muted shrink-0" />
+          : <ChevronRight size={13} className="text-content-muted shrink-0" />}
+      </button>
+
+      {expanded && (
+        <div className="border-t border-edge">
+          {/* Tab bar for Edit/Write tools */}
+          {hasHumanizedView(name) && (
+            <div className="flex gap-0 border-b border-edge">
+              {(['humanized', 'raw'] as const).map(tab => (
+                <button
+                  key={tab}
+                  type="button"
+                  onClick={() => setViewTab(tab)}
+                  className={`px-3 py-1.5 text-[11px] font-mono uppercase tracking-wider transition-colors cursor-pointer ${
+                    viewTab === tab
+                      ? 'text-accent border-b-2 border-accent -mb-px'
+                      : 'text-content-muted hover:text-content-secondary'
+                  }`}
+                >
+                  {tab === 'humanized' ? 'Humanized' : 'Raw'}
+                </button>
+              ))}
+            </div>
+          )}
+
+          {/* Tool input — humanized or raw */}
+          {hasHumanizedView(name) && viewTab === 'humanized' ? (
+            <div className="px-3 py-2">
+              <ToolDiffView toolName={name as 'Edit' | 'Write'} input={input} />
+            </div>
+          ) : (
+            <div className="px-3 py-2">
+              <div className="text-[10px] font-mono text-content-muted uppercase tracking-wider mb-1">
+                Input
+              </div>
+              <pre className="text-[12px] font-mono text-content-secondary whitespace-pre-wrap break-words m-0 max-h-[300px] overflow-y-auto">
+                {formatInput(input)}
+              </pre>
+            </div>
+          )}
+
+          {/* Tool output — shown inline when result is available */}
+          {result && (
+            <div className="border-t border-edge px-3 py-2">
+              <div className="text-[10px] font-mono text-content-muted uppercase tracking-wider mb-1">
+                {result.isError ? 'Error' : 'Output'}
+              </div>
+              <pre
+                className={`text-[12px] font-mono whitespace-pre-wrap break-words m-0 max-h-[400px] overflow-y-auto ${
+                  result.isError ? 'text-error' : 'text-content-secondary'
+                }`}
+              >
+                {contentToString(result.content) || '(empty)'}
+              </pre>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};

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

@@ -1,21 +1,21 @@
 import React, { useCallback, useEffect } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import {
-  Columns3, MessageSquare, Network, ShieldCheck, Palette, Users, Bot, Workflow,
-  FolderOpen, Maximize, Settings, Sun, Moon, Video,
+  Columns3, MessageSquare, MessagesSquare, Network, ShieldCheck, Palette, Users, Bot, Workflow,
+  FolderOpen, Maximize, Settings, Sun, Moon, Video, Terminal,
 } from 'lucide-react';
 import { NavBarSidekick } from './ds/NavBarSidekick';
 import type { NavItem } from './ds/NavBarSidekick';
 import { ProjectSelector } from './ProjectSelector';
 import { useProjectStore } from '../stores/useProjectStore';
+import { usePreviewStore } from '../stores/usePreviewStore';
 import { useGraphStore } from '../stores/useGraphStore';
 import { useGraphUIStore } from '../stores/useGraphUIStore';
-import { useGitModalStore } from '../stores/useGitModalStore';
 import { useTheme } from '../hooks/useTheme';
 import { useAuth } from '../hooks/useAuth';
 import { apiClient } from '../api/client';
 
-const VALID_TABS = new Set(['graph', 'kanban', 'coherence', 'users', 'terminal', 'agents', 'workflows', 'design-system', 'files', 'videography']);
+const VALID_TABS = new Set(['graph', 'kanban', 'coherence', 'users', 'terminal', 'chat', 'agents', 'workflows', 'design-system', 'files', 'videography']);
 
 function tabFromPath(pathname: string): string {
   const seg = pathname.replace(/^\//, '');
@@ -26,7 +26,8 @@ const ICON_PROPS = { size: 14, strokeWidth: 2 } as const;
 
 const TAB_ITEMS: NavItem[] = [
   { id: 'kanban', label: 'Kanban', icon: <Columns3 {...ICON_PROPS} />, description: 'Board view of features', href: '/kanban' },
-  { id: 'terminal', label: 'Chat', icon: <MessageSquare {...ICON_PROPS} />, description: 'AI assistant terminal', href: '/terminal' },
+  { id: 'terminal', label: 'Terminal', icon: <Terminal {...ICON_PROPS} />, description: 'AI assistant terminal', href: '/terminal' },
+  { id: 'chat', label: 'Chat', icon: <MessagesSquare {...ICON_PROPS} />, description: 'Chat v2 web interface', href: '/chat' },
   { id: 'graph', label: 'Graph', icon: <Network {...ICON_PROPS} />, description: 'Knowledge graph visualization', href: '/graph' },
   { id: 'coherence', label: 'Coherence', icon: <ShieldCheck {...ICON_PROPS} />, description: 'Coherence analysis', href: '/coherence' },
   { id: 'agents', label: 'Agents', icon: <Bot {...ICON_PROPS} />, description: 'Manage agent prompts', href: '/agents' },
@@ -60,15 +61,27 @@ export function Toolbar() {
   const selectProject = useProjectStore((s) => s.selectProject);
   const createProject = useProjectStore((s) => s.createProject);
   const renameProject = useProjectStore((s) => s.renameProject);
+  const updatePreviewCommand = useProjectStore((s) => s.updatePreviewCommand);
   const archiveProject = useProjectStore((s) => s.archiveProject);
 
+  const previewApps = usePreviewStore((s) => s.apps);
+  const previewLoading = usePreviewStore((s) => s.loading);
+  const startPreview = usePreviewStore((s) => s.startPreview);
+  const stopPreview = usePreviewStore((s) => s.stopPreview);
+  const startPolling = usePreviewStore((s) => s.startPolling);
+  const stopPolling = usePreviewStore((s) => s.stopPolling);
+
+  // Start polling preview status on mount, stop on unmount
+  useEffect(() => {
+    startPolling();
+    return () => stopPolling();
+  }, [startPolling, stopPolling]);
+
   const graphData = useGraphStore((s) => s.graphData);
   const onFit = useGraphUIStore((s) => s.onFit);
   const settingsOpen = useGraphUIStore((s) => s.settingsOpen);
   const onSettingsToggle = useGraphUIStore((s) => s.onSettingsToggle);
 
-  const openGitModal = useGitModalStore((s) => s.open);
-
   const completeness = graphData
     ? Math.round((graphData.nodes.reduce((acc: number, n: any) => acc + (n.completeness || 0), 0) / Math.max(graphData.nodes.length, 1)) * 100)
     : 0;
@@ -117,8 +130,12 @@ export function Toolbar() {
             onSelect={selectProject}
             onCreate={createProject}
             onRename={renameProject}
+            onUpdatePreviewCommand={updatePreviewCommand}
             onArchive={archiveProject}
-            onOpenGitModal={openGitModal}
+            previewApps={previewApps}
+            onPreviewStart={startPreview}
+            onPreviewStop={stopPreview}
+            previewLoading={previewLoading}
           />
         }
         center={