shraga 0.0.3 → 0.1.1

package/src/client/components/schedules/ScheduleEditor.tsx

@@ -0,0 +1,264 @@
+import { useMemo, useState } from 'react';
+import cronstrue from 'cronstrue';
+import type { Schedule, Trigger, Task } from '@/lib/schedule-types';
+import { Button } from '../ui/button';
+import { Input } from '../ui/input';
+import { Textarea } from '../ui/textarea';
+import { AutocompleteTextarea } from '../AutocompleteTextarea';
+
+interface Props {
+  initial?: Schedule;
+  onSave: (s: Partial<Schedule>) => Promise<void>;
+  onCancel: () => void;
+  skills?: string[];
+  workspaceFiles?: string[];
+}
+
+function localDateTimeValue(ts?: number): string {
+  const d = new Date(ts ?? Date.now() + 60_000);
+  const pad = (n: number) => String(n).padStart(2, '0');
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+}
+
+const INTERVAL_PRESETS = [
+  { label: '1 min', ms: 60_000 },
+  { label: '5 min', ms: 5 * 60_000 },
+  { label: '15 min', ms: 15 * 60_000 },
+  { label: '1 hour', ms: 60 * 60_000 },
+  { label: '6 hours', ms: 6 * 60 * 60_000 },
+  { label: '1 day', ms: 24 * 60 * 60_000 },
+];
+
+const CRON_PRESETS = [
+  { label: 'Every hour', expr: '0 * * * *' },
+  { label: 'Daily 9am', expr: '0 9 * * *' },
+  { label: 'Weekdays 9am', expr: '0 9 * * 1-5' },
+  { label: 'Mondays 9am', expr: '0 9 * * 1' },
+];
+
+/** Edits the optional `match` filter on an event trigger: a map of payload
+ *  dot-paths → expected values. All entries must match (AND). Empty → fires on any. */
+function MatchEditor({ match, onChange }: { match: Record<string, string>; onChange: (m: Record<string, string>) => void }) {
+  const rows = Object.entries(match);
+  const setRow = (i: number, key: string, value: string) => {
+    const next: Record<string, string> = {};
+    rows.forEach(([k, v], idx) => { next[idx === i ? key : k] = idx === i ? value : v; });
+    onChange(next);
+  };
+  const removeRow = (i: number) => onChange(Object.fromEntries(rows.filter((_, idx) => idx !== i)));
+  const addRow = () => onChange({ ...match, '': '' });
+
+  return (
+    <div className="space-y-1">
+      <label className="text-xs text-muted-foreground">Match filter (optional — all must match)</label>
+      {rows.map(([k, v], i) => (
+        <div key={i} className="flex gap-1">
+          <Input className="text-xs font-mono" value={k} onChange={(e) => setRow(i, e.target.value, v)} placeholder="payload.path (e.g. type)" />
+          <Input className="text-xs font-mono" value={v} onChange={(e) => setRow(i, k, e.target.value)} placeholder="value (e.g. invoice.paid)" />
+          <Button type="button" variant="ghost" size="sm" onClick={() => removeRow(i)}>×</Button>
+        </div>
+      ))}
+      <Button type="button" variant="outline" size="sm" onClick={addRow}>+ Add filter</Button>
+    </div>
+  );
+}
+
+export function ScheduleEditor({ initial, onSave, onCancel, skills = [], workspaceFiles = [] }: Props) {
+  const tz = useMemo(() => Intl.DateTimeFormat().resolvedOptions().timeZone, []);
+  const [name, setName] = useState(initial?.name ?? 'New schedule');
+  const [enabled, setEnabled] = useState(initial?.enabled ?? true);
+  const [trigger, setTrigger] = useState<Trigger>(
+    initial?.trigger ?? { kind: 'cron', expr: '0 9 * * *', tz }
+  );
+  const [task, setTask] = useState<Task>(
+    initial?.task ?? { kind: 'prompt', prompt: '' }
+  );
+  const [saving, setSaving] = useState(false);
+  const [err, setErr] = useState<string | null>(null);
+
+  const cronDesc = useMemo(() => {
+    if (trigger.kind !== 'cron') return '';
+    try { return cronstrue.toString(trigger.expr); } catch { return 'Invalid cron'; }
+  }, [trigger]);
+
+  const save = async () => {
+    setSaving(true);
+    setErr(null);
+    try {
+      await onSave({ name, enabled, trigger, task });
+    } catch (e: any) {
+      setErr(e.message);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="space-y-1">
+        <label className="text-xs text-muted-foreground">Name</label>
+        <Input value={name} onChange={(e) => setName(e.target.value)} placeholder="e.g. Daily standup summary" />
+      </div>
+
+      {/* Trigger */}
+      <div className="space-y-2">
+        <label className="text-xs text-muted-foreground">Trigger</label>
+        <div className="flex gap-1">
+          {(['once', 'interval', 'cron', 'event'] as const).map((k) => (
+            <Button
+              key={k}
+              type="button"
+              variant={trigger.kind === k ? 'default' : 'outline'}
+              size="sm"
+              onClick={() => {
+                if (k === 'once') setTrigger({ kind: 'once', at: Date.now() + 5 * 60_000 });
+                else if (k === 'interval') setTrigger({ kind: 'interval', everyMs: 60 * 60_000 });
+                else if (k === 'event') setTrigger({ kind: 'event', source: '' });
+                else setTrigger({ kind: 'cron', expr: '0 9 * * *', tz });
+              }}
+            >
+              {k}
+            </Button>
+          ))}
+        </div>
+
+        {trigger.kind === 'once' && (
+          <Input
+            type="datetime-local"
+            value={localDateTimeValue(trigger.at)}
+            onChange={(e) => {
+              const v = new Date(e.target.value);
+              if (!isNaN(v.getTime())) setTrigger({ kind: 'once', at: v.getTime() });
+            }}
+          />
+        )}
+
+        {trigger.kind === 'interval' && (
+          <div className="space-y-2">
+            <div className="flex gap-1 flex-wrap">
+              {INTERVAL_PRESETS.map((p) => (
+                <Button
+                  key={p.ms}
+                  type="button"
+                  variant={trigger.everyMs === p.ms ? 'default' : 'outline'}
+                  size="sm"
+                  onClick={() => setTrigger({ kind: 'interval', everyMs: p.ms })}
+                >
+                  {p.label}
+                </Button>
+              ))}
+            </div>
+            <Input
+              type="number"
+              min={1}
+              value={Math.round(trigger.everyMs / 1000)}
+              onChange={(e) => setTrigger({ kind: 'interval', everyMs: Math.max(1, Number(e.target.value)) * 1000 })}
+              placeholder="seconds"
+            />
+            <p className="text-xs text-muted-foreground">Every {Math.round(trigger.everyMs / 1000)}s</p>
+          </div>
+        )}
+
+        {trigger.kind === 'cron' && (
+          <div className="space-y-2">
+            <div className="flex gap-1 flex-wrap">
+              {CRON_PRESETS.map((p) => (
+                <Button
+                  key={p.expr}
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setTrigger({ kind: 'cron', expr: p.expr, tz })}
+                >
+                  {p.label}
+                </Button>
+              ))}
+            </div>
+            <Input
+              className="font-mono text-xs"
+              value={trigger.expr}
+              onChange={(e) => setTrigger({ ...trigger, expr: e.target.value })}
+              placeholder="0 9 * * *"
+            />
+            <Input
+              className="text-xs"
+              value={trigger.tz}
+              onChange={(e) => setTrigger({ ...trigger, tz: e.target.value })}
+              placeholder="IANA timezone"
+            />
+            <p className="text-xs text-muted-foreground">{cronDesc} ({trigger.tz})</p>
+          </div>
+        )}
+
+        {trigger.kind === 'event' && (
+          <div className="space-y-2">
+            <Input
+              value={trigger.source}
+              onChange={(e) => setTrigger({ ...trigger, source: e.target.value })}
+              placeholder="Event source (e.g. stripe, github, deploy)"
+            />
+            <p className="text-xs text-muted-foreground">
+              Fires when an event with this source arrives via <code>POST /api/events/{trigger.source || ':source'}</code> or <code>ctx.emitEvent()</code>.
+            </p>
+            <MatchEditor
+              match={trigger.match ?? {}}
+              onChange={(match) => setTrigger({ ...trigger, match })}
+            />
+          </div>
+        )}
+      </div>
+
+      {/* Task */}
+      <div className="space-y-2">
+        <label className="text-xs text-muted-foreground">Task</label>
+        <div className="flex gap-1">
+          {(['prompt', 'bash'] as const).map((k) => (
+            <Button
+              key={k}
+              type="button"
+              variant={task.kind === k ? 'default' : 'outline'}
+              size="sm"
+              onClick={() => setTask(k === 'prompt' ? { kind: 'prompt', prompt: '' } : { kind: 'bash', command: '' })}
+            >
+              {k === 'prompt' ? 'Prompt' : 'Bash command'}
+            </Button>
+          ))}
+        </div>
+        {task.kind === 'prompt' ? (
+          <AutocompleteTextarea
+            rows={5}
+            value={task.prompt}
+            onChange={(val) => setTask({ ...task, prompt: val })}
+            placeholder="What should the agent do? (@ for skills, / for commands)"
+            skills={skills}
+            workspaceFiles={workspaceFiles}
+            autoResize={false}
+            className="flex min-h-[80px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          />
+        ) : task.kind === 'bash' ? (
+          <Textarea
+            rows={3}
+            className="font-mono text-xs"
+            value={task.command}
+            onChange={(e) => setTask({ ...task, command: e.target.value })}
+            placeholder="ls -la ~/"
+          />
+        ) : (
+          <p className="text-xs text-muted-foreground">Command: {task.command}</p>
+        )}
+      </div>
+
+      <div className="flex items-center gap-2">
+        <input id="sched-enabled" type="checkbox" checked={enabled} onChange={(e) => setEnabled(e.target.checked)} />
+        <label htmlFor="sched-enabled" className="text-sm">Enabled</label>
+      </div>
+
+      {err && <p className="text-xs text-destructive">{err}</p>}
+
+      <div className="flex justify-end gap-2 pt-2">
+        <Button variant="outline" onClick={onCancel} disabled={saving}>Cancel</Button>
+        <Button onClick={save} disabled={saving}>{saving ? 'Saving…' : 'Save'}</Button>
+      </div>
+    </div>
+  );
+}

package/src/client/components/schedules/ScheduleList.tsx

@@ -0,0 +1,271 @@
+import { useState } from 'react';
+import cronstrue from 'cronstrue';
+import { Loader2, Play, Square, Pencil, Trash2, Plus } from 'lucide-react';
+import type { Schedule } from '@/lib/schedule-types';
+import { Button } from '../ui/button';
+
+type FilterKey = 'mine' | 'others' | 'system';
+type TriggerFilterKey = 'once' | 'interval' | 'cron' | 'event';
+
+function triggerKind(s: Schedule): TriggerFilterKey {
+  return s.trigger.kind as TriggerFilterKey;
+}
+
+interface Props {
+  schedules: Schedule[];
+  currentUserUid?: string;
+  onCreate: () => void;
+  onEdit: (s: Schedule) => void;
+  onDelete: (id: string) => void;
+  onToggle: (id: string, enabled: boolean) => void;
+  onRunNow: (id: string, override?: string) => Promise<string | undefined>;
+  onCancel: (id: string) => void;
+  onOpenRun: (sessionId: string) => void;
+  runningIds?: Set<string>;
+}
+
+function describeTrigger(s: Schedule): string {
+  const t = s.trigger;
+  if (t.kind === 'once') return `Once at ${new Date(t.at).toLocaleString()}`;
+  if (t.kind === 'interval') {
+    const sec = Math.round(t.everyMs / 1000);
+    if (sec >= 86400) return `Every ${Math.round(sec / 86400)}d`;
+    if (sec >= 3600) return `Every ${Math.round(sec / 3600)}h`;
+    if (sec >= 60) return `Every ${Math.round(sec / 60)}m`;
+    return `Every ${sec}s`;
+  }
+  if (t.kind === 'event') {
+    const filters = t.match ? Object.entries(t.match).map(([k, v]) => `${k}=${v}`).join(', ') : '';
+    return `On event "${t.source}"${filters ? ` where ${filters}` : ''}`;
+  }
+  try {
+    const tz = t.tz || 'UTC';
+    const utcDesc = formatCronUTC(t.expr, tz);
+    const humanDesc = cronstrue.toString(t.expr);
+    const tzLabel = tz === 'UTC' ? 'UTC' : tz.split('/').pop()?.replace(/_/g, ' ') || tz;
+    return utcDesc ? `${utcDesc} (${humanDesc} ${tzLabel})` : `${humanDesc} ${tzLabel}`;
+  } catch { return t.expr; }
+}
+
+function formatCronUTC(expr: string, tz: string): string | null {
+  try {
+    const parts = expr.split(/\s+/);
+    if (parts.length < 5) return null;
+    const min = parseInt(parts[0], 10);
+    const hour = parseInt(parts[1], 10);
+    if (isNaN(min) || isNaN(hour)) return null;
+    // Cron hour:min is in `tz` — convert to UTC
+    const now = new Date();
+    const tzOffset = new Date(now.toLocaleString('en-US', { timeZone: tz })).getTime()
+      - new Date(now.toLocaleString('en-US', { timeZone: 'UTC' })).getTime();
+    const ref = new Date();
+    ref.setUTCHours(hour, min, 0, 0);
+    const utc = new Date(ref.getTime() - tzOffset);
+    return utc.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit', hour12: false, timeZone: 'UTC' });
+  } catch { return null; }
+}
+
+function relTime(ts?: number): string {
+  if (!ts) return '—';
+  const diff = ts - Date.now();
+  const abs = Math.abs(diff);
+  const mins = Math.round(abs / 60000);
+  if (abs < 60000) return diff > 0 ? 'in <1m' : '<1m ago';
+  if (mins < 60) return diff > 0 ? `in ${mins}m` : `${mins}m ago`;
+  const hrs = Math.round(mins / 60);
+  if (hrs < 24) return diff > 0 ? `in ${hrs}h` : `${hrs}h ago`;
+  const days = Math.round(hrs / 24);
+  return diff > 0 ? `in ${days}d` : `${days}d ago`;
+}
+
+const STATUS_COLORS: Record<string, string> = {
+  ok: 'bg-green-50 text-green-700 dark:bg-green-950/50 dark:text-green-300',
+  error: 'bg-red-50 text-red-700 dark:bg-red-950/50 dark:text-red-300',
+  running: 'bg-blue-50 text-blue-700 dark:bg-blue-950/50 dark:text-blue-300',
+  aborted: 'bg-amber-50 text-amber-700 dark:bg-amber-950/50 dark:text-amber-300',
+};
+
+function isSystemSchedule(s: Schedule): boolean {
+  return s.scope === 'system';
+}
+
+function overrideLabel(kind: string): string {
+  if (kind === 'prompt') return 'Additional instructions (appended to prompt)';
+  if (kind === 'bash') return 'Override command';
+  return 'Override args';
+}
+
+function overridePlaceholder(kind: string): string {
+  if (kind === 'prompt') return 'e.g. Dry run — compose the message but do NOT post to Slack';
+  if (kind === 'bash') return 'e.g. bun run report:fb-ads-spend --dry-run';
+  return 'e.g. --dry-run';
+}
+
+function classifySchedule(s: Schedule, currentUid?: string): FilterKey {
+  if (s.scope === 'system') return 'system';
+  return s.createdBy?.uid === currentUid ? 'mine' : 'others';
+}
+
+export function ScheduleList({ schedules, currentUserUid, onCreate, onEdit, onDelete, onToggle, onRunNow, onCancel, onOpenRun, runningIds = new Set() }: Props) {
+  const [runModalId, setRunModalId] = useState<string | null>(null);
+  const [overrideText, setOverrideText] = useState('');
+  const [filters, setFilters] = useState<Record<FilterKey, boolean>>({ mine: true, others: true, system: true });
+  const [triggerFilters, setTriggerFilters] = useState<Record<TriggerFilterKey, boolean>>({ once: true, interval: true, cron: true, event: true });
+  const [running, setRunning] = useState(false);
+
+  const toggleFilter = (key: FilterKey) => setFilters((f) => {
+    const allOn = Object.values(f).every(Boolean);
+    if (allOn) return { mine: false, others: false, system: false, [key]: true };
+    const next = { ...f, [key]: !f[key] };
+    if (!Object.values(next).some(Boolean)) return { mine: true, others: true, system: true };
+    return next;
+  });
+  const toggleTriggerFilter = (key: TriggerFilterKey) => setTriggerFilters((f) => {
+    const allOn = Object.values(f).every(Boolean);
+    if (allOn) return { once: false, interval: false, cron: false, event: false, [key]: true };
+    const next = { ...f, [key]: !f[key] };
+    if (!Object.values(next).some(Boolean)) return { once: true, interval: true, cron: true, event: true };
+    return next;
+  });
+
+  const filtered = schedules.filter((s) => filters[classifySchedule(s, currentUserUid)] && triggerFilters[triggerKind(s)]);
+
+  const handlePlay = (s: Schedule) => {
+    const saved = localStorage.getItem(`schedule-override-${s.id}`);
+    setOverrideText(saved ?? '');
+    setRunModalId(s.id);
+  };
+
+  const handleRunConfirm = async () => {
+    if (!runModalId) return;
+    setRunning(true);
+    try {
+      const override = overrideText.trim() || undefined;
+      if (override) {
+        localStorage.setItem(`schedule-override-${runModalId}`, override);
+      }
+      const sessionId = await onRunNow(runModalId, override);
+      setRunModalId(null);
+      setOverrideText('');
+      if (sessionId) onOpenRun(sessionId);
+    } finally {
+      setRunning(false);
+    }
+  };
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between gap-2 flex-wrap">
+        <div className="flex gap-1 flex-wrap">
+          {(['mine', 'others', 'system'] as const).map((key) => (
+            <button
+              key={key}
+              onClick={() => toggleFilter(key)}
+              className={`text-[11px] px-2 py-0.5 rounded-full border transition-colors ${filters[key] ? 'bg-primary text-primary-foreground border-primary' : 'bg-transparent text-muted-foreground border-border hover:border-muted-foreground'}`}
+            >
+              {key}
+            </button>
+          ))}
+          <span className="w-px h-4 bg-border mx-1" />
+          {(['once', 'interval', 'cron', 'event'] as const).map((key) => (
+            <button
+              key={key}
+              onClick={() => toggleTriggerFilter(key)}
+              className={`text-[11px] px-2 py-0.5 rounded-full border transition-colors ${triggerFilters[key] ? 'bg-primary text-primary-foreground border-primary' : 'bg-transparent text-muted-foreground border-border hover:border-muted-foreground'}`}
+            >
+              {key}
+            </button>
+          ))}
+        </div>
+        <Button size="sm" onClick={onCreate} className="gap-1"><Plus className="w-4 h-4" /> New schedule</Button>
+      </div>
+
+      {filtered.length === 0 && (
+        <p className="text-sm text-muted-foreground text-center py-8">
+          {schedules.length === 0 ? 'No schedules yet.' : 'No schedules match filters.'}
+        </p>
+      )}
+
+      {filtered.map((s) => (
+        <div key={s.id} className="border rounded-lg p-3 space-y-2 overflow-hidden">
+          <div className="flex items-start justify-between gap-2 flex-wrap">
+            <div className="min-w-0 flex-1">
+              <div className="flex items-center gap-2 min-w-0 flex-wrap">
+                <input
+                  type="checkbox"
+                  checked={s.enabled}
+                  onChange={(e) => onToggle(s.id, e.target.checked)}
+                  title={s.enabled ? 'Disable' : 'Enable'}
+                  className="shrink-0"
+                />
+                <span className="font-medium text-sm truncate max-w-[280px]" title={s.name}>{s.name}</span>
+                <span className="shrink-0 text-[10px] font-mono px-1.5 py-0.5 rounded bg-muted text-muted-foreground">
+                  {s.task.kind}
+                </span>
+                <span className="shrink-0 text-[10px] font-mono px-1.5 py-0.5 rounded bg-muted text-muted-foreground">
+                  {s.trigger.kind}
+                </span>
+                {runningIds.has(s.id) && (
+                  <span className="inline-flex items-center gap-1 text-[10px] px-1.5 py-0.5 rounded bg-blue-50 text-blue-700 dark:bg-blue-950/50 dark:text-blue-300">
+                    <Loader2 className="w-3 h-3 animate-spin" />
+                    running
+                  </span>
+                )}
+                <span className="text-[10px] px-1.5 py-0.5 rounded bg-blue-50 text-blue-700 dark:bg-blue-950/50 dark:text-blue-300">
+                  {isSystemSchedule(s) ? 'system' : s.createdBy?.email?.split('@')[0] ?? 'unknown'}
+                </span>
+              </div>
+              <div className="mt-1 text-xs text-muted-foreground truncate">{describeTrigger(s)}</div>
+              <div className="mt-1 flex items-center gap-3 text-xs text-muted-foreground">
+                <span>Next: {s.enabled ? relTime(s.nextRun) : 'disabled'}</span>
+                {s.lastRun && (
+                  <button
+                    className={`px-1.5 py-0.5 rounded text-[10px] ${STATUS_COLORS[s.lastRun.status] ?? ''}`}
+                    onClick={() => onOpenRun(s.lastRun!.sessionId)}
+                    title="Open last run"
+                  >
+                    last: {s.lastRun.status} {relTime(s.lastRun.at)}
+                  </button>
+                )}
+                <span>runs: {s.runCount ?? 0}</span>
+              </div>
+            </div>
+            <div className="flex items-center gap-1 shrink-0">
+              {runningIds.has(s.id) ? (
+                <Button variant="ghost" size="icon" title="Stop run" onClick={() => onCancel(s.id)}>
+                  <Square className="w-4 h-4 text-destructive" />
+                </Button>
+              ) : (
+                <Button variant="ghost" size="icon" title="Run now" onClick={() => handlePlay(s)}>
+                  <Play className="w-4 h-4" />
+                </Button>
+              )}
+              <Button variant="ghost" size="icon" title="Edit" onClick={() => onEdit(s)}><Pencil className="w-4 h-4" /></Button>
+              <Button variant="ghost" size="icon" title="Delete" onClick={() => onDelete(s.id)}><Trash2 className="w-4 h-4 text-destructive" /></Button>
+            </div>
+          </div>
+
+          {runModalId === s.id && (
+            <div className="border-t pt-2 mt-2 space-y-2">
+              <label className="text-xs text-muted-foreground">{overrideLabel(s.task.kind)}</label>
+              <input
+                type="text"
+                className="w-full text-sm border rounded px-2 py-1.5 bg-background"
+                placeholder={overridePlaceholder(s.task.kind)}
+                value={overrideText}
+                onChange={(e) => setOverrideText(e.target.value)}
+                onKeyDown={(e) => { if (e.key === 'Enter' && !running) handleRunConfirm(); if (e.key === 'Escape') setRunModalId(null); }}
+                disabled={running}
+                autoFocus
+              />
+              <div className="flex gap-2 justify-end">
+                <Button size="sm" variant="ghost" onClick={() => setRunModalId(null)} disabled={running}>Cancel</Button>
+                <Button size="sm" onClick={handleRunConfirm} disabled={running}>{running ? 'Running...' : 'Run'}</Button>
+              </div>
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/client/components/ui/accordion.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { ChevronDown } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item ref={ref} className={cn('border-b', className)} {...props} />
+));
+AccordionItem.displayName = 'AccordionItem';
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        'flex flex-1 items-center justify-between py-2 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn('pb-3 pt-0', className)}>{children}</div>
+  </AccordionPrimitive.Content>
+));
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/src/client/components/ui/button.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-8 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-9 w-9',
+      },
+    },
+    defaultVariants: { variant: 'default', size: 'default' },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
+  }
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };