@aion0/forge 0.1.0

package/components/NewTaskModal.tsx

@@ -0,0 +1,456 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import type { TaskMode, WatchConfig } from '@/src/types';
+
+interface Project {
+  name: string;
+  path: string;
+  language: string | null;
+}
+
+interface SessionInfo {
+  sessionId: string;
+  summary?: string;
+  firstPrompt?: string;
+  modified?: string;
+  gitBranch?: string;
+}
+
+export default function NewTaskModal({
+  onClose,
+  onCreate,
+}: {
+  onClose: () => void;
+  onCreate: (data: {
+    projectName: string;
+    prompt: string;
+    priority?: number;
+    conversationId?: string;
+    newSession?: boolean;
+    scheduledAt?: string;
+    mode?: TaskMode;
+    watchConfig?: WatchConfig;
+  }) => void;
+}) {
+  const [projects, setProjects] = useState<Project[]>([]);
+  const [selectedProject, setSelectedProject] = useState('');
+  const [prompt, setPrompt] = useState('');
+  const [priority, setPriority] = useState(0);
+
+  // Task mode
+  const [taskMode, setTaskMode] = useState<TaskMode>('prompt');
+
+  // Monitor config
+  const [watchCondition, setWatchCondition] = useState<WatchConfig['condition']>('change');
+  const [watchKeyword, setWatchKeyword] = useState('');
+  const [watchIdleMinutes, setWatchIdleMinutes] = useState(10);
+  const [watchAction, setWatchAction] = useState<WatchConfig['action']>('notify');
+  const [watchActionPrompt, setWatchActionPrompt] = useState('');
+  const [watchRepeat, setWatchRepeat] = useState(false);
+
+  // Session selection
+  const [sessionMode, setSessionMode] = useState<'auto' | 'select' | 'new'>('auto');
+  const [sessions, setSessions] = useState<SessionInfo[]>([]);
+  const [selectedSessionId, setSelectedSessionId] = useState<string | null>(null);
+  const [autoSessionId, setAutoSessionId] = useState<string | null>(null);
+
+  // Scheduling
+  const [scheduleMode, setScheduleMode] = useState<'now' | 'delay' | 'time'>('now');
+  const [delayMinutes, setDelayMinutes] = useState(30);
+  const [scheduledTime, setScheduledTime] = useState('');
+
+  useEffect(() => {
+    fetch('/api/projects').then(r => r.json()).then((p: Project[]) => {
+      setProjects(p);
+      if (p.length > 0) setSelectedProject(p[0].name);
+    });
+  }, []);
+
+  // Fetch sessions when project changes
+  useEffect(() => {
+    if (!selectedProject) return;
+
+    // Get auto-inherited session
+    fetch(`/api/tasks/session?project=${encodeURIComponent(selectedProject)}`)
+      .then(r => r.json())
+      .then(data => setAutoSessionId(data.conversationId || null))
+      .catch(() => setAutoSessionId(null));
+
+    // Get all sessions for picker
+    fetch(`/api/claude-sessions/${encodeURIComponent(selectedProject)}`)
+      .then(r => r.json())
+      .then((s: SessionInfo[]) => setSessions(s))
+      .catch(() => setSessions([]));
+  }, [selectedProject]);
+
+  const getScheduledAt = (): string | undefined => {
+    if (scheduleMode === 'now') return undefined;
+    if (scheduleMode === 'delay') {
+      return new Date(Date.now() + delayMinutes * 60_000).toISOString();
+    }
+    if (scheduleMode === 'time' && scheduledTime) {
+      return new Date(scheduledTime).toISOString();
+    }
+    return undefined;
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!selectedProject) return;
+    // Monitor mode requires session selection; prompt mode requires prompt text
+    if (taskMode === 'prompt' && !prompt.trim()) return;
+    if (taskMode === 'monitor' && sessionMode !== 'select') return;
+
+    const data: Parameters<typeof onCreate>[0] = {
+      projectName: selectedProject,
+      prompt: taskMode === 'monitor' ? `Monitor session ${selectedSessionId}` : prompt.trim(),
+      priority,
+      scheduledAt: getScheduledAt(),
+      mode: taskMode,
+    };
+
+    if (sessionMode === 'new') {
+      data.newSession = true;
+    } else if (sessionMode === 'select' && selectedSessionId) {
+      data.conversationId = selectedSessionId;
+    }
+
+    if (taskMode === 'monitor') {
+      const wc: WatchConfig = {
+        condition: watchCondition,
+        action: watchAction,
+        repeat: watchRepeat,
+      };
+      if (watchCondition === 'keyword') wc.keyword = watchKeyword;
+      if (watchCondition === 'idle') wc.idleMinutes = watchIdleMinutes;
+      if (watchAction !== 'notify') wc.actionPrompt = watchActionPrompt;
+      data.watchConfig = wc;
+    }
+
+    onCreate(data);
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50" onClick={onClose}>
+      <div className="bg-[var(--bg-secondary)] border border-[var(--border)] rounded-lg w-[560px] max-h-[80vh] overflow-auto" onClick={e => e.stopPropagation()}>
+        <div className="p-4 border-b border-[var(--border)]">
+          <h2 className="text-sm font-semibold">New Task</h2>
+          <p className="text-[11px] text-[var(--text-secondary)] mt-0.5">
+            Submit a task for Claude Code to work on autonomously
+          </p>
+        </div>
+
+        <form onSubmit={handleSubmit} className="p-4 space-y-4">
+          {/* Project */}
+          <div>
+            <label className="text-[11px] text-[var(--text-secondary)] block mb-1">Project</label>
+            <select
+              value={selectedProject}
+              onChange={e => { setSelectedProject(e.target.value); setSelectedSessionId(null); }}
+              className="w-full px-3 py-2 bg-[var(--bg-tertiary)] border border-[var(--border)] rounded text-xs text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent)]"
+            >
+              {projects.map(p => (
+                <option key={p.name} value={p.name}>
+                  {p.name} {p.language ? `(${p.language})` : ''}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {/* Task Mode */}
+          <div>
+            <label className="text-[11px] text-[var(--text-secondary)] block mb-1">Mode</label>
+            <div className="flex gap-2">
+              {([
+                { value: 'prompt' as const, label: 'Prompt', desc: 'Send a message to Claude' },
+                { value: 'monitor' as const, label: 'Monitor', desc: 'Watch a session, trigger actions' },
+              ]).map(m => (
+                <button
+                  key={m.value}
+                  type="button"
+                  onClick={() => {
+                    setTaskMode(m.value);
+                    if (m.value === 'monitor') setSessionMode('select');
+                  }}
+                  className={`text-[11px] px-3 py-1 rounded border transition-colors ${
+                    taskMode === m.value
+                      ? 'border-[var(--accent)] text-[var(--accent)] bg-[var(--accent)]/10'
+                      : 'border-[var(--border)] text-[var(--text-secondary)] hover:border-[var(--text-secondary)]'
+                  }`}
+                >
+                  {m.label}
+                </button>
+              ))}
+            </div>
+            <p className="text-[10px] text-[var(--text-secondary)] mt-1">
+              {taskMode === 'prompt' ? 'Send a message to Claude to work on autonomously' : 'Watch a session and trigger actions on conditions'}
+            </p>
+          </div>
+
+          {/* Session */}
+          <div>
+            <label className="text-[11px] text-[var(--text-secondary)] block mb-1">Session</label>
+            {taskMode === 'prompt' && (
+              <div className="flex gap-2">
+                {(['auto', 'select', 'new'] as const).map(mode => (
+                  <button
+                    key={mode}
+                    type="button"
+                    onClick={() => setSessionMode(mode)}
+                    className={`text-[11px] px-3 py-1 rounded border transition-colors ${
+                      sessionMode === mode
+                        ? 'border-[var(--accent)] text-[var(--accent)] bg-[var(--accent)]/10'
+                        : 'border-[var(--border)] text-[var(--text-secondary)] hover:border-[var(--text-secondary)]'
+                    }`}
+                  >
+                    {mode === 'auto' ? 'Auto Continue' : mode === 'select' ? 'Choose Session' : 'New Session'}
+                  </button>
+                ))}
+              </div>
+            )}
+            {taskMode === 'monitor' && (
+              <p className="text-[10px] text-[var(--text-secondary)]">Select a session to monitor</p>
+            )}
+
+            {sessionMode === 'auto' && taskMode === 'prompt' && (
+              <p className="text-[10px] text-[var(--text-secondary)] mt-1">
+                {autoSessionId
+                  ? <>Will continue <span className="font-mono text-[var(--accent)]">{autoSessionId.slice(0, 12)}</span></>
+                  : 'No existing session — will start new'}
+              </p>
+            )}
+
+            {sessionMode === 'select' && (
+              <div className="mt-2 max-h-32 overflow-y-auto border border-[var(--border)] rounded">
+                {sessions.length === 0 ? (
+                  <p className="text-[10px] text-[var(--text-secondary)] p-2">No sessions found</p>
+                ) : sessions.map(s => (
+                  <button
+                    key={s.sessionId}
+                    type="button"
+                    onClick={() => setSelectedSessionId(s.sessionId)}
+                    className={`w-full text-left px-2 py-1.5 text-[10px] hover:bg-[var(--bg-tertiary)] transition-colors ${
+                      selectedSessionId === s.sessionId ? 'bg-[var(--accent)]/10 border-l-2 border-l-[var(--accent)]' : ''
+                    }`}
+                  >
+                    <div className="text-[var(--text-primary)] truncate">
+                      {s.summary || s.firstPrompt?.slice(0, 50) || s.sessionId.slice(0, 8)}
+                    </div>
+                    <div className="flex gap-2 mt-0.5">
+                      <span className="font-mono text-[var(--text-secondary)]">{s.sessionId.slice(0, 8)}</span>
+                      {s.gitBranch && <span className="text-[var(--accent)]">{s.gitBranch}</span>}
+                      {s.modified && <span className="text-[var(--text-secondary)]">{new Date(s.modified).toLocaleDateString()}</span>}
+                    </div>
+                  </button>
+                ))}
+              </div>
+            )}
+
+            {sessionMode === 'new' && (
+              <p className="text-[10px] text-[var(--text-secondary)] mt-1">
+                Will start a fresh session with no prior context
+              </p>
+            )}
+          </div>
+
+          {/* Monitor Config — only in monitor mode */}
+          {taskMode === 'monitor' && (
+            <div className="space-y-3 p-3 bg-[var(--bg-tertiary)] rounded border border-[var(--border)]">
+              <div>
+                <label className="text-[11px] text-[var(--text-secondary)] block mb-1">Trigger when</label>
+                <div className="flex gap-1 flex-wrap">
+                  {([
+                    { value: 'change' as const, label: 'Content changes' },
+                    { value: 'idle' as const, label: 'Session idle' },
+                    { value: 'complete' as const, label: 'Session completes' },
+                    { value: 'error' as const, label: 'Error occurs' },
+                    { value: 'keyword' as const, label: 'Keyword found' },
+                  ]).map(c => (
+                    <button
+                      key={c.value}
+                      type="button"
+                      onClick={() => setWatchCondition(c.value)}
+                      className={`text-[10px] px-2 py-0.5 rounded border transition-colors ${
+                        watchCondition === c.value
+                          ? 'border-[var(--accent)] text-[var(--accent)] bg-[var(--accent)]/10'
+                          : 'border-[var(--border)] text-[var(--text-secondary)] hover:border-[var(--text-secondary)]'
+                      }`}
+                    >
+                      {c.label}
+                    </button>
+                  ))}
+                </div>
+                {watchCondition === 'keyword' && (
+                  <input
+                    type="text"
+                    value={watchKeyword}
+                    onChange={e => setWatchKeyword(e.target.value)}
+                    placeholder="Enter keyword to watch for..."
+                    className="mt-2 w-full px-2 py-1 bg-[var(--bg-secondary)] border border-[var(--border)] rounded text-xs text-[var(--text-primary)] focus:outline-none"
+                  />
+                )}
+                {watchCondition === 'idle' && (
+                  <div className="flex items-center gap-2 mt-2">
+                    <span className="text-[10px] text-[var(--text-secondary)]">Idle for</span>
+                    <input
+                      type="number"
+                      value={watchIdleMinutes}
+                      onChange={e => setWatchIdleMinutes(Number(e.target.value))}
+                      min={1}
+                      className="w-16 px-2 py-1 bg-[var(--bg-secondary)] border border-[var(--border)] rounded text-xs text-[var(--text-primary)] focus:outline-none"
+                    />
+                    <span className="text-[10px] text-[var(--text-secondary)]">minutes</span>
+                  </div>
+                )}
+              </div>
+
+              <div>
+                <label className="text-[11px] text-[var(--text-secondary)] block mb-1">Then</label>
+                <div className="flex gap-1 flex-wrap">
+                  {([
+                    { value: 'notify' as const, label: 'Send Telegram notification' },
+                    { value: 'message' as const, label: 'Send message to session' },
+                    { value: 'task' as const, label: 'Create new task' },
+                  ]).map(a => (
+                    <button
+                      key={a.value}
+                      type="button"
+                      onClick={() => setWatchAction(a.value)}
+                      className={`text-[10px] px-2 py-0.5 rounded border transition-colors ${
+                        watchAction === a.value
+                          ? 'border-[var(--accent)] text-[var(--accent)] bg-[var(--accent)]/10'
+                          : 'border-[var(--border)] text-[var(--text-secondary)] hover:border-[var(--text-secondary)]'
+                      }`}
+                    >
+                      {a.label}
+                    </button>
+                  ))}
+                </div>
+                {watchAction !== 'notify' && (
+                  <textarea
+                    value={watchActionPrompt}
+                    onChange={e => setWatchActionPrompt(e.target.value)}
+                    placeholder={watchAction === 'message' ? 'Message to send to the session...' : 'Prompt for the new task...'}
+                    rows={2}
+                    className="mt-2 w-full px-2 py-1 bg-[var(--bg-secondary)] border border-[var(--border)] rounded text-xs text-[var(--text-primary)] resize-none focus:outline-none"
+                  />
+                )}
+              </div>
+
+              <label className="flex items-center gap-2 cursor-pointer">
+                <input
+                  type="checkbox"
+                  checked={watchRepeat}
+                  onChange={e => setWatchRepeat(e.target.checked)}
+                  className="rounded"
+                />
+                <span className="text-[10px] text-[var(--text-secondary)]">Keep watching after trigger (repeat)</span>
+              </label>
+            </div>
+          )}
+
+          {/* Task prompt — only in prompt mode */}
+          {taskMode === 'prompt' && (
+            <div>
+              <label className="text-[11px] text-[var(--text-secondary)] block mb-1">What should Claude do?</label>
+              <textarea
+                value={prompt}
+                onChange={e => setPrompt(e.target.value)}
+                placeholder="e.g. Refactor the authentication module to use JWT tokens..."
+                rows={5}
+                className="w-full px-3 py-2 bg-[var(--bg-tertiary)] border border-[var(--border)] rounded text-xs text-[var(--text-primary)] resize-none focus:outline-none focus:border-[var(--accent)]"
+                autoFocus
+              />
+            </div>
+          )}
+
+          {/* Schedule */}
+          <div>
+            <label className="text-[11px] text-[var(--text-secondary)] block mb-1">When</label>
+            <div className="flex gap-2">
+              {(['now', 'delay', 'time'] as const).map(mode => (
+                <button
+                  key={mode}
+                  type="button"
+                  onClick={() => setScheduleMode(mode)}
+                  className={`text-[11px] px-3 py-1 rounded border transition-colors ${
+                    scheduleMode === mode
+                      ? 'border-[var(--accent)] text-[var(--accent)] bg-[var(--accent)]/10'
+                      : 'border-[var(--border)] text-[var(--text-secondary)] hover:border-[var(--text-secondary)]'
+                  }`}
+                >
+                  {mode === 'now' ? 'Now' : mode === 'delay' ? 'Delay' : 'Schedule'}
+                </button>
+              ))}
+            </div>
+
+            {scheduleMode === 'delay' && (
+              <div className="flex items-center gap-2 mt-2">
+                <span className="text-[10px] text-[var(--text-secondary)]">Run in</span>
+                <input
+                  type="number"
+                  value={delayMinutes}
+                  onChange={e => setDelayMinutes(Number(e.target.value))}
+                  min={1}
+                  className="w-20 px-2 py-1 bg-[var(--bg-tertiary)] border border-[var(--border)] rounded text-xs text-[var(--text-primary)] focus:outline-none"
+                />
+                <span className="text-[10px] text-[var(--text-secondary)]">minutes</span>
+              </div>
+            )}
+
+            {scheduleMode === 'time' && (
+              <div className="mt-2">
+                <input
+                  type="datetime-local"
+                  value={scheduledTime}
+                  onChange={e => setScheduledTime(e.target.value)}
+                  className="px-2 py-1 bg-[var(--bg-tertiary)] border border-[var(--border)] rounded text-xs text-[var(--text-primary)] focus:outline-none"
+                />
+              </div>
+            )}
+          </div>
+
+          {/* Priority */}
+          <div>
+            <label className="text-[11px] text-[var(--text-secondary)] block mb-1">Priority</label>
+            <div className="flex gap-2">
+              {[
+                { value: 0, label: 'Normal' },
+                { value: 1, label: 'High' },
+                { value: 2, label: 'Urgent' },
+              ].map(p => (
+                <button
+                  key={p.value}
+                  type="button"
+                  onClick={() => setPriority(p.value)}
+                  className={`text-[11px] px-3 py-1 rounded border transition-colors ${
+                    priority === p.value
+                      ? 'border-[var(--accent)] text-[var(--accent)] bg-[var(--accent)]/10'
+                      : 'border-[var(--border)] text-[var(--text-secondary)] hover:border-[var(--text-secondary)]'
+                  }`}
+                >
+                  {p.label}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Actions */}
+          <div className="flex justify-end gap-2 pt-2">
+            <button type="button" onClick={onClose} className="text-xs px-3 py-1.5 text-[var(--text-secondary)] hover:text-[var(--text-primary)]">
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={!selectedProject || (taskMode === 'prompt' && !prompt.trim()) || (taskMode === 'monitor' && !selectedSessionId)}
+              className="text-xs px-4 py-1.5 bg-[var(--accent)] text-white rounded hover:opacity-90 disabled:opacity-50"
+            >
+              {taskMode === 'monitor' ? 'Start Monitor' : scheduleMode === 'now' ? 'Submit Task' : 'Schedule Task'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

package/components/ProjectList.tsx

@@ -0,0 +1,108 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+
+interface LocalProject {
+  name: string;
+  path: string;
+  hasGit: boolean;
+  hasClaudeMd: boolean;
+  language: string | null;
+  lastModified: string;
+}
+
+interface ClaudeProcess {
+  id: string;
+  projectName: string;
+  status: string;
+}
+
+const langIcons: Record<string, string> = {
+  java: 'JV',
+  kotlin: 'KT',
+  typescript: 'TS',
+  python: 'PY',
+  go: 'GO',
+  rust: 'RS',
+};
+
+export default function ProjectList({
+  onLaunch,
+  claudeProcesses,
+}: {
+  onLaunch: (projectName: string) => void;
+  claudeProcesses: ClaudeProcess[];
+}) {
+  const [projects, setProjects] = useState<LocalProject[]>([]);
+  const [filter, setFilter] = useState('');
+
+  useEffect(() => {
+    fetch('/api/projects').then(r => r.json()).then(setProjects);
+  }, []);
+
+  const filtered = projects.filter(p =>
+    p.name.toLowerCase().includes(filter.toLowerCase())
+  );
+
+  const getProcessForProject = (name: string) =>
+    claudeProcesses.find(p => p.projectName === name && p.status === 'running');
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="p-3 border-b border-[var(--border)]">
+        <input
+          value={filter}
+          onChange={e => setFilter(e.target.value)}
+          placeholder="Filter projects..."
+          className="w-full px-2 py-1 bg-[var(--bg-tertiary)] border border-[var(--border)] rounded text-xs text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent)]"
+        />
+      </div>
+      <div className="flex-1 overflow-y-auto">
+        {filtered.map(p => {
+          const proc = getProcessForProject(p.name);
+          return (
+            <div
+              key={p.name}
+              className="flex items-center justify-between px-3 py-2 border-b border-[var(--border)] hover:bg-[var(--bg-tertiary)] group"
+            >
+              <div className="min-w-0">
+                <div className="flex items-center gap-2">
+                  {p.language && (
+                    <span className="text-[9px] px-1 py-0.5 bg-[var(--bg-tertiary)] rounded text-[var(--text-secondary)] font-mono">
+                      {langIcons[p.language] || p.language.slice(0, 2).toUpperCase()}
+                    </span>
+                  )}
+                  <span className="text-xs font-medium truncate">{p.name}</span>
+                  {p.hasClaudeMd && (
+                    <span className="text-[9px] text-[var(--accent)]" title="Has CLAUDE.md">C</span>
+                  )}
+                </div>
+              </div>
+              <div className="flex items-center gap-1 shrink-0">
+                {proc ? (
+                  <span className="text-[9px] text-[var(--green)]">● running</span>
+                ) : (
+                  <button
+                    onClick={() => onLaunch(p.name)}
+                    className="text-[10px] px-2 py-0.5 bg-[var(--accent)] text-white rounded opacity-0 group-hover:opacity-100 transition-opacity"
+                  >
+                    Launch Claude
+                  </button>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+      {filtered.length === 0 && projects.length === 0 && (
+        <div className="p-4 text-center text-xs text-[var(--text-secondary)] space-y-2">
+          <p>No projects found</p>
+          <p className="text-[10px]">Go to Settings to add project directories</p>
+        </div>
+      )}
+      <div className="p-2 border-t border-[var(--border)] text-[10px] text-[var(--text-secondary)]">
+        {projects.length} projects
+      </div>
+    </div>
+  );
+}

package/components/SessionList.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import type { Session } from '@/src/types';
+
+const statusConfig = {
+  running: { icon: '●', color: 'text-[var(--green)]' },
+  idle: { icon: '●', color: 'text-[var(--accent)]' },
+  paused: { icon: '○', color: 'text-[var(--yellow)]' },
+  archived: { icon: '○', color: 'text-[var(--text-secondary)]' },
+  error: { icon: '●', color: 'text-[var(--red)]' },
+};
+
+const providerLabels: Record<string, string> = {
+  anthropic: 'Claude',
+  google: 'Gemini',
+  openai: 'OpenAI',
+  grok: 'Grok',
+};
+
+export default function SessionList({
+  sessions,
+  activeId,
+  onSelect,
+}: {
+  sessions: Session[];
+  activeId: string | null;
+  onSelect: (id: string) => void;
+}) {
+  return (
+    <div className="flex-1 overflow-y-auto">
+      {sessions.map(s => {
+        const cfg = statusConfig[s.status] || statusConfig.idle;
+        const isActive = s.id === activeId;
+
+        return (
+          <button
+            key={s.id}
+            onClick={() => onSelect(s.id)}
+            className={`w-full text-left px-3 py-2.5 border-b border-[var(--border)] hover:bg-[var(--bg-tertiary)] transition-colors ${
+              isActive ? 'bg-[var(--bg-tertiary)] border-l-2 border-l-[var(--accent)]' : ''
+            }`}
+          >
+            <div className="flex items-center gap-2">
+              <span className={`text-xs ${cfg.color}`}>{cfg.icon}</span>
+              <span className="text-sm font-medium truncate">{s.name}</span>
+            </div>
+            <div className="flex items-center gap-2 mt-0.5 ml-4">
+              <span className="text-[10px] text-[var(--text-secondary)]">
+                {providerLabels[s.provider] || s.provider}
+              </span>
+              <span className="text-[10px] text-[var(--text-secondary)]">
+                {s.memory.strategy}
+              </span>
+              <span className="text-[10px] text-[var(--text-secondary)]">
+                {s.messageCount}msg
+              </span>
+            </div>
+            {s.lastMessage && (
+              <p className="text-[10px] text-[var(--text-secondary)] mt-0.5 ml-4 truncate">
+                {s.lastMessage.slice(0, 60)}
+              </p>
+            )}
+          </button>
+        );
+      })}
+
+      {sessions.length === 0 && (
+        <div className="p-4 text-center text-xs text-[var(--text-secondary)]">
+          No sessions yet
+        </div>
+      )}
+    </div>
+  );
+}