@slycode/slycode 0.2.22 → 0.2.23

package/dist/web/src/app/api/changelog/route.ts

@@ -0,0 +1,45 @@
+import { NextResponse } from 'next/server';
+import { readFileSync, existsSync } from 'fs';
+import path from 'path';
+import { getSlycodeRoot } from '@/lib/paths';
+import type { ChangelogVersion } from '@/lib/types';
+
+/**
+ * GET /api/changelog
+ *
+ * Returns the changelog as a JSON array of ChangelogVersion entries,
+ * ordered newest-first.
+ *
+ * Path resolution:
+ *   Prod: <workspace>/node_modules/@slycode/slycode/templates/changelog.json
+ *   Dev:  <workspace>/data/changelog.json
+ *
+ * Returns an empty array on missing/malformed file (graceful degradation).
+ */
+export async function GET() {
+  const root = getSlycodeRoot();
+
+  const candidatePaths = [
+    // Prod: shipped inside the package templates
+    path.join(root, 'node_modules', '@slycode', 'slycode', 'templates', 'changelog.json'),
+    // Dev: source of truth at data/
+    path.join(root, 'data', 'changelog.json'),
+  ];
+
+  for (const p of candidatePaths) {
+    if (!existsSync(p)) continue;
+    try {
+      const raw = readFileSync(p, 'utf-8');
+      const data = JSON.parse(raw);
+      if (!Array.isArray(data)) {
+        // Malformed shape — fall through to empty
+        continue;
+      }
+      return NextResponse.json(data as ChangelogVersion[]);
+    } catch {
+      // Malformed JSON — fall through to next candidate or empty
+    }
+  }
+
+  return NextResponse.json([] as ChangelogVersion[]);
+}

package/dist/web/src/app/api/kanban/route.ts

@@ -1,7 +1,7 @@
 import { NextRequest, NextResponse } from 'next/server';
 import { promises as fs } from 'fs';
 import path from 'path';
-import type { KanbanBoard, KanbanStages, KanbanCard, KanbanStage } from '@/lib/types';
+import type { KanbanBoard, KanbanStages, KanbanCard, KanbanStage, ChangedCard } from '@/lib/types';
 import { getNextRun } from '@/lib/scheduler';
 import { appendEvent } from '@/lib/event-log';
 import {
@@ -230,10 +230,11 @@ export async function GET(request: NextRequest) {
 export async function POST(request: NextRequest) {
   try {
     const body = await request.json();
-    const { projectId, stages: incomingStages, changedCardIds } = body as {
+    const { projectId, stages: incomingStages, changedCardIds, changedCards } = body as {
       projectId: string;
       stages: KanbanStages;
       changedCardIds?: string[];
+      changedCards?: ChangedCard[];
     };
     let stages = incomingStages;
 
@@ -288,21 +289,60 @@ export async function POST(request: NextRequest) {
     // Clean up old numbered backups from previous system (one-time migration)
     await cleanupLegacyBackups(projectId);
 
-    // Merge logic: when changedCardIds is present, only apply those cards from the
-    // frontend payload and keep the disk version of everything else. This prevents
-    // stale frontend state from overwriting concurrent CLI/agent edits.
-    if (changedCardIds && changedCardIds.length > 0) {
+    // Type-aware merge: changedCards carries per-card operation types (move/edit/create/delete).
+    // For "move" cards, preserve disk content and overlay only positional fields.
+    // For "edit"/"create" cards, use the frontend version fully.
+    // Falls back to changedCardIds (untyped) for backward compatibility — treats all as "edit".
+    const effectiveChangedIds = changedCards?.map((c) => c.id) ?? changedCardIds;
+    if (effectiveChangedIds && effectiveChangedIds.length > 0) {
       try {
         const currentContent = await fs.readFile(kanbanPath, 'utf-8');
         const currentData = JSON.parse(currentContent) as KanbanBoard;
         const diskStages = currentData.stages || EMPTY_STAGES;
 
+        // Build type lookup: cardId → change type (default "edit" for backward compat)
+        const changeTypeMap = new Map<string, string>();
+        if (changedCards) {
+          for (const cc of changedCards) {
+            changeTypeMap.set(cc.id, cc.type);
+          }
+        }
+
+        // Build disk card lookup for move operations
+        const diskCardMap = new Map<string, KanbanCard>();
+        for (const [, cards] of Object.entries(diskStages) as [KanbanStage, KanbanCard[]][]) {
+          for (const card of cards || []) {
+            diskCardMap.set(card.id, card);
+          }
+        }
+
         // Build lookup of changed cards from frontend payload
-        const changedCards = new Map<string, { card: KanbanCard; stage: KanbanStage }>();
+        const changedCardMap = new Map<string, { card: KanbanCard; stage: KanbanStage }>();
         for (const [stage, cards] of Object.entries(stages) as [KanbanStage, KanbanCard[]][]) {
           for (const card of cards || []) {
-            if (changedCardIds.includes(card.id)) {
-              changedCards.set(card.id, { card: { ...card, last_modified_by: 'web' }, stage });
+            if (effectiveChangedIds.includes(card.id)) {
+              const changeType = changeTypeMap.get(card.id) || 'edit';
+              let mergedCard: KanbanCard;
+
+              if (changeType === 'move') {
+                // Move: preserve disk content, overlay only positional fields
+                const diskCard = diskCardMap.get(card.id);
+                if (!diskCard) {
+                  // Card deleted on disk during pending move — drop silently
+                  continue;
+                }
+                mergedCard = {
+                  ...diskCard,
+                  order: card.order,
+                  updated_at: card.updated_at,
+                  last_modified_by: 'web',
+                };
+              } else {
+                // Edit/create: use frontend version fully
+                mergedCard = { ...card, last_modified_by: 'web' };
+              }
+
+              changedCardMap.set(card.id, { card: mergedCard, stage: stage as KanbanStage });
             }
           }
         }
@@ -317,14 +357,14 @@ export async function POST(request: NextRequest) {
         };
 
         // Remove changed cards from their current disk positions
-        for (const cardId of changedCardIds) {
+        for (const cardId of effectiveChangedIds) {
           for (const stage of Object.keys(mergedStages) as KanbanStage[]) {
             mergedStages[stage] = mergedStages[stage].filter((c) => c.id !== cardId);
           }
         }
 
         // Re-add changed cards to their target stages (absent = deleted)
-        for (const [, { card, stage }] of changedCards) {
+        for (const [, { card, stage }] of changedCardMap) {
           mergedStages[stage] = [...mergedStages[stage], card];
         }
 
@@ -409,7 +449,7 @@ export async function POST(request: NextRequest) {
       }
     }
 
-    return NextResponse.json({ success: true, last_updated: data.last_updated });
+    return NextResponse.json({ success: true, last_updated: data.last_updated, stages: normalizedStages });
   } catch (error) {
     console.error('Failed to save kanban:', error);
     return NextResponse.json({ error: 'Failed to save' }, { status: 500 });

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

@@ -80,6 +80,9 @@ function renderMovedDetail(detail: string): React.ReactNode {
 
 function renderDetail(event: ActivityEvent): React.ReactNode {
   if (event.type === 'card_moved') return renderMovedDetail(event.detail);
+  if (typeof event.detail === 'object' && event.detail !== null) {
+    return JSON.stringify(event.detail);
+  }
   return event.detail;
 }
 

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

@@ -0,0 +1,115 @@
+'use client';
+
+import { useState, useEffect, useCallback, useRef } from 'react';
+
+interface BranchTabProps {
+  projectPath: string;
+  isTerminalExpanded: boolean;
+}
+
+interface GitStatus {
+  branch: string | null;
+  uncommitted: number;
+}
+
+/**
+ * Generate a deterministic hue (0-360) from a string using DJB2 hash.
+ * Different branch names produce visually distinct colors.
+ */
+function branchToHue(branch: string): number {
+  let hash = 5381;
+  for (let i = 0; i < branch.length; i++) {
+    hash = ((hash << 5) + hash + branch.charCodeAt(i)) >>> 0;
+  }
+  return hash % 360;
+}
+
+/**
+ * Detect if dark mode is active by checking for .dark class on <html>.
+ */
+function isDarkMode(): boolean {
+  if (typeof document === 'undefined') return true;
+  return document.documentElement.classList.contains('dark');
+}
+
+export function BranchTab({ projectPath, isTerminalExpanded }: BranchTabProps) {
+  const [gitStatus, setGitStatus] = useState<GitStatus | null>(null);
+  const [dark, setDark] = useState(true);
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  const fetchBranch = useCallback(async () => {
+    try {
+      const res = await fetch(`/api/bridge/git-status?cwd=${encodeURIComponent(projectPath)}`);
+      if (!res.ok) {
+        setGitStatus(null);
+        return;
+      }
+      const data = await res.json() as GitStatus;
+      setGitStatus(data.branch ? data : null);
+    } catch {
+      setGitStatus(null);
+    }
+  }, [projectPath]);
+
+  // Fetch on mount + poll every 30s
+  useEffect(() => {
+    fetchBranch();
+    intervalRef.current = setInterval(fetchBranch, 30000);
+    return () => {
+      if (intervalRef.current) clearInterval(intervalRef.current);
+    };
+  }, [fetchBranch]);
+
+  // Watch for theme changes
+  useEffect(() => {
+    setDark(isDarkMode());
+    const observer = new MutationObserver(() => setDark(isDarkMode()));
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
+    return () => observer.disconnect();
+  }, []);
+
+  if (!gitStatus) return null;
+
+  const hue = branchToHue(gitStatus.branch!);
+
+  const bg = dark ? `hsla(${hue}, 55%, 22%, 0.9)` : `hsla(${hue}, 40%, 48%, 0.92)`;
+  const border = dark ? `hsla(${hue}, 60%, 45%, 0.5)` : `hsla(${hue}, 45%, 38%, 0.4)`;
+  const glow = dark
+    ? `0 -3px 12px hsla(${hue}, 70%, 50%, 0.2), 0 0 6px hsla(${hue}, 60%, 40%, 0.1)`
+    : `0 -2px 8px hsla(${hue}, 50%, 50%, 0.15)`;
+
+  // Position: to the left of GlobalClaudePanel
+  // Collapsed panel: right-4 w-64 → branch tab right = 16px + 256px + 8px gap = 280px
+  // Expanded panel (sm+): right-4 w-[700px] → branch tab right = 16px + 700px + 8px gap = 724px
+  const rightPos = isTerminalExpanded
+    ? 'right-4 sm:right-[724px]'
+    : 'right-[280px]';
+
+  return (
+    <div
+      onClick={fetchBranch}
+      title={`${gitStatus.branch}${gitStatus.uncommitted > 0 ? ` — ${gitStatus.uncommitted} uncommitted` : ''}\nClick to refresh`}
+      className={`fixed z-40 bottom-0 cursor-pointer select-none transition-all duration-300 ease-in-out ${rightPos}`}
+    >
+      <div
+        className="rounded-t-md px-3 py-1.5 backdrop-blur-sm flex flex-col"
+        style={{
+          background: bg,
+          borderWidth: '1px 1px 0 1px',
+          borderStyle: 'solid',
+          borderColor: border,
+          boxShadow: glow,
+        }}
+      >
+        <span className="max-w-[200px] truncate text-xs font-semibold text-white/90">
+          {gitStatus.branch}
+        </span>
+        {gitStatus.uncommitted > 0 && (
+          <span className="text-[10px] leading-tight text-white/55">
+            {gitStatus.uncommitted} uncommitted
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,234 @@
+'use client';
+
+import { useEffect, useState, useCallback } from 'react';
+import type { ChangelogVersion, ChangelogChangeType } from '@/lib/types';
+
+interface ChangelogModalProps {
+  onClose: () => void;
+}
+
+// ============================================================================
+// Type styling
+// ============================================================================
+
+const TYPE_LABELS: Record<ChangelogChangeType, string> = {
+  feature: 'Feature',
+  bugfix: 'Fix',
+  improvement: 'Improved',
+  chore: 'Chore',
+};
+
+const TYPE_STYLES: Record<ChangelogChangeType, string> = {
+  feature:
+    'border-neon-blue-400/40 bg-neon-blue-400/15 text-neon-blue-600 dark:text-neon-blue-400',
+  bugfix:
+    'border-red-400/40 bg-red-400/15 text-red-600 dark:text-red-400',
+  improvement:
+    'border-emerald-400/40 bg-emerald-400/15 text-emerald-600 dark:text-emerald-400',
+  chore:
+    'border-void-400/40 bg-void-400/15 text-void-600 dark:text-void-300',
+};
+
+// ============================================================================
+// Component
+// ============================================================================
+
+export function ChangelogModal({ onClose }: ChangelogModalProps) {
+  const [data, setData] = useState<ChangelogVersion[] | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // Fetch changelog on mount
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    fetch('/api/changelog')
+      .then((r) => {
+        if (!r.ok) throw new Error(`HTTP ${r.status}`);
+        return r.json();
+      })
+      .then((json) => {
+        if (cancelled) return;
+        setData(Array.isArray(json) ? (json as ChangelogVersion[]) : []);
+        setError(null);
+      })
+      .catch((err: unknown) => {
+        if (cancelled) return;
+        const message = err instanceof Error ? err.message : 'Unknown error';
+        setError(message);
+        setData([]);
+      })
+      .finally(() => {
+        if (cancelled) return;
+        setLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  // Escape to close
+  useEffect(() => {
+    function handleKey(e: KeyboardEvent) {
+      if (e.key === 'Escape') {
+        e.stopPropagation();
+        onClose();
+      }
+    }
+    document.addEventListener('keydown', handleKey);
+    return () => document.removeEventListener('keydown', handleKey);
+  }, [onClose]);
+
+  const formatDate = useCallback((iso: string): string => {
+    if (!iso) return '';
+    try {
+      const d = new Date(`${iso}T00:00:00`);
+      if (Number.isNaN(d.getTime())) return iso;
+      return d.toLocaleDateString('en-US', {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+      });
+    } catch {
+      return iso;
+    }
+  }, []);
+
+  return (
+    <div
+      className="fixed inset-0 z-[55] flex items-center justify-center bg-black/60 p-4 backdrop-blur-sm"
+      onClick={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
+    >
+      <div className="flex w-full max-w-3xl max-h-[85vh] flex-col overflow-hidden rounded-xl border border-void-200 bg-white shadow-(--shadow-overlay) dark:border-void-700 dark:bg-void-850">
+        {/* Header */}
+        <div className="flex items-start justify-between border-b border-void-200 px-6 py-5 dark:border-void-800">
+          <div>
+            <div className="font-mono text-[10px] uppercase tracking-[0.22em] text-neon-blue-600 dark:text-neon-blue-400">
+              Release History
+            </div>
+            <h2 className="mt-1 text-2xl font-semibold tracking-tight text-void-900 dark:text-void-100">
+              Changelog
+            </h2>
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            aria-label="Close changelog"
+            className="rounded-md p-1.5 text-void-500 transition-colors hover:bg-void-100 hover:text-void-900 dark:text-void-400 dark:hover:bg-void-800 dark:hover:text-void-100"
+          >
+            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden>
+              <path
+                d="M5 5l10 10M15 5L5 15"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+              />
+            </svg>
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 overflow-y-auto px-6 py-6">
+          {loading && (
+            <div className="flex items-center justify-center py-16">
+              <div className="font-mono text-xs uppercase tracking-widest text-void-400 dark:text-void-500">
+                Loading…
+              </div>
+            </div>
+          )}
+
+          {!loading && error && (
+            <div className="rounded-lg border border-red-300/60 bg-red-50 px-4 py-3 text-sm text-red-700 dark:border-red-900/50 dark:bg-red-950/30 dark:text-red-300">
+              Couldn&apos;t load the changelog: {error}
+            </div>
+          )}
+
+          {!loading && !error && data && data.length === 0 && (
+            <div className="flex flex-col items-center justify-center py-16 text-center">
+              <div className="mb-2 font-mono text-[10px] uppercase tracking-[0.22em] text-void-400 dark:text-void-600">
+                No entries
+              </div>
+              <p className="text-sm text-void-500 dark:text-void-400">
+                The changelog is empty. Future releases will appear here.
+              </p>
+            </div>
+          )}
+
+          {!loading && !error && data && data.length > 0 && (
+            <ol className="relative space-y-9">
+              {/* Timeline rail */}
+              <div
+                className="absolute left-[7px] top-2 bottom-2 w-px bg-gradient-to-b from-neon-blue-400/50 via-void-300 to-transparent dark:from-neon-blue-400/40 dark:via-void-700"
+                aria-hidden
+              />
+
+              {data.map((version, idx) => (
+                <li key={version.version} className="relative pl-8">
+                  {/* Timeline dot */}
+                  <div
+                    className={`absolute left-0 top-[6px] h-[15px] w-[15px] rounded-full border-2 ${
+                      idx === 0
+                        ? 'border-neon-blue-400 bg-neon-blue-400/20'
+                        : 'border-void-300 bg-white dark:border-void-600 dark:bg-void-900'
+                    }`}
+                    aria-hidden
+                  >
+                    {idx === 0 && (
+                      <div className="absolute inset-[2px] animate-pulse rounded-full bg-neon-blue-400/70" />
+                    )}
+                  </div>
+
+                  {/* Version header */}
+                  <div className="mb-3 flex flex-wrap items-baseline gap-x-3 gap-y-1">
+                    <span className="font-mono text-lg font-semibold text-void-900 dark:text-void-100">
+                      v{version.version}
+                    </span>
+                    <span className="font-mono text-[11px] uppercase tracking-[0.15em] text-void-500 dark:text-void-500">
+                      {formatDate(version.date)}
+                    </span>
+                    {idx === 0 && (
+                      <span className="rounded border border-neon-blue-400/50 bg-neon-blue-400/15 px-1.5 py-[2px] font-mono text-[9px] font-medium uppercase tracking-[0.15em] text-neon-blue-600 dark:text-neon-blue-400">
+                        Latest
+                      </span>
+                    )}
+                  </div>
+
+                  {/* Changes */}
+                  <ul className="space-y-2.5">
+                    {version.changes.map((change, ci) => (
+                      <li key={ci} className="flex items-start gap-3">
+                        <span
+                          className={`mt-[2px] inline-flex w-20 shrink-0 items-center justify-center rounded border px-1.5 py-[3px] font-mono text-[10px] font-medium uppercase tracking-wider ${TYPE_STYLES[change.type]}`}
+                        >
+                          {TYPE_LABELS[change.type]}
+                        </span>
+                        <span className="text-sm leading-relaxed text-void-700 dark:text-void-300">
+                          {change.description}
+                        </span>
+                      </li>
+                    ))}
+                  </ul>
+                </li>
+              ))}
+            </ol>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="flex items-center justify-center gap-2 border-t border-void-200 bg-void-50 px-6 py-3 dark:border-void-800 dark:bg-void-900/50">
+          <span className="font-mono text-[10px] uppercase tracking-[0.18em] text-void-500 dark:text-void-500">
+            Press
+          </span>
+          <kbd className="rounded border border-void-300 bg-white px-1.5 py-[1px] font-mono text-[10px] text-void-700 dark:border-void-700 dark:bg-void-850 dark:text-void-300">
+            Esc
+          </kbd>
+          <span className="font-mono text-[10px] uppercase tracking-[0.18em] text-void-500 dark:text-void-500">
+            to close
+          </span>
+        </div>
+      </div>
+    </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>
   );
 }