@assistkick/create 1.9.0 → 1.11.0

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

@@ -1,31 +1,39 @@
-import React from 'react';
 import { marked } from 'marked';
+import {
+  ArrowRight, ArrowLeft, FileText, FolderPlus, Trash2, Lightbulb,
+  GitBranch, Activity, ListTodo, AlignLeft, ClipboardCheck,
+  HelpCircle, CheckSquare, StickyNote,
+} from 'lucide-react';
 import { useSidePanelStore } from '../stores/useSidePanelStore';
 import { useGraphStore } from '../stores/useGraphStore';
 import { useGraphUIStore } from '../stores/useGraphUIStore';
-import { getTaskCssClass, getTaskIcon, getTaskIconClass, getTaskNameClass, shouldShowTaskList } from '../utils/task_status';
+import { shouldShowTaskList } from '../utils/task_status';
 import { SideSheet } from './ds/SideSheet';
+import { ContentCard } from './ds/ContentCard';
+import { AccentBorderList, AccentBorderItem } from './ds/AccentBorderList';
+import { CompletionRing } from './ds/CompletionRing';
+import { StatusDot } from './ds/StatusDot';
+import { TaskIcon } from './TaskIcon';
+
+const renderMarkdownSection = (md: string): string => {
+  try {
+    return marked.parse(md) as string;
+  } catch {
+    return md;
+  }
+};
 
 export function SidePanel() {
   const {
-    isOpen, node, content, workSummaries, expandedSummaries,
-    tasks, expandedTasks, close, toggleSummaries, toggleTasks,
+    isOpen, node, parsedContent, workSummaries,
+    tasks, close,
   } = useSidePanelStore();
   const graphData = useGraphStore((s) => s.graphData);
   const onEdgeClick = useGraphUIStore((s) => s.onEdgeClick);
 
-  const renderMarkdown = (md: string) => {
-    const stripped = md.replace(/^---[\s\S]*?---\n*/m, '');
-    try {
-      return marked.parse(stripped) as string;
-    } catch {
-      return stripped;
-    }
-  };
-
   const findEdges = (nodeId: string) => {
     if (!graphData) return [];
-    const edges: any[] = [];
+    const edges: { neighborId: string; relation: string; direction: string }[] = [];
     graphData.edges.forEach((e: any) => {
       if (e.from === nodeId) edges.push({ neighborId: e.to, relation: e.relation, direction: 'outgoing' });
       else if (e.to === nodeId) edges.push({ neighborId: e.from, relation: e.relation, direction: 'incoming' });
@@ -37,132 +45,219 @@ export function SidePanel() {
 
   if (!node) return (
     <SideSheet isOpen={isOpen} onClose={close} title="" zIndex={200}>
-      <div className="panel-body text-sm leading-relaxed" />
+      <div />
     </SideSheet>
   );
 
   const statusLabel = (node.status || 'draft').replace(/_/g, ' ');
-  const completeness = Math.round((node.completeness || 0) * 100);
+  const completeness = node.completeness || 0;
   const typeLabel = node.type ? node.type.replace(/_/g, ' ') : '';
   const edges = findEdges(node.id);
+  const isFeature = node.type === 'feature' || node.id?.startsWith('feat_');
 
   return (
     <SideSheet isOpen={isOpen} onClose={close} title={title} zIndex={200}>
-      <div className="panel-body text-sm leading-relaxed">
-        <div className="flex items-center gap-2 mb-3 pb-2.5 border-b border-edge flex-wrap">
-          <span className="text-[10px] text-content-muted uppercase tracking-wide bg-surface-raised px-2 py-0.5 rounded-sm">{typeLabel}</span>
-          <span className={`text-[10px] px-2 py-0.5 rounded-sm font-semibold capitalize panel-status-${node.status || 'draft'}`}>{statusLabel}</span>
-          <span className="text-[11px] text-content-secondary ml-auto">{completeness}% complete</span>
+      <div className="flex flex-col gap-3">
+        {/* Status card */}
+        <div className="flex items-center gap-3 rounded-xl border border-edge bg-surface-alt p-3">
+          <CompletionRing pct={completeness} />
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center gap-2">
+              <span className="rounded-md bg-surface-raised px-2 py-0.5 text-[11px] font-medium text-content-secondary capitalize">
+                {typeLabel}
+              </span>
+              <StatusDot status={node.status || 'draft'} />
+              <span className="text-[11px] text-content-secondary capitalize">
+                {statusLabel}
+              </span>
+            </div>
+          </div>
         </div>
+
+        {/* Tasks */}
         {shouldShowTaskList(tasks) && (
-          <div className="my-2 border border-edge rounded">
-            <button
-              className="bg-none border-none text-content font-mono text-xs cursor-pointer py-1.5 px-2 w-full text-left flex items-center gap-1.5 hover:text-content hover:bg-surface-raised"
-              onClick={toggleTasks}
-            >
-              <span className={`inline-block text-[9px] transition-transform duration-150${expandedTasks ? ' rotate-90' : ''}`}>{'\u25B6'}</span>
-              Tasks ({tasks!.completed}/{tasks!.total})
-            </button>
-            {expandedTasks && tasks!.items?.length > 0 && (
-              <div className="px-2 pt-1 pb-1.5 flex flex-col gap-[3px] border-t border-edge">
-                {tasks!.items.map((task: any, idx: number) => (
-                  <div key={idx} className={getTaskCssClass(task.status)}>
-                    <span className={`shrink-0 w-3 text-center text-[10px] ${getTaskIconClass(task.status)}`}>
-                      {getTaskIcon(task.status)}
-                    </span>
-                    <span className={getTaskNameClass(task.status)}>{task.name}</span>
-                  </div>
-                ))}
-              </div>
-            )}
-          </div>
+          <ContentCard
+            icon={<ListTodo size={13} />}
+            label="Tasks"
+            badge={
+              <span className="rounded-full bg-accent/15 px-2 py-0.5 text-[10px] font-semibold text-accent">
+                {tasks!.completed}/{tasks!.total}
+              </span>
+            }
+            defaultOpen
+          >
+            <div className="space-y-1.5">
+              {tasks!.items.map((task: any, idx: number) => (
+                <div key={idx} className="flex items-center gap-2">
+                  <TaskIcon status={task.status} />
+                  <span className={`text-[12px] ${task.status === 'completed' ? 'text-content-muted line-through' : 'text-content'}`}>
+                    {task.name}
+                  </span>
+                </div>
+              ))}
+            </div>
+          </ContentCard>
+        )}
+
+        {/* Description */}
+        {parsedContent?.description && (
+          <ContentCard icon={<AlignLeft size={13} />} label="Description" defaultOpen>
+            <div
+              className="text-[12px] leading-relaxed text-content-secondary [&_h1]:text-[15px] [&_h1]:mt-2 [&_h1]:mb-1.5 [&_h1]:text-content [&_h2]:text-[14px] [&_h2]:mt-2 [&_h2]:mb-1 [&_h2]:text-content [&_h3]:text-[13px] [&_h3]:mt-1.5 [&_h3]:mb-[3px] [&_h3]:text-content [&_p]:my-[3px] [&_ul]:pl-[18px] [&_ul]:my-[3px] [&_li]:my-px [&_code]:bg-surface-raised [&_code]:px-1 [&_code]:py-px [&_code]:rounded-[3px] [&_code]:text-[11px] [&_blockquote]:border-l-[3px] [&_blockquote]:border-edge [&_blockquote]:pl-2.5 [&_blockquote]:text-content-secondary [&_blockquote]:my-1.5 [&_strong]:text-content [&_pre]:bg-surface-raised [&_pre]:px-2.5 [&_pre]:py-2 [&_pre]:rounded [&_pre]:overflow-x-auto [&_pre]:text-[11px] [&_pre_code]:bg-transparent [&_pre_code]:p-0"
+              dangerouslySetInnerHTML={{ __html: renderMarkdownSection(parsedContent.description) }}
+            />
+          </ContentCard>
+        )}
+
+        {/* Acceptance Criteria */}
+        {parsedContent && parsedContent.acceptanceCriteria.length > 0 && (
+          <ContentCard
+            icon={<ClipboardCheck size={13} />}
+            label="Acceptance Criteria"
+            badge={<span className="text-[10px] text-content-muted">{parsedContent.acceptanceCriteria.length} criteria</span>}
+          >
+            <AccentBorderList>
+              {parsedContent.acceptanceCriteria.map((ac, i) => (
+                <AccentBorderItem key={i} color="accent" index={i + 1}>
+                  <p className="text-[12px] leading-[1.75] text-content-secondary">{ac}</p>
+                </AccentBorderItem>
+              ))}
+            </AccentBorderList>
+          </ContentCard>
         )}
-        <div dangerouslySetInnerHTML={{ __html: renderMarkdown(content) }} />
-        {workSummaries.length > 0 && (
-          <div className="mt-3 border-t border-edge pt-2">
-            <button
-              className="bg-none border-none text-content-secondary text-[13px] font-mono cursor-pointer py-1 w-full text-left hover:text-content"
-              onClick={toggleSummaries}
-            >
-              {expandedSummaries ? '\u25BC' : '\u25B6'} Work Summary ({workSummaries.length} cycle{workSummaries.length !== 1 ? 's' : ''})
-            </button>
-            {expandedSummaries && (
-              <div className="mt-2 text-xs text-content-secondary">
-                {workSummaries.map((ws, idx) => (
-                  <div key={idx} className="mb-3 pb-2 border-b border-edge last:border-b-0 last:mb-0">
-                    <div className="font-semibold font-mono text-content mb-1">Cycle {ws.cycle}</div>
-                    {ws.filesCreated?.length > 0 && (
-                      <div>
-                        <span className="font-semibold text-content-secondary font-mono text-[11px] uppercase tracking-wider" style={{ color: '#4caf50' }}>Created:</span>
-                        <ul>
-                          {ws.filesCreated.map((f, fi) => (
-                            <li key={fi}>{f}</li>
-                          ))}
-                        </ul>
-                      </div>
-                    )}
-                    {ws.filesUpdated?.length > 0 && (
-                      <div>
-                        <span className="font-semibold text-content-secondary font-mono text-[11px] uppercase tracking-wider" style={{ color: '#ff9800' }}>Updated:</span>
-                        <ul>
-                          {ws.filesUpdated.map((f, fi) => (
-                            <li key={fi}>{f}</li>
-                          ))}
-                        </ul>
-                      </div>
-                    )}
-                    {ws.filesDeleted?.length > 0 && (
-                      <div>
-                        <span className="font-semibold text-content-secondary font-mono text-[11px] uppercase tracking-wider" style={{ color: '#f44336' }}>Deleted:</span>
-                        <ul>
-                          {ws.filesDeleted.map((f, fi) => (
-                            <li key={fi}>{f}</li>
-                          ))}
-                        </ul>
-                      </div>
-                    )}
-                    {ws.approach && (
-                      <div>
-                        <span className="font-semibold text-content-secondary font-mono text-[11px] uppercase tracking-wider">Approach:</span>
-                        <p>{ws.approach}</p>
-                      </div>
-                    )}
-                    {ws.decisions?.length > 0 && (
-                      <div>
-                        <span className="font-semibold text-content-secondary font-mono text-[11px] uppercase tracking-wider">Decisions:</span>
-                        <ul>
-                          {ws.decisions.map((d, di) => (
-                            <li key={di}>{d}</li>
-                          ))}
-                        </ul>
-                      </div>
-                    )}
+
+        {/* Open Questions */}
+        {parsedContent && parsedContent.openQuestions.length > 0 && (
+          <ContentCard
+            icon={<HelpCircle size={13} />}
+            label="Open Questions"
+            badge={
+              <span className="rounded-full bg-accent-secondary/15 px-2 py-0.5 text-[10px] font-semibold text-accent-secondary">
+                {parsedContent.openQuestions.length}
+              </span>
+            }
+          >
+            <AccentBorderList>
+              {parsedContent.openQuestions.map((q, i) => (
+                <AccentBorderItem key={i} color="secondary" index={i + 1}>
+                  <p className="text-[12px] leading-[1.75] text-content">{q}</p>
+                </AccentBorderItem>
+              ))}
+            </AccentBorderList>
+          </ContentCard>
+        )}
+
+        {/* Resolved Questions */}
+        {parsedContent && parsedContent.resolvedQuestions.length > 0 && (
+          <ContentCard
+            icon={<CheckSquare size={13} />}
+            label="Resolved Questions"
+            badge={
+              <span className="rounded-full bg-accent/15 px-2 py-0.5 text-[10px] font-semibold text-accent">
+                {parsedContent.resolvedQuestions.length}
+              </span>
+            }
+          >
+            <AccentBorderList>
+              {parsedContent.resolvedQuestions.map((q, i) => (
+                <AccentBorderItem key={i} color="accent" index={i + 1}>
+                  <p className="text-[12px] leading-[1.75] text-content">{q.question}</p>
+                  {q.resolution && (
+                    <p className="text-[12px] leading-[1.75] text-content-secondary mt-1">{q.resolution}</p>
+                  )}
+                </AccentBorderItem>
+              ))}
+            </AccentBorderList>
+          </ContentCard>
+        )}
+
+        {/* Notes */}
+        {parsedContent?.notes && (
+          <ContentCard icon={<StickyNote size={13} />} label="Notes">
+            <div
+              className="text-[12px] leading-relaxed text-content-secondary [&_h1]:text-[15px] [&_h1]:mt-2 [&_h1]:mb-1.5 [&_h1]:text-content [&_h2]:text-[14px] [&_h2]:mt-2 [&_h2]:mb-1 [&_h2]:text-content [&_h3]:text-[13px] [&_h3]:mt-1.5 [&_h3]:mb-[3px] [&_h3]:text-content [&_p]:my-[3px] [&_ul]:pl-[18px] [&_ul]:my-[3px] [&_li]:my-px [&_code]:bg-surface-raised [&_code]:px-1 [&_code]:py-px [&_code]:rounded-[3px] [&_code]:text-[11px] [&_blockquote]:border-l-[3px] [&_blockquote]:border-edge [&_blockquote]:pl-2.5 [&_blockquote]:text-content-secondary [&_blockquote]:my-1.5 [&_strong]:text-content [&_pre]:bg-surface-raised [&_pre]:px-2.5 [&_pre]:py-2 [&_pre]:rounded [&_pre]:overflow-x-auto [&_pre]:text-[11px] [&_pre_code]:bg-transparent [&_pre_code]:p-0"
+              dangerouslySetInnerHTML={{ __html: renderMarkdownSection(parsedContent.notes) }}
+            />
+          </ContentCard>
+        )}
+
+        {/* Work Summary */}
+        {isFeature && workSummaries.length > 0 && (
+          <ContentCard
+            icon={<Activity size={13} />}
+            label="Work Summary"
+            badge={<span className="text-[10px] text-content-muted">{workSummaries.length} cycles</span>}
+          >
+            <AccentBorderList>
+              {workSummaries.map((ws, i) => (
+                <AccentBorderItem key={i} index={`Cycle ${ws.cycle}`}>
+                  {ws.approach && (
+                    <p className="text-[12px] leading-[1.75] text-content-secondary mt-1 mb-2">{ws.approach}</p>
+                  )}
+                  <div className="flex flex-wrap gap-1.5 mb-1.5">
+                    {ws.filesCreated?.map((f, fi) => (
+                      <span key={`c${fi}`} className="inline-flex items-center gap-1 rounded-md bg-accent/10 px-1.5 py-0.5 text-[10px] text-accent">
+                        <FolderPlus size={10} />{f.split('/').pop()}
+                      </span>
+                    ))}
+                    {ws.filesUpdated?.map((f, fi) => (
+                      <span key={`u${fi}`} className="inline-flex items-center gap-1 rounded-md bg-accent-secondary/10 px-1.5 py-0.5 text-[10px] text-accent-secondary">
+                        <FileText size={10} />{f.split('/').pop()}
+                      </span>
+                    ))}
+                    {ws.filesDeleted?.map((f, fi) => (
+                      <span key={`d${fi}`} className="inline-flex items-center gap-1 rounded-md bg-error/10 px-1.5 py-0.5 text-[10px] text-error">
+                        <Trash2 size={10} />{f.split('/').pop()}
+                      </span>
+                    ))}
                   </div>
-                ))}
-              </div>
-            )}
-          </div>
+                  {ws.decisions?.length > 0 && (
+                    <div className="space-y-1">
+                      {ws.decisions.map((d, di) => (
+                        <div key={di} className="flex items-start gap-1.5 text-[10px] text-content-muted">
+                          <Lightbulb size={10} className="mt-0.5 shrink-0 text-accent-secondary" />
+                          {d}
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </AccentBorderItem>
+              ))}
+            </AccentBorderList>
+          </ContentCard>
         )}
+
+        {/* Relationships */}
         {edges.length > 0 && (
-          <div className="mt-4 pt-3 border-t border-edge">
-            <h3 className="text-xs text-content mb-2 uppercase tracking-wide">Relationships</h3>
-            <ul className="list-none p-0 m-0 flex flex-col gap-1">
+          <div className="rounded-xl border border-edge bg-surface-alt p-3">
+            <div className="flex items-center gap-2 mb-2">
+              <GitBranch size={13} className="text-content-muted" />
+              <span className="text-[12px] font-medium text-content">Relationships</span>
+              <span className="text-[10px] text-content-muted">{edges.length}</span>
+            </div>
+            <div className="space-y-1.5">
               {edges.map((edge, i) => {
                 const neighborNode = graphData?.nodes.find((n: any) => n.id === edge.neighborId);
                 const name = neighborNode ? neighborNode.name : edge.neighborId;
-                const direction = edge.direction === 'outgoing' ? '\u2192' : '\u2190';
                 return (
-                  <li key={i} className="flex items-center gap-1.5 px-1.5 py-1 rounded-sm transition-background duration-150 hover:bg-surface-raised">
-                    <span className="text-[11px] text-content-muted w-3.5 text-center shrink-0">{direction}</span>
-                    <span className="text-[10px] text-content-muted min-w-20 shrink-0">{edge.relation.replace(/_/g, ' ')}</span>
-                    <a className="text-xs text-accent no-underline cursor-pointer flex-1 overflow-hidden text-ellipsis whitespace-nowrap hover:underline" href="#" onClick={(e) => { e.preventDefault(); onEdgeClick?.(edge.neighborId); }}>
+                  <div key={i} className="flex items-center gap-2 rounded-lg px-2 py-1.5 hover:bg-surface-raised/50 transition-colors group">
+                    {edge.direction === 'outgoing'
+                      ? <ArrowRight size={12} className="text-accent shrink-0" />
+                      : <ArrowLeft size={12} className="text-accent-secondary shrink-0" />}
+                    <span className="text-[11px] text-content-muted capitalize flex-shrink-0">
+                      {edge.relation.replace(/_/g, ' ')}
+                    </span>
+                    <a
+                      className="text-[12px] text-accent font-medium truncate group-hover:underline cursor-pointer"
+                      href="#"
+                      onClick={(e) => { e.preventDefault(); onEdgeClick?.(edge.neighborId); }}
+                    >
                       {name}
                     </a>
-                    <span className="text-[10px] text-content-muted shrink-0">{edge.neighborId}</span>
-                  </li>
+                  </div>
                 );
               })}
-            </ul>
+            </div>
           </div>
         )}
       </div>

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

@@ -0,0 +1,48 @@
+/**
+ * SystemPromptAccordion — displays the composed system prompt as a collapsible
+ * accordion at the top of the chat message area.
+ *
+ * Collapsed by default with a 'System Prompt' label.
+ * Expanding reveals the full read-only system prompt text.
+ * Scrolls with messages (not pinned).
+ *
+ * Follows the design system: surface-alt background, edge borders,
+ * content-secondary text, monospace font. Consistent with ToolUseCard.
+ */
+
+import { useState } from 'react';
+import { ChevronDown, ChevronRight, Terminal } from 'lucide-react';
+
+interface SystemPromptAccordionProps {
+  prompt: string;
+}
+
+export const SystemPromptAccordion = ({ prompt }: SystemPromptAccordionProps) => {
+  const [expanded, setExpanded] = useState(false);
+
+  return (
+    <div className="rounded-lg border border-edge bg-surface-alt overflow-hidden">
+      <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"
+      >
+        <Terminal size={13} className="text-content-muted shrink-0" />
+        <span className="text-[12px] font-mono text-content-secondary flex-1">
+          System Prompt
+        </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">
+          <pre className="text-[12px] font-mono text-content-secondary whitespace-pre-wrap break-words m-0 max-h-[400px] overflow-y-auto">
+            {prompt}
+          </pre>
+        </div>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,11 @@
+import { CheckCircle2, Circle, Loader2 } from 'lucide-react';
+
+interface TaskIconProps {
+  status: string;
+}
+
+export const TaskIcon = ({ status }: TaskIconProps) => {
+  if (status === 'completed') return <CheckCircle2 size={14} className="text-accent shrink-0" />;
+  if (status === 'in_progress') return <Loader2 size={14} className="text-accent-secondary shrink-0 animate-spin" />;
+  return <Circle size={14} className="text-content-muted shrink-0" />;
+};

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

@@ -16,7 +16,7 @@ import type { Project } from '../hooks/useProjects';
 import { useProjectStore } from '../stores/useProjectStore';
 import { Button } from './ds/Button';
 import { IconButton } from './ds/IconButton';
-import { X, Plus, RefreshCw } from 'lucide-react';
+import { X, RefreshCw, Sparkles, TerminalSquare } from 'lucide-react';
 
 interface TerminalViewProps {
   visible: boolean;
@@ -29,6 +29,7 @@ interface SessionInfo {
   name: string;
   projectId: string;
   projectName: string;
+  sessionType: 'claude' | 'terminal';
   state: 'suspended' | 'running';
   createdAt: string;
   lastUsedAt: string;
@@ -194,7 +195,7 @@ export function TerminalView({ visible, projects }: TerminalViewProps) {
     connectToSession(sessionId);
   }, [connectToSession]);
 
-  const handleCreateSession = useCallback(async () => {
+  const handleCreateSession = useCallback(async (sessionType: 'claude' | 'terminal') => {
     const projectId = selectedProjectId || projects[0]?.id;
     if (!projectId) return;
 
@@ -203,7 +204,7 @@ export function TerminalView({ visible, projects }: TerminalViewProps) {
 
     setCreating(true);
     try {
-      const data = await apiClient.createTerminalSession(project.id, project.name);
+      const data = await apiClient.createTerminalSession(project.id, project.name, sessionType);
       const newSession: SessionInfo = data.session;
       const updated = await fetchSessions();
       const created = updated.find(s => s.id === newSession.id) || newSession;
@@ -324,6 +325,11 @@ export function TerminalView({ visible, projects }: TerminalViewProps) {
                 {session.state === 'suspended' && (
                   <span className="shrink-0 text-[10px] leading-none text-content-muted opacity-70" title="Suspended — will resume on connect">&#x23F8;</span>
                 )}
+                {session.sessionType === 'terminal' ? (
+                  <TerminalSquare size={11} strokeWidth={2} className="shrink-0 text-content-muted" title="Plain shell" />
+                ) : (
+                  <Sparkles size={11} strokeWidth={2} className="shrink-0 text-accent" title="Claude session" />
+                )}
                 {session.name}
               </div>
               <div className="text-[11px] text-content-muted font-mono whitespace-nowrap overflow-hidden text-ellipsis pr-5 mt-0.5">{session.projectName}</div>
@@ -340,17 +346,27 @@ export function TerminalView({ visible, projects }: TerminalViewProps) {
           ))}
         </div>
 
-        {/* New session — uses the project selected in the navbar */}
-        <div className="flex flex-col gap-1.5 p-2.5 border-t border-edge shrink-0">
+        {/* New session buttons — uses the project selected in the navbar */}
+        <div className="flex flex-row gap-1.5 p-2.5 border-t border-edge shrink-0">
           <Button
             variant="primary"
             size="sm"
-            icon={!creating ? <Plus size={12} strokeWidth={2} /> : undefined}
-            className="w-full"
-            onClick={handleCreateSession}
+            icon={!creating ? <Sparkles size={12} strokeWidth={2} /> : undefined}
+            className="flex-1"
+            onClick={() => handleCreateSession('claude')}
+            disabled={creating || !selectedProjectId}
+          >
+            {creating ? '...' : 'Claude'}
+          </Button>
+          <Button
+            variant="secondary"
+            size="sm"
+            icon={!creating ? <TerminalSquare size={12} strokeWidth={2} /> : undefined}
+            className="flex-1"
+            onClick={() => handleCreateSession('terminal')}
             disabled={creating || !selectedProjectId}
           >
-            {creating ? '...' : 'New'}
+            {creating ? '...' : 'Terminal'}
           </Button>
         </div>
       </div>

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

@@ -0,0 +1,114 @@
+/**
+ * ToolDiffView — humanized side-by-side diff view for Edit and Write tool calls.
+ * Shows old_string vs new_string for Edit, or the full content for Write,
+ * rendered as syntax-highlighted, read-only code blocks.
+ */
+
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
+
+/** Map common file extensions to Prism language identifiers. */
+const extToLang: Record<string, string> = {
+  ts: 'typescript', tsx: 'tsx', js: 'javascript', jsx: 'jsx',
+  py: 'python', rb: 'ruby', rs: 'rust', go: 'go',
+  java: 'java', kt: 'kotlin', cs: 'csharp', cpp: 'cpp', c: 'c',
+  css: 'css', scss: 'scss', html: 'html', vue: 'html',
+  json: 'json', yaml: 'yaml', yml: 'yaml', toml: 'toml',
+  md: 'markdown', sql: 'sql', sh: 'bash', bash: 'bash', zsh: 'bash',
+  xml: 'xml', svg: 'xml', graphql: 'graphql', prisma: 'prisma',
+  dockerfile: 'docker',
+};
+
+const inferLang = (filePath: string): string => {
+  const name = filePath.split('/').pop() ?? '';
+  if (name.toLowerCase() === 'dockerfile') return 'docker';
+  const ext = name.split('.').pop()?.toLowerCase() ?? '';
+  return extToLang[ext] ?? 'text';
+};
+
+/** Shared customStyle for the syntax highlighter to blend with our theme. */
+const codeStyle: React.CSSProperties = {
+  margin: 0,
+  padding: '0.75rem',
+  fontSize: '12px',
+  lineHeight: '1.5',
+  background: 'transparent',
+  borderRadius: 0,
+};
+
+interface CodePanelProps {
+  label: string;
+  code: string;
+  language: string;
+  accent?: 'red' | 'green' | 'neutral';
+}
+
+const accentClasses: Record<string, string> = {
+  red: 'border-red-500/30 bg-red-500/5',
+  green: 'border-green-500/30 bg-green-500/5',
+  neutral: 'border-edge bg-surface-alt',
+};
+
+const labelClasses: Record<string, string> = {
+  red: 'text-red-400',
+  green: 'text-green-400',
+  neutral: 'text-content-muted',
+};
+
+const CodePanel = ({ label, code, language, accent = 'neutral' }: CodePanelProps) => (
+  <div className={`flex flex-col min-w-0 flex-1 border rounded-md overflow-hidden ${accentClasses[accent]}`}>
+    <div className={`text-[10px] font-mono uppercase tracking-wider px-3 py-1.5 border-b border-edge/50 ${labelClasses[accent]}`}>
+      {label}
+    </div>
+    <div className="overflow-auto max-h-[400px]">
+      <SyntaxHighlighter
+        language={language}
+        style={oneDark}
+        customStyle={codeStyle}
+        wrapLongLines
+      >
+        {code || '(empty)'}
+      </SyntaxHighlighter>
+    </div>
+  </div>
+);
+
+interface ToolDiffViewProps {
+  toolName: 'Edit' | 'Write';
+  input: Record<string, unknown>;
+}
+
+export const ToolDiffView = ({ toolName, input }: ToolDiffViewProps) => {
+  const filePath = (input.file_path as string) ?? '';
+  const language = inferLang(filePath);
+
+  if (toolName === 'Edit') {
+    const oldStr = (input.old_string as string) ?? '';
+    const newStr = (input.new_string as string) ?? '';
+
+    return (
+      <div className="flex flex-col gap-2">
+        <div className="text-[10px] font-mono text-content-muted truncate px-1">
+          {filePath}
+          {input.replace_all && <span className="ml-2 text-amber-400">(replace all)</span>}
+        </div>
+        <div className="flex gap-2 min-h-0">
+          <CodePanel label="Old" code={oldStr} language={language} accent="red" />
+          <CodePanel label="New" code={newStr} language={language} accent="green" />
+        </div>
+      </div>
+    );
+  }
+
+  // Write tool — single panel with content
+  const content = (input.content as string) ?? '';
+
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="text-[10px] font-mono text-content-muted truncate px-1">
+        {filePath}
+      </div>
+      <CodePanel label="Content" code={content} language={language} />
+    </div>
+  );
+};