@assistkick/create 1.10.0 → 1.12.0

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

@@ -0,0 +1,218 @@
+/**
+ * ChatSessionSidebar — session list for Chat v2, mirroring the terminal sidebar pattern.
+ * Displays all chat sessions for the current project, allows creating new sessions,
+ * renaming, and deleting existing ones.
+ */
+
+import React, { useEffect, useCallback, useState, useRef } from 'react';
+import { useChatSessionStore } from '../stores/useChatSessionStore';
+import type { ChatSession } from '../stores/useChatSessionStore';
+import { useProjectStore } from '../stores/useProjectStore';
+import { Button } from './ds/Button';
+import { IconButton } from './ds/IconButton';
+import { X, Plus, Pencil, Check } from 'lucide-react';
+
+interface ChatSessionSidebarProps {
+  visible: boolean;
+  onSelectSession: (session: ChatSession) => void;
+  onNewSessionCreated?: (session: ChatSession) => void;
+}
+
+export function ChatSessionSidebar({ visible, onSelectSession, onNewSessionCreated }: ChatSessionSidebarProps) {
+  const sessions = useChatSessionStore((s) => s.sessions);
+  const activeSessionId = useChatSessionStore((s) => s.activeSessionId);
+  const loading = useChatSessionStore((s) => s.loading);
+  const fetchSessions = useChatSessionStore((s) => s.fetchSessions);
+  const selectSession = useChatSessionStore((s) => s.selectSession);
+  const createSession = useChatSessionStore((s) => s.createSession);
+  const renameSession = useChatSessionStore((s) => s.renameSession);
+  const deleteSession = useChatSessionStore((s) => s.deleteSession);
+
+  const selectedProjectId = useProjectStore((s) => s.selectedProjectId);
+
+  const [creating, setCreating] = useState(false);
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [editName, setEditName] = useState('');
+  const editInputRef = useRef<HTMLInputElement>(null);
+
+  // Load sessions when visible and project changes
+  useEffect(() => {
+    if (visible && selectedProjectId) {
+      fetchSessions(selectedProjectId);
+    }
+  }, [visible, selectedProjectId, fetchSessions]);
+
+  // Focus the edit input when entering rename mode
+  useEffect(() => {
+    if (editingId && editInputRef.current) {
+      editInputRef.current.focus();
+      editInputRef.current.select();
+    }
+  }, [editingId]);
+
+  const handleSelectSession = useCallback(
+    (session: ChatSession) => {
+      selectSession(session.id);
+      onSelectSession(session);
+    },
+    [selectSession, onSelectSession],
+  );
+
+  const handleCreateSession = useCallback(async () => {
+    if (!selectedProjectId || creating) return;
+    setCreating(true);
+    try {
+      const session = await createSession(selectedProjectId);
+      if (onNewSessionCreated) {
+        onNewSessionCreated(session);
+      } else {
+        onSelectSession(session);
+      }
+    } catch {
+      // silently ignore
+    } finally {
+      setCreating(false);
+    }
+  }, [selectedProjectId, creating, createSession, onSelectSession, onNewSessionCreated]);
+
+  const handleDeleteSession = useCallback(
+    async (sessionId: string, e: React.MouseEvent) => {
+      e.stopPropagation();
+      if (!selectedProjectId) return;
+      try {
+        await deleteSession(sessionId, selectedProjectId);
+      } catch {
+        // silently ignore
+      }
+    },
+    [selectedProjectId, deleteSession],
+  );
+
+  const handleStartRename = useCallback(
+    (session: ChatSession, e: React.MouseEvent) => {
+      e.stopPropagation();
+      setEditingId(session.id);
+      setEditName(session.name);
+    },
+    [],
+  );
+
+  const handleConfirmRename = useCallback(
+    async (sessionId: string) => {
+      const trimmed = editName.trim();
+      if (trimmed) {
+        try {
+          await renameSession(sessionId, trimmed);
+        } catch {
+          // silently ignore
+        }
+      }
+      setEditingId(null);
+      setEditName('');
+    },
+    [editName, renameSession],
+  );
+
+  const handleRenameKeyDown = useCallback(
+    (sessionId: string, e: React.KeyboardEvent) => {
+      if (e.key === 'Enter') {
+        handleConfirmRename(sessionId);
+      } else if (e.key === 'Escape') {
+        setEditingId(null);
+        setEditName('');
+      }
+    },
+    [handleConfirmRename],
+  );
+
+  return (
+    <div className="flex flex-col w-[280px] min-w-[280px] border-r border-edge bg-surface-alt overflow-hidden">
+      <div className="px-3 py-2.5 text-[11px] font-mono uppercase tracking-widest text-content-muted border-b border-edge shrink-0">
+        Chat Sessions
+      </div>
+      <div className="flex-1 overflow-y-auto">
+        {!loading && sessions.length === 0 && (
+          <div className="px-3 py-4 text-xs text-content-muted font-mono">No sessions yet</div>
+        )}
+        {sessions.map((session) => (
+          <div
+            key={session.id}
+            className={`flex flex-col px-2.5 py-2 cursor-pointer border-b border-edge relative hover:bg-tab-hover${
+              session.id === activeSessionId
+                ? ' bg-tab-active border-l-2 border-l-accent pl-2'
+                : ''
+            }`}
+            onClick={() => handleSelectSession(session)}
+          >
+            {editingId === session.id ? (
+              <div className="flex items-center gap-1 pr-5">
+                <input
+                  ref={editInputRef}
+                  type="text"
+                  value={editName}
+                  onChange={(e) => setEditName(e.target.value)}
+                  onKeyDown={(e) => handleRenameKeyDown(session.id, e)}
+                  onBlur={() => handleConfirmRename(session.id)}
+                  className="flex-1 min-w-0 bg-surface border border-edge rounded px-1.5 py-0.5 text-xs font-mono text-content outline-none focus:border-accent"
+                  onClick={(e) => e.stopPropagation()}
+                />
+                <IconButton
+                  label="Confirm rename"
+                  variant="accent"
+                  size="sm"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleConfirmRename(session.id);
+                  }}
+                >
+                  <Check size={10} strokeWidth={2} />
+                </IconButton>
+              </div>
+            ) : (
+              <>
+                <div className="text-xs font-mono text-content whitespace-nowrap overflow-hidden text-ellipsis pr-12">
+                  {session.name}
+                </div>
+                <div className="text-[11px] text-content-muted font-mono whitespace-nowrap overflow-hidden text-ellipsis pr-12 mt-0.5">
+                  {new Date(session.updatedAt).toLocaleDateString()}
+                </div>
+                <div className="absolute top-2 right-2 flex items-center gap-0.5">
+                  <IconButton
+                    label="Rename session"
+                    variant="ghost"
+                    size="sm"
+                    onClick={(e) => handleStartRename(session, e)}
+                  >
+                    <Pencil size={10} strokeWidth={2} />
+                  </IconButton>
+                  <IconButton
+                    label="Delete session"
+                    variant="danger"
+                    size="sm"
+                    onClick={(e) => handleDeleteSession(session.id, e)}
+                  >
+                    <X size={10} strokeWidth={2} />
+                  </IconButton>
+                </div>
+              </>
+            )}
+          </div>
+        ))}
+      </div>
+
+      {/* New session button */}
+      <div className="flex flex-col 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}
+          disabled={creating || !selectedProjectId}
+        >
+          {creating ? '...' : 'New Chat'}
+        </Button>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,32 @@
+/**
+ * ChatStopButton — shown while Claude is actively streaming a response.
+ * Clicking it sends a stop_stream WebSocket message that kills the CLI subprocess.
+ * The partial response and triggering user message are discarded (handled by useChatStream).
+ */
+
+import { Square } from 'lucide-react';
+import { Button } from './ds/Button';
+
+interface ChatStopButtonProps {
+  /** Whether Claude is currently streaming a response */
+  streaming: boolean;
+  /** Callback to send the stop_stream message */
+  onStop: () => void;
+}
+
+export function ChatStopButton({ streaming, onStop }: ChatStopButtonProps) {
+  if (!streaming) return null;
+
+  return (
+    <Button
+      variant="danger"
+      size="sm"
+      icon={<Square size={10} strokeWidth={2.5} fill="currentColor" />}
+      onClick={onStop}
+      aria-label="Stop response"
+      title="Stop response — discards partial reply and restores your message"
+    >
+      Stop
+    </Button>
+  );
+}

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

@@ -0,0 +1,113 @@
+/**
+ * ChatTodoSidebar — displays the current task list extracted from
+ * TodoWrite tool_use blocks in the chat stream. Shown as a sidebar
+ * panel beside the chat messages area.
+ */
+
+import { useMemo } from 'react';
+import { CheckCircle2, Circle, Loader2 } from 'lucide-react';
+import type { ChatMessage } from '../hooks/use_chat_stream';
+
+interface TodoItem {
+  content: string;
+  status: 'pending' | 'in_progress' | 'completed';
+  activeForm: string;
+}
+
+interface ChatTodoSidebarProps {
+  messages: ChatMessage[];
+}
+
+/**
+ * Extract the latest TodoWrite list from the chat messages.
+ * Scans all assistant messages in reverse to find the most recent
+ * TodoWrite tool_use block with a valid todos array.
+ */
+const extractTodos = (messages: ChatMessage[]): TodoItem[] | null => {
+  for (let i = messages.length - 1; i >= 0; i--) {
+    const msg = messages[i];
+    if (msg.role !== 'assistant') continue;
+
+    // Scan content blocks in reverse within the message
+    for (let j = msg.content.length - 1; j >= 0; j--) {
+      const block = msg.content[j];
+      if (block.type === 'tool_use' && block.name === 'TodoWrite') {
+        const todos = block.input?.todos;
+        if (Array.isArray(todos) && todos.length > 0) {
+          return todos as TodoItem[];
+        }
+      }
+    }
+  }
+  return null;
+};
+
+const statusIcon = (status: TodoItem['status']) => {
+  switch (status) {
+    case 'completed':
+      return <CheckCircle2 size={14} className="text-green-400 shrink-0" />;
+    case 'in_progress':
+      return <Loader2 size={14} className="text-accent shrink-0 animate-spin" />;
+    case 'pending':
+    default:
+      return <Circle size={14} className="text-content-muted shrink-0" />;
+  }
+};
+
+export function ChatTodoSidebar({ messages }: ChatTodoSidebarProps) {
+  const todos = useMemo(() => extractTodos(messages), [messages]);
+
+  if (!todos || todos.length === 0) return null;
+
+  const completed = todos.filter(t => t.status === 'completed').length;
+  const total = todos.length;
+  const progressPct = total > 0 ? Math.round((completed / total) * 100) : 0;
+
+  return (
+    <div className="w-[280px] shrink-0 h-full flex flex-col border-l border-edge bg-surface overflow-hidden">
+      {/* Header */}
+      <div className="px-3 py-2 border-b border-edge shrink-0">
+        <div className="flex items-center justify-between">
+          <span className="text-[12px] font-mono font-medium text-content">Tasks</span>
+          <span className="text-[11px] font-mono text-content-muted">
+            {completed}/{total}
+          </span>
+        </div>
+        {/* Progress bar */}
+        <div className="mt-1.5 h-1 bg-edge rounded-full overflow-hidden">
+          <div
+            className="h-full bg-green-400 rounded-full transition-all duration-300"
+            style={{ width: `${progressPct}%` }}
+          />
+        </div>
+      </div>
+
+      {/* Todo list */}
+      <div className="flex-1 overflow-y-auto px-2 py-2 space-y-0.5">
+        {todos.map((todo, idx) => (
+          <div
+            key={idx}
+            className={`flex items-start gap-2 px-2 py-1.5 rounded-md transition-colors ${
+              todo.status === 'in_progress'
+                ? 'bg-accent/10'
+                : todo.status === 'completed'
+                  ? 'opacity-60'
+                  : ''
+            }`}
+          >
+            <div className="mt-0.5">{statusIcon(todo.status)}</div>
+            <span className={`text-[12px] font-mono leading-tight ${
+              todo.status === 'completed'
+                ? 'text-content-muted line-through'
+                : todo.status === 'in_progress'
+                  ? 'text-content'
+                  : 'text-content-secondary'
+            }`}>
+              {todo.status === 'in_progress' ? todo.activeForm : todo.content}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}