@slycode/slycode 0.2.21 → 0.2.23

package/dist/web/src/components/ClaudeTerminalPanel.tsx

@@ -13,11 +13,16 @@ interface ProviderConfig {
   command: string;
   permissions: { flag: string; label: string; default: boolean };
   resume: { supported: boolean };
+  model?: {
+    flag: string;
+    available: Array<{ id: string; label: string; description?: string }>;
+  };
 }
 
 interface ProviderDefault {
   provider: string;
   skipPermissions: boolean;
+  model?: string;
 }
 
 interface ProvidersData {
@@ -45,6 +50,7 @@ interface SessionInfo {
   claudeSessionId?: string | null;
   provider?: string;
   skipPermissions?: boolean;
+  model?: string;
 }
 
 export interface TerminalContext {
@@ -145,6 +151,13 @@ export function ClaudeTerminalPanel({
   // Spawn error toast — shown when session creation fails (e.g. posix_spawnp failed)
   const [spawnError, setSpawnError] = useState<string | null>(null);
 
+  // Model selection state
+  const [selectedModel, setSelectedModel] = useState(''); // '' = Default (no flag)
+  const prevProviderRef = useRef(selectedProvider);
+  const userSelectedModelRef = useRef(false);
+  const sessionInfoRef = useRef(sessionInfo);
+  sessionInfoRef.current = sessionInfo;
+
   // Instruction file check state
   const [instructionFileCheck, setInstructionFileCheck] = useState<{ needed: boolean; targetFile?: string; copySource?: string } | null>(null);
   const [createInstructionFile, setCreateInstructionFile] = useState(true);
@@ -177,15 +190,53 @@ export function ClaudeTerminalPanel({
               setSelectedProvider(def.provider);
             }
             setSkipPermissions(def.skipPermissions);
+            if (def.model) {
+              setSelectedModel(def.model);
+            }
           }
         }
       })
       .catch(() => { /* providers.json not available, use defaults */ });
   }, [stage]);
 
+  // Pre-fill model when provider changes
+  useEffect(() => {
+    if (!providersData) return;
+    const providerChanged = prevProviderRef.current !== selectedProvider;
+    prevProviderRef.current = selectedProvider;
+    if (!providerChanged && userSelectedModelRef.current) return;
+    userSelectedModelRef.current = false;
+    // Priority: last-used from session > stage default > Default
+    const si = sessionInfoRef.current;
+    if (si?.model && si.provider === selectedProvider) {
+      const available = providersData.providers[selectedProvider]?.model?.available;
+      if (available?.some(m => m.id === si.model)) {
+        setSelectedModel(si.model);
+        return;
+      }
+    }
+    const stageDefault = stage ? providersData.defaults.stages[stage] : null;
+    const def = stageDefault || providersData.defaults.global;
+    if (def?.model && def.provider === selectedProvider) {
+      const available = providersData.providers[selectedProvider]?.model?.available;
+      if (available?.some(m => m.id === def.model)) {
+        setSelectedModel(def.model);
+        return;
+      }
+    }
+    setSelectedModel('');
+  }, [selectedProvider, providersData, stage]);
+
   // Persist provider default to /api/providers (fire-and-forget)
   const saveProviderDefault = useCallback((provider: string, skip: boolean) => {
-    const defaultVal = { provider, skipPermissions: skip };
+    // Preserve any existing model field in the stage default (stage model defaults are intentional config)
+    const existingDefault = stage
+      ? providersData?.defaults.stages[stage]
+      : providersData?.defaults.global;
+    const defaultVal: Record<string, unknown> = { provider, skipPermissions: skip };
+    if (existingDefault?.model && existingDefault.provider === provider) {
+      defaultVal.model = existingDefault.model;
+    }
     const defaults = stage
       ? { stages: { [stage]: defaultVal } }
       : { global: defaultVal };
@@ -194,7 +245,7 @@ export function ClaudeTerminalPanel({
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ defaults }),
     }).catch(() => { /* preference save — ignore errors */ });
-  }, [stage]);
+  }, [stage, providersData]);
 
   const isRunning = sessionInfo?.status === 'running' || sessionInfo?.status === 'detached';
   const hasHistory = sessionInfo?.hasHistory;
@@ -288,6 +339,74 @@ export function ClaudeTerminalPanel({
     </div>
   ) : null;
 
+  // Helper to render model label from provider config
+  const getModelLabel = (providerId: string, modelId?: string) => {
+    if (!modelId || !providersData) return null;
+    return providersData.providers[providerId]?.model?.available?.find(m => m.id === modelId)?.label || modelId;
+  };
+
+  // Shared provider selector (eliminates duplication between resume and fresh-start screens)
+  const renderProviderSelector = (options?: { showModel?: boolean }) => {
+    if (!providersData || Object.keys(providersData.providers).length <= 1) return null;
+    const currentProvider = providersData.providers[selectedProvider];
+    const models = currentProvider?.model?.available;
+    const showModel = options?.showModel !== false;
+    return (
+      <div className="flex flex-col items-center gap-2 mt-3 pt-3 border-t border-void-700/50">
+        <div className="flex gap-1">
+          {Object.values(providersData.providers).map(p => (
+            <button
+              key={p.id}
+              onClick={() => {
+                setSelectedProvider(p.id);
+                saveProviderDefault(p.id, skipPermissions);
+                onProviderChange?.(p.id);
+              }}
+              className={`rounded-md px-3 py-1 text-xs font-medium transition-all ${
+                selectedProvider === p.id
+                  ? 'border border-neon-blue-400/60 bg-neon-blue-400/15 text-neon-blue-400 shadow-[0_0_8px_rgba(0,191,255,0.2)]'
+                  : 'border border-void-600 bg-void-800 text-void-400 hover:border-void-500 hover:text-void-300'
+              }`}
+            >
+              {p.displayName}
+            </button>
+          ))}
+        </div>
+        <div className="flex items-center gap-3">
+          {showModel && models && models.length > 0 && (
+            <div className="flex items-center gap-1.5">
+              <span className="text-xs text-void-500">Model</span>
+              <select
+                value={selectedModel}
+                onChange={(e) => { setSelectedModel(e.target.value); userSelectedModelRef.current = true; }}
+                className={`max-w-[140px] truncate rounded border px-2 py-1 text-xs font-medium transition-all ${
+                  selectedModel
+                    ? 'border-neon-blue-400/40 bg-neon-blue-400/10 text-neon-blue-400'
+                    : 'border-void-600 bg-void-800 text-void-400'
+                }`}
+              >
+                <option value="">Default</option>
+                {models.map(m => (
+                  <option key={m.id} value={m.id}>{m.label}</option>
+                ))}
+              </select>
+            </div>
+          )}
+          <label className="flex items-center gap-1.5 text-xs text-void-500 cursor-pointer">
+            <input
+              type="checkbox"
+              checked={skipPermissions}
+              onChange={(e) => { setSkipPermissions(e.target.checked); saveProviderDefault(selectedProvider, e.target.checked); }}
+              className="rounded border-void-600"
+            />
+            {providersData.providers[selectedProvider]?.permissions.label || 'Skip permissions'}
+          </label>
+        </div>
+        {instructionFileWarning}
+      </div>
+    );
+  };
+
   // Derive startup and toolbar lists from placement
   const startupActions = actions.filter(a => a.placement === 'startup' || a.placement === 'both');
   const toolbarActions = actions.filter(a => a.placement === 'toolbar' || a.placement === 'both');
@@ -317,6 +436,7 @@ export function ClaudeTerminalPanel({
           cwd,
           fresh: !hasHistory,
           prompt,
+          model: selectedModel || undefined,
           createInstructionFile: instructionFileCheck?.needed ? createInstructionFile : undefined,
         }),
       });
@@ -619,40 +739,7 @@ export function ClaudeTerminalPanel({
                     Custom...
                   </button>
                 </div>
-                {/* Provider selector */}
-                {providersData && Object.keys(providersData.providers).length > 1 && (
-                  <div className="flex flex-col items-center gap-2 mt-3 pt-3 border-t border-void-700/50">
-                    <div className="flex gap-1">
-                      {Object.values(providersData.providers).map(p => (
-                        <button
-                          key={p.id}
-                          onClick={() => {
-                            setSelectedProvider(p.id);
-                            saveProviderDefault(p.id, skipPermissions);
-                            onProviderChange?.(p.id);
-                          }}
-                          className={`rounded-md px-3 py-1 text-xs font-medium transition-all ${
-                            selectedProvider === p.id
-                              ? 'border border-neon-blue-400/60 bg-neon-blue-400/15 text-neon-blue-400 shadow-[0_0_8px_rgba(0,191,255,0.2)]'
-                              : 'border border-void-600 bg-void-800 text-void-400 hover:border-void-500 hover:text-void-300'
-                          }`}
-                        >
-                          {p.displayName}
-                        </button>
-                      ))}
-                    </div>
-                    <label className="flex items-center gap-1.5 text-xs text-void-500 cursor-pointer">
-                      <input
-                        type="checkbox"
-                        checked={skipPermissions}
-                        onChange={(e) => { setSkipPermissions(e.target.checked); saveProviderDefault(selectedProvider, e.target.checked); }}
-                        className="rounded border-void-600"
-                      />
-                      {providersData.providers[selectedProvider]?.permissions.label || 'Skip permissions'}
-                    </label>
-                    {instructionFileWarning}
-                  </div>
-                )}
+                {renderProviderSelector({ showModel: false })}
               </>
             ) : (
               <>
@@ -684,40 +771,7 @@ export function ClaudeTerminalPanel({
                 >
                   Start without prompt
                 </button>
-                {/* Provider selector */}
-                {providersData && Object.keys(providersData.providers).length > 1 && (
-                  <div className="flex flex-col items-center gap-2 mt-3 pt-3 border-t border-void-700/50">
-                    <div className="flex gap-1">
-                      {Object.values(providersData.providers).map(p => (
-                        <button
-                          key={p.id}
-                          onClick={() => {
-                            setSelectedProvider(p.id);
-                            saveProviderDefault(p.id, skipPermissions);
-                            onProviderChange?.(p.id);
-                          }}
-                          className={`rounded-md px-3 py-1 text-xs font-medium transition-all ${
-                            selectedProvider === p.id
-                              ? 'border border-neon-blue-400/60 bg-neon-blue-400/15 text-neon-blue-400 shadow-[0_0_8px_rgba(0,191,255,0.2)]'
-                              : 'border border-void-600 bg-void-800 text-void-400 hover:border-void-500 hover:text-void-300'
-                          }`}
-                        >
-                          {p.displayName}
-                        </button>
-                      ))}
-                    </div>
-                    <label className="flex items-center gap-1.5 text-xs text-void-500 cursor-pointer">
-                      <input
-                        type="checkbox"
-                        checked={skipPermissions}
-                        onChange={(e) => { setSkipPermissions(e.target.checked); saveProviderDefault(selectedProvider, e.target.checked); }}
-                        className="rounded border-void-600"
-                      />
-                      {providersData.providers[selectedProvider]?.permissions.label || 'Skip permissions'}
-                    </label>
-                    {instructionFileWarning}
-                  </div>
-                )}
+                {renderProviderSelector()}
               </>
             )}
           </div>

package/dist/web/src/components/Dashboard.tsx

@@ -15,6 +15,7 @@ import { CliAssetsTab } from './CliAssetsTab';
 import { ActivityFeed } from './ActivityFeed';
 import { ThemeToggle } from './ThemeToggle';
 import { VersionUpdateToast } from './VersionUpdateToast';
+import { ChangelogModal } from './ChangelogModal';
 import { useVoice } from '@/contexts/VoiceContext';
 
 interface DashboardProps {
@@ -35,6 +36,7 @@ export function Dashboard({ data: initialData }: DashboardProps) {
   const [dropIndex, setDropIndex] = useState<number | null>(null);
   const gridRef = useRef<HTMLDivElement>(null);
   const [slycodeVersion, setSlycodeVersion] = useState<string | null>(null);
+  const [showChangelog, setShowChangelog] = useState(false);
 
   // Fetch SlyCode version on mount
   useEffect(() => {
@@ -472,6 +474,13 @@ export function Dashboard({ data: initialData }: DashboardProps) {
           <p className="mt-2 text-xs text-void-500 dark:text-void-400">
             &copy; 2026 SlyCode (<a href="https://slycode.ai" target="_blank" rel="noopener noreferrer" className="hover:text-neon-blue-500 dark:hover:text-neon-blue-400 transition-colors">slycode.ai</a>). All rights reserved.
             {slycodeVersion && <span className="ml-2 text-void-400 dark:text-void-500">v{slycodeVersion}</span>}
+            <button
+              type="button"
+              onClick={() => setShowChangelog(true)}
+              className="ml-2 text-void-400 hover:text-neon-blue-500 dark:text-void-500 dark:hover:text-neon-blue-400 transition-colors underline-offset-2 hover:underline"
+            >
+              Changelog
+            </button>
           </p>
         </footer>
       </main>
@@ -482,6 +491,8 @@ export function Dashboard({ data: initialData }: DashboardProps) {
         onCreated={refreshData}
       />
 
+      {showChangelog && <ChangelogModal onClose={() => setShowChangelog(false)} />}
+
       {/* Global Terminal */}
       <GlobalClaudePanel
         sessionNameOverride="global:global"

package/dist/web/src/components/GlobalClaudePanel.tsx

@@ -8,6 +8,7 @@ import {
 import { useSlyActionsConfig } from '@/hooks/useSlyActionsConfig';
 import { onTerminalPrompt } from '@/lib/terminal-events';
 import { ClaudeTerminalPanel, type TerminalContext } from './ClaudeTerminalPanel';
+import { BranchTab } from './BranchTab';
 import { useVoice } from '@/contexts/VoiceContext';
 
 interface SessionInfo {
@@ -264,6 +265,11 @@ export function GlobalClaudePanel({
           />
         </div>
       )}
+
+      {/* Git branch tab - positioned to the left of the panel */}
+      {cwd && (
+        <BranchTab projectPath={cwd} isTerminalExpanded={isExpanded} />
+      )}
     </div>
   );
 }

package/dist/web/src/components/ProjectKanban.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
 import { useSearchParams, useRouter, usePathname } from 'next/navigation';
-import type { ProjectWithBacklog, KanbanCard, KanbanStage, KanbanStages, BridgeStats, Priority } from '@/lib/types';
+import type { ProjectWithBacklog, KanbanCard, KanbanStage, KanbanStages, BridgeStats, Priority, ChangedCard, CardChangeType } from '@/lib/types';
 import { connectionManager } from '@/lib/connection-manager';
 import { tabSync } from '@/lib/tab-sync';
 import { usePolling } from '@/hooks/usePolling';
@@ -85,6 +85,8 @@ export function ProjectKanban({ project, projectPath, showArchived = false, show
   const [activeCards, setActiveCards] = useState<Set<string>>(new Set());
   const prevActiveCardsRef = useRef<Set<string>>(new Set());
   const consumedCardParamRef = useRef<string | null>(null);
+  const editedCardIdsRef = useRef<Set<string>>(new Set());
+  const movedCardIdsRef = useRef<Set<string>>(new Set());
 
   // Context menu state
   const [contextMenu, setContextMenu] = useState<{ position: { x: number; y: number }; card: KanbanCard; stage: KanbanStage } | null>(null);
@@ -376,8 +378,8 @@ export function ProjectKanban({ project, projectPath, showArchived = false, show
     setSaveStatus('saving');
     isSavingRef.current = true;
     try {
-      // Compute which cards actually changed vs the clean baseline
-      const changedCardIds: string[] = [];
+      // Compute which cards actually changed vs the clean baseline, with typed changeset
+      const changedCards: ChangedCard[] = [];
       const baselineCards = new Map<string, string>();
       for (const stage of STAGE_ORDER) {
         for (const card of cleanBaselineRef.current[stage] || []) {
@@ -389,29 +391,51 @@ export function ProjectKanban({ project, projectPath, showArchived = false, show
           const baselineKey = baselineCards.get(card.id);
           const currentKey = JSON.stringify(card) + '|' + stage;
           if (baselineKey !== currentKey) {
-            changedCardIds.push(card.id); // New, modified, or moved
+            if (editedCardIdsRef.current.has(card.id)) {
+              changedCards.push({ id: card.id, type: 'edit' }); // Edit wins over move
+            } else if (movedCardIdsRef.current.has(card.id)) {
+              changedCards.push({ id: card.id, type: 'move' });
+            }
+            // Untracked divergence (SSE timing, connection issues, normalizeOrder drift)
+            // — skip it. The server merge preserves disk truth for cards not in changedCards.
           }
           baselineCards.delete(card.id);
         }
       }
       // Cards in baseline but not in current = deleted
       for (const deletedId of baselineCards.keys()) {
-        changedCardIds.push(deletedId);
+        changedCards.push({ id: deletedId, type: 'delete' });
       }
 
+      // Clear tracking refs after building payload
+      editedCardIdsRef.current.clear();
+      movedCardIdsRef.current.clear();
+
       const res = await fetch('/api/kanban', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ projectId: project.id, stages: stagesToSave, changedCardIds }),
+        body: JSON.stringify({ projectId: project.id, stages: stagesToSave, changedCards }),
       });
       if (res.ok) {
         const data = await res.json();
         lastSaveTimestampRef.current = data.last_updated;
-        cleanBaselineRef.current = stagesToSave;
+        // Use server's merged+normalized stages as baseline (eliminates normalizeOrder drift)
+        const serverStages = data.stages;
+        if (serverStages) {
+          cleanBaselineRef.current = serverStages;
+          // Sync React state with server truth if no new user edits happened during save.
+          // Without this, baseline and stages diverge — cards the user never touched appear
+          // "changed" in the next save cycle and get reverted to stale frontend positions.
+          if (stagesEqual(stagesRef.current, stagesToSave)) {
+            setStages(serverStages);
+          }
+        } else {
+          cleanBaselineRef.current = stagesToSave;
+        }
         // Only clear dirty if stages haven't changed during the save.
         // If the user made edits while the save was in flight, stay dirty
         // so SSE/polling won't overwrite their pending changes.
-        isDirtyRef.current = !stagesEqual(stagesRef.current, stagesToSave);
+        isDirtyRef.current = !stagesEqual(stagesRef.current, cleanBaselineRef.current);
         setSaveStatus('saved');
         // Notify other tabs immediately
         tabSync.broadcast('kanban-update', project.id);
@@ -544,6 +568,8 @@ export function ProjectKanban({ project, projectPath, showArchived = false, show
 
     if (!selectedStage) return;
 
+    editedCardIdsRef.current.add(updatedCard.id);
+
     // Update stages - selectedCard will be automatically derived from the updated stages
     setStages((prev) => ({
       ...prev,
@@ -577,6 +603,7 @@ export function ProjectKanban({ project, projectPath, showArchived = false, show
   };
 
   const handleMoveCard = (cardId: string, newStage: KanbanStage, insertIndex?: number) => {
+    movedCardIdsRef.current.add(cardId);
     setStages((prev) => {
       // Find which stage the card is currently in
       let sourceStage: KanbanStage | null = null;
@@ -695,6 +722,7 @@ export function ProjectKanban({ project, projectPath, showArchived = false, show
               checked: p === card.priority,
               disabled: p === card.priority,
               onClick: () => {
+                editedCardIdsRef.current.add(card.id);
                 setStages((prev) => ({
                   ...prev,
                   [stage]: prev[stage].map((c) =>
@@ -731,6 +759,7 @@ export function ProjectKanban({ project, projectPath, showArchived = false, show
             disabled: !!card.automation,
             onClick: () => {
               if (card.automation) return;
+              editedCardIdsRef.current.add(card.id);
               setStages((prev) => ({
                 ...prev,
                 [stage]: prev[stage].map((c) =>
@@ -767,6 +796,7 @@ export function ProjectKanban({ project, projectPath, showArchived = false, show
               checked: p === card.priority,
               disabled: p === card.priority,
               onClick: () => {
+                editedCardIdsRef.current.add(card.id);
                 setStages((prev) => ({
                   ...prev,
                   [stage]: prev[stage].map((c) =>

package/dist/web/src/components/VersionUpdateToast.tsx

@@ -53,12 +53,14 @@ export function VersionUpdateToast() {
         />
         <span className="text-sm text-void-700 dark:text-void-300">
           SlyCode <span className="font-medium text-neon-blue-500 dark:text-neon-blue-400">v{info.latest}</span> available
-          <span className="text-void-500 dark:text-void-400"> (current: v{info.current})</span>
         </span>
       </div>
-      <code className="rounded bg-void-100 px-1.5 py-0.5 text-xs text-void-600 dark:bg-void-800 dark:text-void-400">
-        slycode update
-      </code>
+      <div className="flex items-center gap-1.5">
+        <span className="text-xs text-void-500 dark:text-void-400">run in terminal:</span>
+        <code className="rounded bg-void-100 px-1.5 py-0.5 text-xs text-void-600 dark:bg-void-800 dark:text-void-400">
+          slycode update
+        </code>
+      </div>
       <button
         onClick={handleDismiss}
         className="ml-1 rounded p-0.5 text-void-400 transition-colors hover:bg-void-200 hover:text-void-600 dark:text-void-500 dark:hover:bg-void-800 dark:hover:text-void-300"

package/dist/web/src/components/VoiceControlBar.tsx

@@ -45,7 +45,7 @@ export function VoiceControlBar({
           onClick={onRecord}
           disabled={disabled}
           className="rounded-md border border-void-400/30 bg-void-200/50 p-1.5 text-void-500 transition-all hover:border-red-400/40 hover:bg-red-400/10 hover:text-red-400 disabled:opacity-50 dark:border-void-500/25 dark:bg-void-700/50 dark:text-void-400 dark:hover:border-red-400/40 dark:hover:bg-red-400/10 dark:hover:text-red-400"
-          title="Start recording (Ctrl+.)"
+          title="Start recording [Ctrl+.]"
         >
           <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" />

package/dist/web/src/lib/paths.ts

@@ -7,6 +7,20 @@
 
 import path from 'path';
 import fs from 'fs';
+import os from 'os';
+
+/**
+ * Expand tilde (~) in a path to the user's home directory.
+ * Also normalizes Unicode tildes (U+02DC, U+FF5E) that Mac browsers can produce.
+ */
+export function expandTilde(p: string): string {
+  // Normalize Unicode tildes (U+02DC small tilde, U+FF5E fullwidth tilde) to ASCII
+  p = p.replace(/^[\u02dc\uff5e]/, '~');
+  if (p.startsWith('~/') || p === '~') {
+    return p.replace(/^~/, os.homedir());
+  }
+  return p;
+}
 
 /**
  * Resolve the SlyCode root directory (workspace).

package/dist/web/src/lib/scheduler.ts

@@ -666,7 +666,8 @@ async function checkAutomations(): Promise<void> {
                     result.error.includes('Session create failed') ||
                     result.error.includes('Session stopped') ||
                     result.error.includes('Input failed') ||
-                    result.error.includes('No automation config')
+                    result.error.includes('No automation config') ||
+                    result.error.includes('No activity detected')
                   );
                   if (isHardFailure) {
                     await sendErrorNotification(card.title, result.error || 'Unknown error', result.sessionName);

package/dist/web/src/lib/types.ts

@@ -128,6 +128,13 @@ export interface KanbanStages {
   done: KanbanCard[];
 }
 
+export type CardChangeType = 'move' | 'edit' | 'create' | 'delete';
+
+export interface ChangedCard {
+  id: string;
+  type: CardChangeType;
+}
+
 export interface KanbanBoard {
   project_id: string;
   stages: KanbanStages;
@@ -163,6 +170,23 @@ export interface FeatureEntry {
   projectId?: string;
 }
 
+// ============================================================================
+// Changelog Types
+// ============================================================================
+
+export type ChangelogChangeType = 'feature' | 'bugfix' | 'improvement' | 'chore';
+
+export interface ChangelogChange {
+  type: ChangelogChangeType;
+  description: string;
+}
+
+export interface ChangelogVersion {
+  version: string;
+  date: string; // YYYY-MM-DD
+  changes: ChangelogChange[];
+}
+
 // ============================================================================
 // Questionnaire Types (per design doc section 3.3)
 // ============================================================================