@assistkick/create 1.9.0 → 1.11.0

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

@@ -7,18 +7,33 @@ import React, { useState, useEffect, useCallback } from 'react';
 import { apiClient } from '../api/client';
 import { useProjectStore } from '../stores/useProjectStore';
 import { Button } from './ds/Button';
-import { Plus, RotateCcw, Trash2, Save, ChevronDown } from 'lucide-react';
+import { Plus, RotateCcw, Trash2, Save, ChevronDown, X } from 'lucide-react';
 
 interface Agent {
   id: string;
   name: string;
-  promptTemplate: string;
+  model: string;
+  skills: string;
+  grounding: string;
+  defaultGrounding: string | null;
   projectId: string | null;
   isDefault: number;
   createdAt: string;
   updatedAt: string;
 }
 
+interface AvailableSkill {
+  id: string;
+  name: string;
+  preview: string;
+}
+
+const AVAILABLE_MODELS = [
+  { value: 'claude-opus-4-6', label: 'Claude Opus 4.6' },
+  { value: 'claude-sonnet-4-6', label: 'Claude Sonnet 4.6' },
+  { value: 'claude-haiku-4-5-20251001', label: 'Claude Haiku 4.5' },
+];
+
 const PLACEHOLDER_DOCS = [
   { name: '{{featureId}}', description: 'The feature ID being worked on', stages: 'All' },
   { name: '{{projectId}}', description: 'The current project ID', stages: 'All' },
@@ -40,7 +55,11 @@ export function AgentsView() {
   const [agents, setAgents] = useState<Agent[]>([]);
   const [selectedAgent, setSelectedAgent] = useState<Agent | null>(null);
   const [editName, setEditName] = useState('');
-  const [editPrompt, setEditPrompt] = useState('');
+  const [editModel, setEditModel] = useState('claude-opus-4-6');
+  const [editSkills, setEditSkills] = useState<string[]>([]);
+  const [editGrounding, setEditGrounding] = useState('');
+  const [availableSkills, setAvailableSkills] = useState<AvailableSkill[]>([]);
+  const [skillPickerOpen, setSkillPickerOpen] = useState(false);
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
   const [error, setError] = useState('');
@@ -60,14 +79,36 @@ export function AgentsView() {
     }
   }, [scope, projectId]);
 
+  const fetchSkills = useCallback(async () => {
+    try {
+      const resp = await apiClient.fetchAvailableSkills();
+      setAvailableSkills(resp.skills);
+    } catch {
+      // Skills list is non-critical; silently fall back to empty
+    }
+  }, []);
+
   useEffect(() => {
     fetchData();
   }, [fetchData]);
 
+  useEffect(() => {
+    fetchSkills();
+  }, [fetchSkills]);
+
   useEffect(() => {
     if (selectedProjectId) setProjectId(selectedProjectId);
   }, [selectedProjectId]);
 
+  const parseSkills = (skillsJson: string): string[] => {
+    try {
+      const parsed = JSON.parse(skillsJson);
+      return Array.isArray(parsed) ? parsed : [];
+    } catch {
+      return [];
+    }
+  };
+
   const showSuccess = (msg: string) => {
     setSuccessMsg(msg);
     setTimeout(() => setSuccessMsg(''), 3000);
@@ -76,15 +117,20 @@ export function AgentsView() {
   const selectAgent = (agent: Agent) => {
     setSelectedAgent(agent);
     setEditName(agent.name);
-    setEditPrompt(agent.promptTemplate);
+    setEditModel(agent.model);
+    setEditSkills(parseSkills(agent.skills));
+    setEditGrounding(agent.grounding);
     setError('');
+    setSkillPickerOpen(false);
   };
 
   const handleCreate = async () => {
     try {
       const data: any = {
         name: 'New Agent',
-        promptTemplate: 'You are a helpful agent.\n\nFeature: {{featureId}}\nProject: {{projectId}}',
+        model: 'claude-opus-4-6',
+        skills: '[]',
+        grounding: 'You are a helpful agent.\n\nFeature: {{featureId}}\nProject: {{projectId}}',
       };
       if (scope === 'project' && projectId) data.projectId = projectId;
       const resp = await apiClient.createAgent(data);
@@ -96,14 +142,27 @@ export function AgentsView() {
     }
   };
 
+  const validateForm = (): string | null => {
+    if (!editModel) return 'Model is required';
+    if (!editGrounding.trim()) return 'Grounding template cannot be empty';
+    return null;
+  };
+
   const handleSave = async () => {
     if (!selectedAgent) return;
+    const validationError = validateForm();
+    if (validationError) {
+      setError(validationError);
+      return;
+    }
     setSaving(true);
     setError('');
     try {
       const resp = await apiClient.updateAgent(selectedAgent.id, {
         name: editName.trim(),
-        promptTemplate: editPrompt,
+        model: editModel,
+        skills: JSON.stringify(editSkills),
+        grounding: editGrounding,
       });
       setSelectedAgent(resp.agent);
       await fetchData();
@@ -141,7 +200,27 @@ export function AgentsView() {
     }
   };
 
-  const hasChanges = selectedAgent && (editName !== selectedAgent.name || editPrompt !== selectedAgent.promptTemplate);
+  const toggleSkill = (skillId: string) => {
+    setEditSkills((prev) =>
+      prev.includes(skillId) ? prev.filter((s) => s !== skillId) : [...prev, skillId],
+    );
+  };
+
+  const removeSkill = (skillId: string) => {
+    setEditSkills((prev) => prev.filter((s) => s !== skillId));
+  };
+
+  const hasChanges =
+    selectedAgent &&
+    (editName !== selectedAgent.name ||
+      editModel !== selectedAgent.model ||
+      JSON.stringify(editSkills) !== JSON.stringify(parseSkills(selectedAgent.skills)) ||
+      editGrounding !== selectedAgent.grounding);
+
+  const groundingModified =
+    selectedAgent?.isDefault === 1 &&
+    selectedAgent.defaultGrounding !== null &&
+    editGrounding !== selectedAgent.defaultGrounding;
 
   return (
     <div className="flex h-full">
@@ -272,15 +351,116 @@ export function AgentsView() {
               </div>
             </div>
 
-            {/* Prompt Template Editor */}
+            {/* Model & Skills Row */}
+            <div className="px-4 pt-4 pb-2 space-y-3 border-b border-edge">
+              {/* Model Selector */}
+              <div>
+                <div className="text-[11px] font-medium text-content-muted uppercase tracking-wider mb-1.5">Model</div>
+                <div className="relative">
+                  <select
+                    value={editModel}
+                    onChange={(e) => setEditModel(e.target.value)}
+                    className="w-full px-3 py-1.5 rounded-md border border-edge bg-surface text-[12px] text-content appearance-none pr-7"
+                  >
+                    {AVAILABLE_MODELS.map(m => (
+                      <option key={m.value} value={m.value}>{m.label}</option>
+                    ))}
+                  </select>
+                  <ChevronDown size={12} className="absolute right-2 top-1/2 -translate-y-1/2 text-content-muted pointer-events-none" />
+                </div>
+              </div>
+
+              {/* Skills Picker */}
+              <div>
+                <div className="text-[11px] font-medium text-content-muted uppercase tracking-wider mb-1.5">Skills</div>
+                {/* Selected skills tags */}
+                <div className="flex flex-wrap gap-1.5 mb-2">
+                  {editSkills.length === 0 && (
+                    <span className="text-[11px] text-content-muted">No skills selected</span>
+                  )}
+                  {editSkills.map(skillId => (
+                    <span
+                      key={skillId}
+                      className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-accent/10 text-accent text-[11px] font-medium"
+                    >
+                      {skillId}
+                      <button
+                        onClick={() => removeSkill(skillId)}
+                        className="hover:text-accent/70 transition-colors"
+                      >
+                        <X size={10} />
+                      </button>
+                    </span>
+                  ))}
+                </div>
+                {/* Add skills dropdown */}
+                <div className="relative">
+                  <button
+                    onClick={() => setSkillPickerOpen(!skillPickerOpen)}
+                    className="px-3 py-1.5 rounded-md border border-edge bg-surface text-[12px] text-content-muted hover:text-content hover:border-accent/30 transition-all"
+                  >
+                    {skillPickerOpen ? 'Close' : 'Add skills...'}
+                  </button>
+                  {skillPickerOpen && (
+                    <div className="absolute z-10 mt-1 w-80 max-h-48 overflow-y-auto rounded-md border border-edge bg-panel shadow-lg">
+                      {availableSkills.length === 0 ? (
+                        <div className="p-3 text-[11px] text-content-muted">No skills available</div>
+                      ) : (
+                        availableSkills.map(skill => {
+                          const isSelected = editSkills.includes(skill.id);
+                          return (
+                            <button
+                              key={skill.id}
+                              onClick={() => toggleSkill(skill.id)}
+                              className={`w-full text-left px-3 py-2 border-b border-edge/50 transition-all hover:bg-surface-raised ${
+                                isSelected ? 'bg-accent/5' : ''
+                              }`}
+                            >
+                              <div className="flex items-center gap-2">
+                                <div
+                                  className={`w-3.5 h-3.5 rounded border flex items-center justify-center shrink-0 ${
+                                    isSelected
+                                      ? 'bg-accent border-accent text-surface'
+                                      : 'border-edge'
+                                  }`}
+                                >
+                                  {isSelected && (
+                                    <svg width="8" height="8" viewBox="0 0 8 8" fill="none">
+                                      <path d="M1.5 4L3 5.5L6.5 2" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+                                    </svg>
+                                  )}
+                                </div>
+                                <div className="min-w-0">
+                                  <div className="text-[12px] font-medium text-content">{skill.id}</div>
+                                  <div className="text-[10px] text-content-muted truncate">{skill.name}</div>
+                                </div>
+                              </div>
+                            </button>
+                          );
+                        })
+                      )}
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+
+            {/* Grounding Template Editor */}
             <div className="flex-1 flex overflow-hidden">
               <div className="flex-1 flex flex-col p-4 overflow-hidden">
-                <div className="text-[11px] font-medium text-content-muted uppercase tracking-wider mb-2">Prompt Template</div>
+                <div className="flex items-center justify-between mb-2">
+                  <div className="text-[11px] font-medium text-content-muted uppercase tracking-wider">Grounding Template</div>
+                  {groundingModified && (
+                    <Button variant="ghost" size="sm" icon={<RotateCcw size={10} />} onClick={handleReset}>
+                      Reset Grounding to Default
+                    </Button>
+                  )}
+                </div>
                 <textarea
-                  value={editPrompt}
-                  onChange={e => setEditPrompt(e.target.value)}
+                  value={editGrounding}
+                  onChange={e => setEditGrounding(e.target.value)}
                   className="flex-1 w-full px-3 py-2 rounded-md border border-edge bg-surface text-[12px] text-content font-mono resize-none focus:border-accent/40 focus:outline-none"
-                  placeholder="Enter agent prompt template..."
+                  placeholder="Enter agent grounding template..."
                   spellCheck={false}
                 />
               </div>

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

@@ -0,0 +1,98 @@
+/**
+ * AttachmentPreviewList — displays attached files as preview chips
+ * below the message input area before sending.
+ *
+ * Shows image thumbnails for image files, and a file icon with name
+ * for non-image files. Each chip has a remove button.
+ */
+
+import { X, FileText, FileCode, FileImage, File as FileIcon, Loader2 } from 'lucide-react';
+import { AttachmentManager, type Attachment } from '../lib/attachment_manager';
+
+interface Props {
+  attachments: readonly Attachment[];
+  onRemove: (id: string) => void;
+}
+
+const FILE_ICON_MAP: Record<string, typeof FileText> = {
+  'text/': FileText,
+  'application/json': FileCode,
+  'application/javascript': FileCode,
+  'application/typescript': FileCode,
+  'text/html': FileCode,
+  'text/css': FileCode,
+  'text/xml': FileCode,
+};
+
+const getFileIcon = (mimeType: string) => {
+  if (AttachmentManager.isImage(mimeType)) return FileImage;
+  for (const [prefix, Icon] of Object.entries(FILE_ICON_MAP)) {
+    if (mimeType.startsWith(prefix)) return Icon;
+  }
+  return FileIcon;
+};
+
+const formatSize = (bytes: number): string => {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+};
+
+export function AttachmentPreviewList({ attachments, onRemove }: Props) {
+  if (attachments.length === 0) return null;
+
+  return (
+    <div className="flex flex-wrap gap-2 px-3 pb-2">
+      {attachments.map((att) => (
+        <AttachmentChip key={att.id} attachment={att} onRemove={onRemove} />
+      ))}
+    </div>
+  );
+}
+
+interface ChipProps {
+  attachment: Attachment;
+  onRemove: (id: string) => void;
+}
+
+function AttachmentChip({ attachment, onRemove }: ChipProps) {
+  const isImage = AttachmentManager.isImage(attachment.mimeType);
+  const Icon = getFileIcon(attachment.mimeType);
+
+  return (
+    <div className="relative group flex items-center gap-2 bg-surface-alt border border-edge rounded-lg px-2.5 py-1.5 max-w-[200px]">
+      {/* Preview or icon */}
+      {isImage && attachment.preview ? (
+        <img
+          src={attachment.preview}
+          alt={attachment.name}
+          className="w-8 h-8 rounded object-cover flex-shrink-0"
+        />
+      ) : (
+        <Icon size={16} strokeWidth={1.5} className="text-content-muted flex-shrink-0" />
+      )}
+
+      {/* Name and size */}
+      <div className="flex flex-col min-w-0 flex-1">
+        <span className="text-[11px] font-mono text-content truncate">{attachment.name}</span>
+        <span className="text-[10px] font-mono text-content-muted">
+          {attachment.uploading ? 'Uploading...' : formatSize(attachment.size)}
+        </span>
+      </div>
+
+      {/* Upload spinner or remove button */}
+      {attachment.uploading ? (
+        <Loader2 size={12} className="text-accent animate-spin flex-shrink-0" />
+      ) : (
+        <button
+          type="button"
+          onClick={() => onRemove(attachment.id)}
+          className="absolute -top-1.5 -right-1.5 w-4 h-4 rounded-full bg-surface border border-edge flex items-center justify-center text-content-secondary cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity duration-150 hover:bg-error hover:text-white hover:border-error"
+          aria-label={`Remove ${attachment.name}`}
+        >
+          <X size={8} strokeWidth={2.5} />
+        </button>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,65 @@
+/**
+ * AutocompleteDropdown — renders a scrollable list of autocomplete suggestions
+ * for file path (@) and skill (/) mentions in the chat input.
+ *
+ * Supports keyboard navigation (arrow keys highlight items) and mouse selection.
+ * Uses onMouseDown with preventDefault to avoid stealing focus from the textarea.
+ */
+
+import { useRef, useEffect } from 'react';
+import { FileText, Terminal } from 'lucide-react';
+import type { AutocompleteItem } from '../hooks/use_mention_autocomplete';
+
+interface AutocompleteDropdownProps {
+  items: AutocompleteItem[];
+  selectedIndex: number;
+  onSelect: (item: AutocompleteItem) => void;
+}
+
+export const AutocompleteDropdown = ({ items, selectedIndex, onSelect }: AutocompleteDropdownProps) => {
+  const selectedRef = useRef<HTMLDivElement>(null);
+
+  // Scroll selected item into view
+  useEffect(() => {
+    selectedRef.current?.scrollIntoView({ block: 'nearest' });
+  }, [selectedIndex]);
+
+  if (items.length === 0) return null;
+
+  return (
+    <div
+      className="max-h-48 overflow-y-auto bg-surface border border-edge rounded-lg shadow-lg py-1"
+      role="listbox"
+    >
+      {items.map((item, index) => (
+        <div
+          key={item.value}
+          ref={index === selectedIndex ? selectedRef : undefined}
+          className={`flex items-center gap-2 px-3 py-1.5 cursor-pointer text-[13px] font-mono transition-colors duration-75 ${
+            index === selectedIndex
+              ? 'bg-accent/10 text-accent'
+              : 'text-content hover:bg-surface-raised'
+          }`}
+          role="option"
+          aria-selected={index === selectedIndex}
+          onMouseDown={(e) => {
+            e.preventDefault();
+            onSelect(item);
+          }}
+        >
+          {item.type === 'file' ? (
+            <FileText size={12} className="shrink-0 text-content-muted" />
+          ) : (
+            <Terminal size={12} className="shrink-0 text-content-muted" />
+          )}
+          <span className="truncate">{item.label}</span>
+          {item.description && (
+            <span className="ml-auto text-[11px] text-content-muted truncate max-w-[200px]">
+              {item.description}
+            </span>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+};

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

@@ -0,0 +1,56 @@
+/**
+ * ChatAttachButton — paperclip button to attach files via the native file picker.
+ *
+ * Opens the browser file dialog when clicked. Accepts any file type.
+ * Selected files are passed to the onFilesSelected callback.
+ */
+
+import { useRef, useCallback } from 'react';
+import { Paperclip } from 'lucide-react';
+import { IconButton } from './ds/IconButton';
+
+interface Props {
+  onFilesSelected: (files: File[]) => void;
+  disabled?: boolean;
+}
+
+export function ChatAttachButton({ onFilesSelected, disabled }: Props) {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleClick = useCallback(() => {
+    inputRef.current?.click();
+  }, []);
+
+  const handleChange = useCallback(() => {
+    const input = inputRef.current;
+    if (!input?.files || input.files.length === 0) return;
+
+    const files = Array.from(input.files);
+    onFilesSelected(files);
+
+    // Reset so the same file can be selected again
+    input.value = '';
+  }, [onFilesSelected]);
+
+  return (
+    <>
+      <IconButton
+        label="Attach files"
+        variant="ghost"
+        size="sm"
+        disabled={disabled}
+        onClick={handleClick}
+      >
+        <Paperclip size={14} strokeWidth={2} />
+      </IconButton>
+      <input
+        ref={inputRef}
+        type="file"
+        multiple
+        className="hidden"
+        onChange={handleChange}
+        tabIndex={-1}
+      />
+    </>
+  );
+}

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

@@ -0,0 +1,80 @@
+/**
+ * ChatDropZone — wraps the chat area to accept file drag-and-drop.
+ *
+ * When files are dragged over the zone, a visual overlay appears.
+ * On drop, the onFilesDropped callback is invoked with the dropped files.
+ */
+
+import { useState, useCallback, useRef, type DragEvent, type ReactNode } from 'react';
+import { Upload } from 'lucide-react';
+
+interface Props {
+  children: ReactNode;
+  onFilesDropped: (files: File[]) => void;
+  disabled?: boolean;
+}
+
+export function ChatDropZone({ children, onFilesDropped, disabled }: Props) {
+  const [dragOver, setDragOver] = useState(false);
+  const dragCounterRef = useRef(0);
+
+  const handleDragEnter = useCallback((e: DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (disabled) return;
+    dragCounterRef.current++;
+    if (e.dataTransfer.types.includes('Files')) {
+      setDragOver(true);
+    }
+  }, [disabled]);
+
+  const handleDragLeave = useCallback((e: DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounterRef.current--;
+    if (dragCounterRef.current === 0) {
+      setDragOver(false);
+    }
+  }, []);
+
+  const handleDragOver = useCallback((e: DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+
+  const handleDrop = useCallback((e: DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragOver(false);
+    dragCounterRef.current = 0;
+
+    if (disabled) return;
+
+    const files = Array.from(e.dataTransfer.files);
+    if (files.length > 0) {
+      onFilesDropped(files);
+    }
+  }, [disabled, onFilesDropped]);
+
+  return (
+    <div
+      className="relative flex-1 flex flex-col min-h-0 min-w-0"
+      onDragEnter={handleDragEnter}
+      onDragLeave={handleDragLeave}
+      onDragOver={handleDragOver}
+      onDrop={handleDrop}
+    >
+      {children}
+
+      {/* Drop overlay */}
+      {dragOver && (
+        <div className="absolute inset-0 z-50 flex items-center justify-center bg-accent/5 border-2 border-dashed border-accent/40 rounded-xl pointer-events-none">
+          <div className="flex flex-col items-center gap-2 text-accent">
+            <Upload size={32} strokeWidth={1.5} />
+            <span className="text-sm font-mono">Drop files to attach</span>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}