@assistkick/create 1.10.0 → 1.11.0

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

@@ -0,0 +1,229 @@
+/**
+ * PermissionModeSelector — UI control for selecting Chat v2 permission mode.
+ * Allows the user to choose between skip, allowed_tools, and prompt modes,
+ * and configure the allowed tools list when in allowed_tools mode.
+ */
+
+import React, { useState, useCallback, useRef, useEffect } from 'react';
+
+export type PermissionMode = 'skip' | 'allowed_tools';
+
+/** Known Claude Code built-in tools for autocomplete. */
+const KNOWN_TOOLS = [
+  'Bash',
+  'Read',
+  'Write',
+  'Edit',
+  'MultiEdit',
+  'Glob',
+  'Grep',
+  'LS',
+  'Agent',
+  'NotebookEdit',
+  'WebFetch',
+  'WebSearch',
+  'TodoRead',
+  'TodoWrite',
+];
+
+interface PermissionModeSelectorProps {
+  mode: PermissionMode;
+  allowedTools: string[];
+  onModeChange: (mode: PermissionMode) => void;
+  onAllowedToolsChange: (tools: string[]) => void;
+}
+
+const MODE_LABELS: Record<PermissionMode, { label: string; description: string }> = {
+  skip: {
+    label: 'Skip all permissions',
+    description: 'Claude can use any tool without asking',
+  },
+  allowed_tools: {
+    label: 'Selective auto-approve',
+    description: 'Only tools in the allowed list run without prompting',
+  },
+};
+
+export function PermissionModeSelector({
+  mode,
+  allowedTools,
+  onModeChange,
+  onAllowedToolsChange,
+}: PermissionModeSelectorProps) {
+  const [newTool, setNewTool] = useState('');
+  const [showSuggestions, setShowSuggestions] = useState(false);
+  const [highlightIdx, setHighlightIdx] = useState(-1);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const suggestionsRef = useRef<HTMLDivElement>(null);
+
+  const suggestions = KNOWN_TOOLS.filter(
+    (t) =>
+      !allowedTools.includes(t) &&
+      (newTool.trim() === '' || t.toLowerCase().includes(newTool.trim().toLowerCase()))
+  );
+
+  const handleAddTool = useCallback((toolName?: string) => {
+    const trimmed = (toolName ?? newTool).trim();
+    if (trimmed && !allowedTools.includes(trimmed)) {
+      onAllowedToolsChange([...allowedTools, trimmed]);
+      setNewTool('');
+      setShowSuggestions(false);
+      setHighlightIdx(-1);
+    }
+  }, [newTool, allowedTools, onAllowedToolsChange]);
+
+  const handleRemoveTool = useCallback((tool: string) => {
+    onAllowedToolsChange(allowedTools.filter(t => t !== tool));
+  }, [allowedTools, onAllowedToolsChange]);
+
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      if (highlightIdx >= 0 && highlightIdx < suggestions.length) {
+        handleAddTool(suggestions[highlightIdx]);
+      } else {
+        handleAddTool();
+      }
+    } else if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      setHighlightIdx((prev) => (prev < suggestions.length - 1 ? prev + 1 : 0));
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      setHighlightIdx((prev) => (prev > 0 ? prev - 1 : suggestions.length - 1));
+    } else if (e.key === 'Escape') {
+      setShowSuggestions(false);
+      setHighlightIdx(-1);
+    }
+  }, [handleAddTool, highlightIdx, suggestions]);
+
+  // Close suggestions on outside click
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (
+        suggestionsRef.current &&
+        !suggestionsRef.current.contains(e.target as Node) &&
+        inputRef.current &&
+        !inputRef.current.contains(e.target as Node)
+      ) {
+        setShowSuggestions(false);
+        setHighlightIdx(-1);
+      }
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, []);
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="font-mono text-[11px] font-semibold text-content-secondary uppercase tracking-wider">
+        Permission Mode
+      </div>
+
+      <div className="flex flex-col gap-1.5">
+        {(Object.keys(MODE_LABELS) as PermissionMode[]).map((m) => (
+          <label
+            key={m}
+            className={`flex items-start gap-2 px-3 py-2 rounded-lg cursor-pointer border transition-colors duration-150 ${
+              mode === m
+                ? 'border-accent bg-[rgba(var(--accent-rgb),0.05)]'
+                : 'border-transparent hover:bg-surface-raised'
+            }`}
+          >
+            <input
+              type="radio"
+              name="permissionMode"
+              value={m}
+              checked={mode === m}
+              onChange={() => onModeChange(m)}
+              className="mt-0.5 accent-accent"
+            />
+            <div className="flex flex-col">
+              <span className="font-mono text-[13px] text-content">{MODE_LABELS[m].label}</span>
+              <span className="font-mono text-[11px] text-content-secondary">{MODE_LABELS[m].description}</span>
+            </div>
+          </label>
+        ))}
+      </div>
+
+      {mode === 'allowed_tools' && (
+        <div className="flex flex-col gap-2 mt-1">
+          <div className="font-mono text-[11px] font-semibold text-content-secondary uppercase tracking-wider">
+            Allowed Tools
+          </div>
+
+          {allowedTools.length > 0 && (
+            <div className="flex flex-wrap gap-1.5">
+              {allowedTools.map(tool => (
+                <span
+                  key={tool}
+                  className="inline-flex items-center gap-1 px-2 py-1 bg-surface-raised border border-edge rounded text-xs font-mono text-content"
+                >
+                  {tool}
+                  <button
+                    className="bg-none border-none text-content-secondary cursor-pointer px-0.5 text-sm leading-none hover:text-error"
+                    onClick={() => handleRemoveTool(tool)}
+                    type="button"
+                  >
+                    &times;
+                  </button>
+                </span>
+              ))}
+            </div>
+          )}
+
+          <div className="relative flex gap-2">
+            <div className="relative flex-1">
+              <input
+                ref={inputRef}
+                className="w-full h-8 px-2.5 bg-surface-raised border border-edge rounded text-content font-mono text-[12px] outline-none transition-[border-color] duration-150 focus:border-accent placeholder:text-content-muted"
+                type="text"
+                value={newTool}
+                onChange={e => {
+                  setNewTool(e.target.value);
+                  setShowSuggestions(true);
+                  setHighlightIdx(-1);
+                }}
+                onFocus={() => setShowSuggestions(true)}
+                onKeyDown={handleKeyDown}
+                placeholder="Tool name (e.g. Read, Glob)"
+              />
+              {showSuggestions && suggestions.length > 0 && (
+                <div
+                  ref={suggestionsRef}
+                  className="absolute left-0 right-0 bottom-full mb-1 max-h-48 overflow-y-auto bg-surface-raised border border-edge rounded shadow-lg z-50"
+                >
+                  {suggestions.map((tool, i) => (
+                    <button
+                      key={tool}
+                      type="button"
+                      className={`w-full text-left px-2.5 py-1.5 font-mono text-[12px] cursor-pointer border-none ${
+                        i === highlightIdx
+                          ? 'bg-accent text-white'
+                          : 'bg-transparent text-content hover:bg-surface-alt'
+                      }`}
+                      onMouseDown={(e) => {
+                        e.preventDefault();
+                        handleAddTool(tool);
+                      }}
+                      onMouseEnter={() => setHighlightIdx(i)}
+                    >
+                      {tool}
+                    </button>
+                  ))}
+                </div>
+              )}
+            </div>
+            <button
+              className="h-8 px-3 bg-transparent border border-accent rounded text-accent font-mono text-[12px] cursor-pointer transition-[background,color] duration-150 hover:bg-accent hover:text-white disabled:opacity-60 disabled:cursor-not-allowed"
+              onClick={() => handleAddTool()}
+              disabled={!newTool.trim()}
+              type="button"
+            >
+              Add
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -1,5 +1,9 @@
 import React, { useState, useRef, useEffect } from 'react';
 import type { Project } from '../hooks/useProjects';
+import type { PreviewApp } from '../stores/usePreviewStore';
+import { toAppName } from '../utils/preview_utils';
+import { IconButton } from './ds/IconButton';
+import { Settings, Play, Square, ExternalLink, Pencil, X } from 'lucide-react';
 
 interface ProjectSelectorProps {
   projects: Project[];
@@ -7,25 +11,43 @@ interface ProjectSelectorProps {
   onSelect: (id: string) => void;
   onCreate: (name: string, type?: string) => Promise<any>;
   onRename: (id: string, name: string) => Promise<void>;
+  onUpdatePreviewCommand: (id: string, previewCommand: string | null) => Promise<void>;
   onArchive: (id: string) => Promise<void>;
-  onOpenGitModal?: (project: Project) => void;
+  previewApps: PreviewApp[];
+  onPreviewStart: (appName: string, projectId: string) => Promise<PreviewApp>;
+  onPreviewStop: (appName: string) => Promise<void>;
+  previewLoading: boolean;
 }
 
+type InlineEditMode = 'rename' | 'command';
+
 export function ProjectSelector({
-  projects, selectedProjectId, onSelect, onCreate, onRename, onArchive, onOpenGitModal,
+  projects, selectedProjectId, onSelect, onCreate, onRename, onUpdatePreviewCommand, onArchive,
+  previewApps, onPreviewStart, onPreviewStop, previewLoading,
 }: ProjectSelectorProps) {
   const [open, setOpen] = useState(false);
   const [creating, setCreating] = useState(false);
   const [newName, setNewName] = useState('');
   const [newType, setNewType] = useState<'software' | 'video'>('software');
-  const [renamingId, setRenamingId] = useState<string | null>(null);
-  const [renameValue, setRenameValue] = useState('');
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [editMode, setEditMode] = useState<InlineEditMode>('rename');
+  const [editValue, setEditValue] = useState('');
+  const [startingAppName, setStartingAppName] = useState<string | null>(null);
+  // When user clicks start but project has no command and no package.json fallback
+  const [promptCommandForId, setPromptCommandForId] = useState<string | null>(null);
   const dropdownRef = useRef<HTMLDivElement>(null);
   const createInputRef = useRef<HTMLInputElement>(null);
-  const renameInputRef = useRef<HTMLInputElement>(null);
+  const editInputRef = useRef<HTMLInputElement>(null);
 
   const selectedProject = projects.find(p => p.id === selectedProjectId);
 
+  // Build a lookup of running apps by appName
+  const runningApps = new Map(previewApps.map(a => [a.appName, a]));
+
+  // Check if the selected project has a running preview
+  const selectedAppName = selectedProject ? toAppName(selectedProject.name) : null;
+  const selectedIsRunning = selectedAppName ? runningApps.has(selectedAppName) : false;
+
   // Close dropdown on outside click
   useEffect(() => {
     if (!open) return;
@@ -33,7 +55,8 @@ export function ProjectSelector({
       if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
         setOpen(false);
         setCreating(false);
-        setRenamingId(null);
+        setEditingId(null);
+        setPromptCommandForId(null);
       }
     };
     document.addEventListener('mousedown', handler);
@@ -45,10 +68,10 @@ export function ProjectSelector({
     if (creating) createInputRef.current?.focus();
   }, [creating]);
 
-  // Focus rename input when shown
+  // Focus edit input when shown
   useEffect(() => {
-    if (renamingId) renameInputRef.current?.focus();
-  }, [renamingId]);
+    if (editingId || promptCommandForId) editInputRef.current?.focus();
+  }, [editingId, promptCommandForId]);
 
   const handleCreate = async () => {
     const trimmed = newName.trim();
@@ -64,16 +87,28 @@ export function ProjectSelector({
     }
   };
 
-  const handleRename = async () => {
-    const trimmed = renameValue.trim();
-    if (!trimmed || !renamingId) return;
+  const handleEditSave = async () => {
+    const trimmed = editValue.trim();
+    if (!editingId) return;
+
     try {
-      await onRename(renamingId, trimmed);
-      setRenamingId(null);
-      setRenameValue('');
+      if (editMode === 'rename') {
+        if (!trimmed) return;
+        await onRename(editingId, trimmed);
+      } else {
+        // command mode — empty string means clear
+        await onUpdatePreviewCommand(editingId, trimmed || null);
+      }
     } catch {
       // Error is handled by the caller
     }
+    setEditingId(null);
+    setEditValue('');
+  };
+
+  const handleEditCancel = () => {
+    setEditingId(null);
+    setEditValue('');
   };
 
   const handleArchive = async (id: string) => {
@@ -84,6 +119,81 @@ export function ProjectSelector({
     }
   };
 
+  const startRename = (e: React.MouseEvent, project: Project) => {
+    e.stopPropagation();
+    setEditingId(project.id);
+    setEditMode('rename');
+    setEditValue(project.name);
+    setPromptCommandForId(null);
+  };
+
+  const startCommandEdit = (e: React.MouseEvent, project: Project) => {
+    e.stopPropagation();
+    setEditingId(project.id);
+    setEditMode('command');
+    setEditValue(project.previewCommand || '');
+    setPromptCommandForId(null);
+  };
+
+  const handleCommandPromptSave = async () => {
+    if (!promptCommandForId) return;
+    const trimmed = editValue.trim();
+    if (!trimmed) return;
+
+    try {
+      await onUpdatePreviewCommand(promptCommandForId, trimmed);
+      // Now start the preview
+      const project = projects.find(p => p.id === promptCommandForId);
+      if (project) {
+        const appName = toAppName(project.name);
+        setStartingAppName(appName);
+        try {
+          await onPreviewStart(appName, project.id);
+          window.open(`/apps/${appName}/`, '_blank');
+        } finally {
+          setStartingAppName(null);
+        }
+      }
+    } catch {
+      // Error handled by caller
+    }
+    setPromptCommandForId(null);
+    setEditValue('');
+  };
+
+  const handlePreviewToggle = async (e: React.MouseEvent, project: Project) => {
+    e.stopPropagation();
+    const appName = toAppName(project.name);
+    const isRunning = runningApps.has(appName);
+
+    if (isRunning) {
+      await onPreviewStop(appName);
+    } else {
+      setStartingAppName(appName);
+      try {
+        // Attempt to start via backend — it will use previewCommand if set,
+        // otherwise auto-detect from package.json
+        await onPreviewStart(appName, project.id);
+        window.open(`/apps/${appName}/`, '_blank');
+      } catch (err: any) {
+        // If backend couldn't detect a start command, prompt the user to configure one
+        const message = err?.message || '';
+        if (message.includes('No dev server script found')) {
+          setPromptCommandForId(project.id);
+          setEditValue('');
+        }
+        // Other errors are handled by the caller
+      } finally {
+        setStartingAppName(null);
+      }
+    }
+  };
+
+  const handleOpenPreview = (e: React.MouseEvent, appName: string) => {
+    e.stopPropagation();
+    window.open(`/apps/${appName}/`, '_blank');
+  };
+
   return (
     <div className="relative" ref={dropdownRef}>
       <button
@@ -91,6 +201,9 @@ export function ProjectSelector({
         onClick={() => setOpen(v => !v)}
         title="Select project"
       >
+        {selectedIsRunning && (
+          <span className="shrink-0 w-2 h-2 rounded-full bg-emerald-500" title="Preview server running" />
+        )}
         <span className="overflow-hidden text-ellipsis whitespace-nowrap">
           {selectedProject?.name || 'No project'}
         </span>
@@ -98,80 +211,133 @@ export function ProjectSelector({
       </button>
 
       {open && (
-        <div className="absolute top-[calc(100%+4px)] left-0 min-w-[220px] max-w-[300px] bg-panel border border-edge rounded-md shadow-[0_4px_12px_var(--panel-shadow)] z-[200] overflow-hidden">
+        <div className="absolute top-[calc(100%+4px)] left-0 min-w-[280px] max-w-[360px] bg-panel border border-edge rounded-md shadow-[0_4px_12px_var(--panel-shadow)] z-[200] overflow-hidden">
           <div className="max-h-60 overflow-y-auto py-1">
-            {projects.map(project => (
-              <div
-                key={project.id}
-                className={`group flex items-center pr-1 hover:bg-tab-hover${project.id === selectedProjectId ? ' bg-tab-active' : ''}`}
-              >
-                {renamingId === project.id ? (
-                  <input
-                    ref={renameInputRef}
-                    className="flex-1 py-[5px] px-2 bg-surface border border-accent rounded-sm text-content font-mono text-xs outline-none mx-1 my-0.5"
-                    value={renameValue}
-                    onChange={e => setRenameValue(e.target.value)}
-                    onKeyDown={e => {
-                      if (e.key === 'Enter') handleRename();
-                      if (e.key === 'Escape') { setRenamingId(null); setRenameValue(''); }
-                    }}
-                    onBlur={handleRename}
-                  />
-                ) : (
-                  <>
-                    <button
-                      className="flex-1 flex items-center gap-1.5 text-left py-1.5 px-2 bg-none border-none text-content font-mono text-xs cursor-pointer overflow-hidden"
-                      onClick={() => { onSelect(project.id); setOpen(false); }}
-                    >
-                      <span className="overflow-hidden text-ellipsis whitespace-nowrap">{project.name}</span>
-                      {project.type === 'video' && (
-                        <span className="shrink-0 rounded-full bg-purple-500/15 px-1.5 py-0.5 text-[9px] font-bold text-purple-400">Video</span>
-                      )}
-                    </button>
-                    <div className="flex gap-0.5 opacity-0 transition-opacity duration-150 group-hover:opacity-100">
-                      {onOpenGitModal && (
-                        <button
-                          className={`bg-none border-none text-xs cursor-pointer px-1 py-0.5 rounded-sm transition-[color,background] duration-150 hover:text-content hover:bg-surface-raised ${project.repoUrl ? 'text-accent' : 'text-content-secondary'}`}
-                          title="Git Repository"
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            setOpen(false);
-                            onOpenGitModal(project);
-                          }}
-                        >
-                          <svg viewBox="0 0 16 16" width="14" height="14" fill="currentColor">
-                            <path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z" />
-                          </svg>
-                        </button>
-                      )}
-                      <button
-                        className="bg-none border-none text-content-muted text-xs cursor-pointer px-1 py-0.5 rounded-sm transition-[color,background] duration-150 hover:text-content hover:bg-surface-raised"
-                        title="Rename"
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          setRenamingId(project.id);
-                          setRenameValue(project.name);
+            {projects.map(project => {
+              const appName = toAppName(project.name);
+              const isRunning = runningApps.has(appName);
+              const isStarting = startingAppName === appName;
+              const isPromptingCommand = promptCommandForId === project.id;
+
+              return (
+                <div
+                  key={project.id}
+                  className={`group flex flex-col hover:bg-tab-hover${project.id === selectedProjectId ? ' bg-tab-active' : ''}`}
+                >
+                  {editingId === project.id ? (
+                    <div className="flex items-center px-1 py-0.5">
+                      <input
+                        ref={editInputRef}
+                        className="flex-1 py-[5px] px-2 bg-surface border border-accent rounded-sm text-content font-mono text-xs outline-none mx-1 my-0.5"
+                        placeholder={editMode === 'rename' ? 'Project name...' : 'e.g. npm run dev, node server.js'}
+                        value={editValue}
+                        onChange={e => setEditValue(e.target.value)}
+                        onKeyDown={e => {
+                          if (e.key === 'Enter') handleEditSave();
+                          if (e.key === 'Escape') handleEditCancel();
                         }}
-                      >
-                        &#9998;
-                      </button>
-                      {!project.isDefault && (
+                        onBlur={handleEditSave}
+                      />
+                    </div>
+                  ) : (
+                    <>
+                      <div className="flex items-center pr-1">
                         <button
-                          className="bg-none border-none text-content-muted text-xs cursor-pointer px-1 py-0.5 rounded-sm transition-[color,background] duration-150 hover:text-content hover:bg-surface-raised hover:!text-error"
-                          title="Archive"
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            handleArchive(project.id);
-                          }}
+                          className="flex-1 flex items-center gap-1.5 text-left py-1.5 px-2 bg-none border-none text-content font-mono text-xs cursor-pointer overflow-hidden"
+                          onClick={() => { onSelect(project.id); setOpen(false); }}
                         >
-                          &#10005;
+                          {isRunning && (
+                            <span className="shrink-0 w-1.5 h-1.5 rounded-full bg-emerald-500" />
+                          )}
+                          <span className="overflow-hidden text-ellipsis whitespace-nowrap">{project.name}</span>
+                          {project.type === 'video' && (
+                            <span className="shrink-0 rounded-full bg-purple-500/15 px-1.5 py-0.5 text-[9px] font-bold text-purple-400">Video</span>
+                          )}
                         </button>
+                        <div className="flex items-center gap-0.5 opacity-0 transition-opacity duration-150 group-hover:opacity-100">
+                          {/* Preview start/stop toggle */}
+                          <IconButton
+                            variant={isRunning ? 'accent' : 'ghost'}
+                            size="sm"
+                            label={isRunning ? 'Stop preview server' : 'Start preview server'}
+                            disabled={previewLoading || isStarting}
+                            onClick={(e) => handlePreviewToggle(e, project)}
+                          >
+                            {isStarting ? (
+                              <span className="inline-block w-3 h-3 border border-current border-t-transparent rounded-full animate-spin" />
+                            ) : isRunning ? (
+                              <Square className="w-3 h-3" />
+                            ) : (
+                              <Play className="w-3 h-3" />
+                            )}
+                          </IconButton>
+                          {/* Open Preview link for running servers */}
+                          {isRunning && (
+                            <IconButton
+                              variant="ghost"
+                              size="sm"
+                              label="Open preview in new tab"
+                              onClick={(e) => handleOpenPreview(e, appName)}
+                            >
+                              <ExternalLink className="w-3 h-3" />
+                            </IconButton>
+                          )}
+                          {/* Settings/gear icon — edit preview command */}
+                          <IconButton
+                            variant="ghost"
+                            size="sm"
+                            label="Configure preview command"
+                            onClick={(e) => startCommandEdit(e, project)}
+                          >
+                            <Settings className="w-3 h-3" />
+                          </IconButton>
+                          {/* Rename */}
+                          <IconButton
+                            variant="ghost"
+                            size="sm"
+                            label="Rename"
+                            onClick={(e) => startRename(e, project)}
+                          >
+                            <Pencil className="w-3 h-3" />
+                          </IconButton>
+                          {/* Archive */}
+                          {!project.isDefault && (
+                            <IconButton
+                              variant="danger"
+                              size="sm"
+                              label="Archive"
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                handleArchive(project.id);
+                              }}
+                            >
+                              <X className="w-3 h-3" />
+                            </IconButton>
+                          )}
+                        </div>
+                      </div>
+                      {/* Command prompt — shown when user tries to start without a configured command */}
+                      {isPromptingCommand && (
+                        <div className="flex items-center px-1 pb-1">
+                          <input
+                            ref={editInputRef}
+                            className="flex-1 py-[5px] px-2 bg-surface border border-accent rounded-sm text-content font-mono text-xs outline-none mx-1"
+                            placeholder="Start command (e.g. npm run dev)..."
+                            value={editValue}
+                            onChange={e => setEditValue(e.target.value)}
+                            onKeyDown={e => {
+                              if (e.key === 'Enter') handleCommandPromptSave();
+                              if (e.key === 'Escape') { setPromptCommandForId(null); setEditValue(''); }
+                            }}
+                            onBlur={() => { setPromptCommandForId(null); setEditValue(''); }}
+                          />
+                        </div>
                       )}
-                    </div>
-                  </>
-                )}
-              </div>
-            ))}
+                    </>
+                  )}
+                </div>
+              );
+            })}
           </div>
 
           <div className="border-t border-edge p-1">

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

@@ -0,0 +1,38 @@
+/**
+ * QueuedMessageBubble — displays a single queued user message with a
+ * pending/queued visual state and a remove button.
+ *
+ * Queued messages appear as user bubbles in the chat UI but with reduced
+ * opacity and a "queued" indicator to distinguish them from sent messages.
+ */
+
+interface Props {
+  id: string;
+  text: string;
+  onRemove: (id: string) => void;
+}
+
+export const QueuedMessageBubble = ({ id, text, onRemove }: Props) => {
+  return (
+    <div className="flex justify-end items-start gap-2 group opacity-60">
+      <div className="flex flex-col items-end gap-1 max-w-[80%]">
+        <div className="relative bg-accent/10 border border-accent/30 rounded-xl rounded-tr-sm px-4 py-2.5">
+          <pre className="m-0 text-[13px] font-mono text-content whitespace-pre-wrap break-words">
+            {text}
+          </pre>
+          <button
+            type="button"
+            onClick={() => onRemove(id)}
+            className="absolute -top-2 -right-2 w-5 h-5 rounded-full bg-surface border border-edge flex items-center justify-center text-content-secondary text-xs cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity duration-150 hover:bg-error hover:text-white hover:border-error"
+            aria-label="Remove queued message"
+          >
+            &times;
+          </button>
+        </div>
+        <span className="text-[10px] font-mono text-content-muted uppercase tracking-wider">
+          queued
+        </span>
+      </div>
+    </div>
+  );
+};