initial

2026-05-14 19:24:50 +00:00
parent af0628867f
commit a7f218e182
63 changed files with 10539 additions and 0 deletions
--- a/apps/web/src/pages/Session.tsx
+++ b/apps/web/src/pages/Session.tsx
@@ -0,0 +1,119 @@
+import { useEffect, useRef, useState } from 'react';
+import { Link, useParams } from 'react-router-dom';
+import { ChevronLeft } from 'lucide-react';
+import { toast } from 'sonner';
+import { api } from '@/api/client';
+import type { Session as SessionType } from '@/api/types';
+import { useSessionStream } from '@/hooks/useSessionStream';
+import { MessageList } from '@/components/MessageList';
+import { ChatInput } from '@/components/ChatInput';
+import { ModelPicker } from '@/components/ModelPicker';
+
+export function Session() {
+  const { id } = useParams<{ id: string }>();
+  const stream = useSessionStream(id);
+  const [session, setSession] = useState<SessionType | null>(null);
+  const [name, setName] = useState('');
+  const [editingName, setEditingName] = useState(false);
+  const lastErrorRef = useRef<string | null>(null);
+
+  useEffect(() => {
+    if (stream.error && stream.error !== lastErrorRef.current) {
+      lastErrorRef.current = stream.error;
+      toast.error(stream.error);
+    }
+    if (!stream.error) {
+      lastErrorRef.current = null;
+    }
+  }, [stream.error]);
+
+  useEffect(() => {
+    if (!id) return;
+    setSession(null);
+    api.sessions
+      .get(id)
+      .then((s) => {
+        setSession(s);
+        setName(s.name);
+      })
+      .catch(() => {});
+  }, [id]);
+
+  async function saveName() {
+    if (!id || !session) return;
+    const trimmed = name.trim();
+    if (!trimmed || trimmed === session.name) {
+      setName(session.name);
+      setEditingName(false);
+      return;
+    }
+    const updated = await api.sessions.update(id, { name: trimmed });
+    setSession(updated);
+    setEditingName(false);
+  }
+
+  async function handleSend(content: string) {
+    if (!id) return;
+    await api.messages.send(id, content);
+  }
+
+  const streaming = stream.messages.some((m) => m.status === 'streaming');
+
+  return (
+    <div className="flex-1 flex flex-col min-h-0">
+      <header className="border-b px-4 py-2 flex items-center gap-2 shrink-0">
+        {session && (
+          <Link
+            to={`/project/${session.project_id}`}
+            className="text-muted-foreground hover:text-foreground"
+            aria-label="Back to project"
+          >
+            <ChevronLeft className="size-4" />
+          </Link>
+        )}
+        {editingName ? (
+          <input
+            autoFocus
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            onBlur={() => void saveName()}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') void saveName();
+              if (e.key === 'Escape') {
+                setName(session?.name ?? '');
+                setEditingName(false);
+              }
+            }}
+            className="bg-transparent border-b border-border px-1 py-0.5 text-sm font-medium outline-none focus:border-ring"
+          />
+        ) : (
+          <button
+            type="button"
+            className="text-sm font-medium hover:underline"
+            onClick={() => setEditingName(true)}
+          >
+            {session?.name ?? '…'}
+          </button>
+        )}
+        <div className="ml-auto">
+          {session && (
+            <ModelPicker
+              value={session.model}
+              onChange={async (model) => {
+                const updated = await api.sessions.update(session.id, { model });
+                setSession(updated);
+              }}
+            />
+          )}
+        </div>
+        {!stream.connected && (
+          <span className="text-xs text-muted-foreground">reconnecting…</span>
+        )}
+      </header>
+
+      <MessageList messages={stream.messages} />
+
+      <ChatInput disabled={streaming} onSend={handleSend} />
+    </div>
+  );
+}