@raingor/pi-web-switch 0.4.0 → 0.4.1

package/src/components/chat/ChatPage.tsx

@@ -0,0 +1,617 @@
+// ChatPage — full chat interface with session sidebar.
+// Combines a session list sidebar with the ChatWindow.
+
+import { useState, useCallback, useEffect, useRef } from "react";
+import { ChatWindow } from "@/components/chat/ChatWindow";
+import type { SessionInfo, SessionStatsInfo, ContextUsage, ChatInputHandle } from "@/types/chat";
+import { useTranslation } from "@/lib/i18n";
+
+interface ProjectGroup {
+  projectRoot: string;
+  sessions: SessionInfo[];
+}
+
+function groupSessionsByProject(sessions: SessionInfo[]): ProjectGroup[] {
+  const groups = new Map<string, SessionInfo[]>();
+  for (const s of sessions) {
+    const key = s.projectRoot ?? s.cwd ?? "Unknown";
+    if (!groups.has(key)) groups.set(key, []);
+    groups.get(key)!.push(s);
+  }
+  return [...groups.entries()].map(([projectRoot, sessions]) => ({
+    projectRoot,
+    sessions: sessions.sort((a, b) => b.modified.localeCompare(a.modified)),
+  }));
+}
+
+function getProjectName(projectRoot: string): string {
+  const parts = projectRoot.replace(/\/+$/, "").split("/");
+  return parts[parts.length - 1] || projectRoot;
+}
+
+function formatRelativeTime(iso: string, t: (key: string, ...args: string[]) => string): string {
+  const d = new Date(iso);
+  const now = new Date();
+  const diffMs = now.getTime() - d.getTime();
+  const diffMin = Math.floor(diffMs / 60000);
+  const diffHr = Math.floor(diffMin / 60);
+  const diffDay = Math.floor(diffHr / 24);
+  if (diffMin < 1) return t("chat.just_now");
+  if (diffMin < 60) return t("chat.min_ago", String(diffMin));
+  if (diffHr < 24) return t("chat.hr_ago", String(diffHr));
+  if (diffDay < 7) return t("chat.day_ago", String(diffDay));
+  return d.toLocaleDateString();
+}
+
+export function ChatPage() {
+  const { t } = useTranslation();
+  const [sessions, setSessions] = useState<SessionInfo[]>([]);
+  const [selectedSession, setSelectedSession] = useState<SessionInfo | null>(null);
+  const [newSessionCwd, setNewSessionCwd] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [refreshKey, setRefreshKey] = useState(0);
+  const [showCwdPicker, setShowCwdPicker] = useState(false);
+  const [cwdInput, setCwdInput] = useState("");
+  const [cwdError, setCwdError] = useState<string | null>(null);
+  const [browsePath, setBrowsePath] = useState("");
+  const [browseItems, setBrowseItems] = useState<{ name: string; isDirectory: boolean; path: string }[]>([]);
+  const [sessionStats, setSessionStats] = useState<SessionStatsInfo | null>(null);
+  const [contextUsage, setContextUsage] = useState<ContextUsage | null>(null);
+  const [collapsedGroups, setCollapsedGroups] = useState<Set<string>>(new Set());
+  const chatInputRef = useRef<ChatInputHandle | null>(null);
+
+  // ─── Load sessions ─────────────────────────────────────
+
+  useEffect(() => {
+    fetch("/api/chat/sessions")
+      .then((r) => r.json())
+      .then((data: { sessions: SessionInfo[] }) => {
+        setSessions(data.sessions ?? []);
+        setLoading(false);
+      })
+      .catch(() => setLoading(false));
+  }, [refreshKey]);
+
+  // ─── Browse directories ────────────────────────────────
+
+  const browse = useCallback((path: string) => {
+    setBrowsePath(path);
+    fetch(`/api/chat/cwd/browse?path=${encodeURIComponent(path)}`)
+      .then((r) => r.json())
+      .then((data: { path: string; items: { name: string; isDirectory: boolean; path: string }[] }) => {
+        setBrowseItems(data.items ?? []);
+      })
+      .catch(() => setBrowseItems([]));
+  }, []);
+
+  useEffect(() => {
+    // Load home directory on mount
+    fetch("/api/chat/home")
+      .then((r) => r.json())
+      .then((data: { home: string }) => {
+        setCwdInput(data.home);
+        browse(data.home);
+      })
+      .catch(() => {});
+  }, [browse]);
+
+  // ─── Session selection ─────────────────────────────────
+
+  const handleSelectSession = useCallback((session: SessionInfo) => {
+    setNewSessionCwd(null);
+    setSelectedSession(session);
+    setSessionStats(null);
+    setContextUsage(null);
+  }, []);
+
+  const handleNewSession = useCallback(() => {
+    setShowCwdPicker(true);
+  }, []);
+
+  const handleConfirmCwd = useCallback(async () => {
+    setCwdError(null);
+    try {
+      const res = await fetch("/api/chat/cwd/validate", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ cwd: cwdInput }),
+      });
+      if (!res.ok) {
+        const data = await res.json();
+        throw new Error(data.error ?? t("chat.invalid_directory"));
+      }
+      const data = await res.json();
+      setSelectedSession(null);
+      setNewSessionCwd(data.cwd);
+      setShowCwdPicker(false);
+      setSessionStats(null);
+      setContextUsage(null);
+    } catch (e) {
+      setCwdError(e instanceof Error ? e.message : String(e));
+    }
+  }, [cwdInput, t]);
+
+  const handleSessionCreated = useCallback((session: SessionInfo) => {
+    setSelectedSession(session);
+    setNewSessionCwd(null);
+    setRefreshKey((k) => k + 1);
+  }, []);
+
+  const handleAgentEnd = useCallback(() => {
+    setRefreshKey((k) => k + 1);
+  }, []);
+
+  // ─── Delete session ────────────────────────────────────
+
+  const handleDeleteSession = useCallback(async (sessionId: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (!confirm(t("chat.delete_confirm"))) return;
+    try {
+      await fetch(`/api/chat/sessions/${encodeURIComponent(sessionId)}`, { method: "DELETE" });
+      setRefreshKey((k) => k + 1);
+      if (selectedSession?.id === sessionId) {
+        setSelectedSession(null);
+      }
+    } catch {
+      // ignore
+    }
+  }, [selectedSession]);
+
+  // ─── Render ────────────────────────────────────────────
+
+  const projectGroups = groupSessionsByProject(sessions);
+
+  // ─── Expand / Collapse all groups ──────────────────────
+
+  const expandAll = useCallback(() => {
+    setCollapsedGroups(new Set());
+  }, []);
+
+  const collapseAll = useCallback(() => {
+    setCollapsedGroups(new Set(projectGroups.map((g) => g.projectRoot)));
+  }, [projectGroups]);
+
+  const effectiveCwd = selectedSession?.cwd ?? newSessionCwd;
+  const showChat = selectedSession !== null || newSessionCwd !== null;
+
+  return (
+    <div style={{ display: "flex", height: "100%", overflow: "hidden" }}>
+      {/* Session Sidebar */}
+      <div style={{
+        width: 280,
+        flexShrink: 0,
+        borderRight: "1px solid var(--border)",
+        background: "var(--bg-panel)",
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden",
+      }}>
+        {/* Header */}
+        <div style={{
+          padding: "12px 14px",
+          borderBottom: "1px solid var(--border)",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+        }}>
+          <span style={{ fontSize: 14, fontWeight: 600, color: "var(--text)" }}>{t("chat.sessions")}</span>
+          <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
+            {projectGroups.length > 0 && (() => {
+              const allExpanded = collapsedGroups.size === 0;
+              return (
+                <button
+                  onClick={allExpanded ? collapseAll : expandAll}
+                  title={allExpanded ? t("chat.collapse_all") : t("chat.expand_all")}
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 3,
+                    height: 26,
+                    padding: "0 8px",
+                    borderRadius: 6,
+                    border: "1px solid var(--border)",
+                    background: "var(--bg)",
+                    color: "var(--text-muted)",
+                    cursor: "pointer",
+                    fontSize: 11,
+                    fontWeight: 500,
+                  }}
+                  onMouseEnter={(e) => { e.currentTarget.style.background = "var(--bg-hover)"; }}
+                  onMouseLeave={(e) => { e.currentTarget.style.background = "var(--bg)"; }}
+                >
+                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ transform: allExpanded ? "rotate(180deg)" : "rotate(0deg)", transition: "transform 0.2s" }}>
+                    <polyline points="6 9 12 15 18 9" />
+                  </svg>
+                  {allExpanded ? t("chat.collapse_all") : t("chat.expand_all")}
+                </button>
+              );
+            })()}
+            <button
+              onClick={handleNewSession}
+              title={t("chat.new_session")}
+              style={{
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                width: 28,
+                height: 28,
+                borderRadius: 6,
+                border: "none",
+                background: "var(--accent)",
+                color: "#fff",
+                cursor: "pointer",
+                fontSize: 18,
+              }}
+            >
+              +
+            </button>
+          </div>
+        </div>
+
+        {/* Session list */}
+        <div style={{ flex: 1, overflowY: "auto" }}>
+          {loading ? (
+            <div style={{ padding: 16, fontSize: 13, color: "var(--text-muted)" }}>{t("chat.loading")}</div>
+          ) : projectGroups.length === 0 ? (
+            <div style={{ padding: 16, fontSize: 13, color: "var(--text-muted)" }}>
+              {t("chat.no_sessions")}
+            </div>
+          ) : (
+            projectGroups.map((group) => {
+                const isCollapsed = collapsedGroups.has(group.projectRoot);
+                return (
+              <div key={group.projectRoot}>
+                {/* Project header - clickable to collapse/expand */}
+                <button
+                  onClick={() => {
+                    setCollapsedGroups((prev) => {
+                      const next = new Set(prev);
+                      if (next.has(group.projectRoot)) {
+                        next.delete(group.projectRoot);
+                      } else {
+                        next.add(group.projectRoot);
+                      }
+                      return next;
+                    });
+                  }}
+                  style={{
+                    padding: "6px 14px",
+                    fontSize: 11,
+                    fontWeight: 600,
+                    color: "var(--text-dim)",
+                    textTransform: "uppercase",
+                    letterSpacing: "0.05em",
+                    background: "var(--bg)",
+                    width: "100%",
+                    border: "none",
+                    cursor: "pointer",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    textAlign: "left",
+                  }}
+                  onMouseEnter={(e) => { e.currentTarget.style.background = "var(--bg-hover)"; }}
+                  onMouseLeave={(e) => { e.currentTarget.style.background = "var(--bg)"; }}
+                >
+                  <span>{getProjectName(group.projectRoot)}</span>
+                  <span style={{ display: "flex", alignItems: "center", gap: 4 }}>
+                    <span style={{ fontSize: 10, opacity: 0.7 }}>{group.sessions.length}</span>
+                    <svg
+                      width="12"
+                      height="12"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      style={{
+                        transform: isCollapsed ? "rotate(-90deg)" : "rotate(0deg)",
+                        transition: "transform 0.2s",
+                      }}
+                    >
+                      <polyline points="6 9 12 15 18 9" />
+                    </svg>
+                  </span>
+                </button>
+                {/* Sessions */}
+                {!isCollapsed && group.sessions.map((s) => (
+                  <div
+                    key={s.id}
+                    onClick={() => handleSelectSession(s)}
+                    style={{
+                      padding: "8px 14px",
+                      cursor: "pointer",
+                      background: selectedSession?.id === s.id ? "var(--bg-selected)" : "transparent",
+                      borderLeft: selectedSession?.id === s.id ? "3px solid var(--accent)" : "3px solid transparent",
+                      transition: "background 0.1s",
+                    }}
+                    onMouseEnter={(e) => {
+                      if (selectedSession?.id !== s.id) e.currentTarget.style.background = "var(--bg-hover)";
+                    }}
+                    onMouseLeave={(e) => {
+                      if (selectedSession?.id !== s.id) e.currentTarget.style.background = "transparent";
+                    }}
+                  >
+                    <div style={{
+                      fontSize: 13,
+                      color: selectedSession?.id === s.id ? "var(--text)" : "var(--text-muted)",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap",
+                    }}>
+                      {s.name || s.firstMessage?.slice(0, 50) || t("chat.untitled")}
+                    </div>
+                    <div style={{
+                      fontSize: 11,
+                      color: "var(--text-dim)",
+                      marginTop: 2,
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 6,
+                    }}>
+                      <span>{formatRelativeTime(s.modified, t)}</span>
+                      <span>·</span>
+                      <span>{t("chat.msg_count", String(s.messageCount))}</span>
+                      <button
+                        onClick={(e) => handleDeleteSession(s.id, e)}
+                        title={t("chat.delete")}
+                        style={{
+                          marginLeft: "auto",
+                          background: "none",
+                          border: "none",
+                          color: "var(--text-dim)",
+                          cursor: "pointer",
+                          fontSize: 12,
+                          padding: 0,
+                        }}
+                      >
+                        ×
+                      </button>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            );
+            })
+          )}
+        </div>
+      </div>
+
+      {/* Chat area */}
+      <div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden", position: "relative" }}>
+        {/* Top bar */}
+        {showChat && (
+          <div style={{
+            display: "flex",
+            alignItems: "center",
+            gap: 12,
+            padding: "8px 16px",
+            borderBottom: "1px solid var(--border)",
+            background: "var(--bg-panel)",
+            flexShrink: 0,
+          }}>
+            <span style={{ fontSize: 13, color: "var(--text-muted)", fontFamily: "var(--font-mono, monospace)" }}>
+              {effectiveCwd}
+            </span>
+            {/* Session stats */}
+            {sessionStats && (
+              <div style={{ marginLeft: "auto", display: "flex", gap: 12, fontSize: 11, color: "var(--text-muted)" }}>
+                {sessionStats.tokens.input > 0 && (
+                  <span title="Input tokens">↑{sessionStats.tokens.input.toLocaleString()}</span>
+                )}
+                {sessionStats.tokens.output > 0 && (
+                  <span title="Output tokens">↓{sessionStats.tokens.output.toLocaleString()}</span>
+                )}
+                {sessionStats.cost > 0 && (
+                  <span title="Cost">${sessionStats.cost.toFixed(4)}</span>
+                )}
+                {contextUsage?.contextWindow && (
+                  <span
+                    title="Context usage"
+                    style={{
+                      color: contextUsage.percent && contextUsage.percent > 90 ? "#ef4444"
+                        : contextUsage.percent && contextUsage.percent > 70 ? "rgba(234,179,8,0.95)"
+                        : undefined,
+                    }}
+                  >
+                    {contextUsage.percent ? `${contextUsage.percent.toFixed(0)}%` : "?"} / {contextUsage.contextWindow.toLocaleString()}
+                  </span>
+                )}
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Chat window or placeholder */}
+        <div style={{ flex: 1, overflow: "hidden", position: "relative" }}>
+          {showChat ? (
+            <ChatWindow
+              session={selectedSession}
+              newSessionCwd={newSessionCwd}
+              onAgentEnd={handleAgentEnd}
+              onSessionCreated={handleSessionCreated}
+              chatInputRef={chatInputRef}
+              onSessionStatsChange={setSessionStats}
+              onContextUsageChange={setContextUsage}
+            />
+          ) : (
+            <div style={{
+              height: "100%",
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
+              padding: 24,
+              color: "var(--text-muted)",
+            }}>
+              <div style={{ fontSize: 48, marginBottom: 16, opacity: 0.3 }}>π</div>
+              <div style={{ fontSize: 18, fontWeight: 600, color: "var(--text)", marginBottom: 8 }}>
+                {t("chat.welcome_title")}
+              </div>
+              <div style={{ fontSize: 14, textAlign: "center", maxWidth: 400, lineHeight: 1.6 }}>
+                {t("chat.welcome_desc")}
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* CWD Picker Modal */}
+        {showCwdPicker && (
+          <div style={{
+            position: "absolute",
+            inset: 0,
+            zIndex: 100,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            background: "rgba(0,0,0,0.3)",
+          }}>
+            <div style={{
+              width: "min(560px, 90%)",
+              maxHeight: "80%",
+              background: "var(--bg-panel)",
+              border: "1px solid var(--border)",
+              borderRadius: 12,
+              display: "flex",
+              flexDirection: "column",
+              overflow: "hidden",
+              boxShadow: "0 20px 60px rgba(0,0,0,0.3)",
+            }}>
+              {/* Header */}
+              <div style={{
+                padding: "12px 16px",
+                borderBottom: "1px solid var(--border)",
+                fontSize: 14,
+                fontWeight: 600,
+                color: "var(--text)",
+              }}>
+                {t("chat.select_cwd")}
+              </div>
+
+              {/* CWD input */}
+              <div style={{ padding: "12px 16px", borderBottom: "1px solid var(--border)" }}>
+                <input
+                  value={cwdInput}
+                  onChange={(e) => {
+                    setCwdInput(e.target.value);
+                    setCwdError(null);
+                  }}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") handleConfirmCwd();
+                    if (e.key === "Escape") setShowCwdPicker(false);
+                  }}
+                  placeholder="/path/to/project"
+                  style={{
+                    width: "100%",
+                    padding: "8px 12px",
+                    borderRadius: 8,
+                    border: "1px solid var(--border)",
+                    background: "var(--bg)",
+                    color: "var(--text)",
+                    fontSize: 13,
+                    fontFamily: "var(--font-mono, monospace)",
+                    outline: "none",
+                  }}
+                />
+                {cwdError && (
+                  <div style={{ marginTop: 6, fontSize: 12, color: "#dc2626" }}>{cwdError}</div>
+                )}
+              </div>
+
+              {/* Directory browser */}
+              <div style={{ flex: 1, overflow: "auto", padding: "4px 0" }}>
+                {/* Current path breadcrumb */}
+                <div style={{
+                  padding: "4px 16px",
+                  fontSize: 11,
+                  color: "var(--text-dim)",
+                  fontFamily: "var(--font-mono, monospace)",
+                  borderBottom: "1px solid var(--border)",
+                }}>
+                  {browsePath}
+                </div>
+                {/* Parent directory */}
+                <div
+                  onClick={() => {
+                    const parent = browsePath.replace(/\/[^/]+\/?$/, "") || "/";
+                    browse(parent);
+                    setCwdInput(parent);
+                  }}
+                  style={{
+                    padding: "6px 16px",
+                    cursor: "pointer",
+                    fontSize: 13,
+                    color: "var(--text-muted)",
+                  }}
+                >
+                  ../
+                </div>
+                {/* Items */}
+                {browseItems.filter((item) => item.isDirectory).map((item) => (
+                  <div
+                    key={item.path}
+                    onClick={() => {
+                      browse(item.path);
+                      setCwdInput(item.path);
+                    }}
+                    style={{
+                      padding: "6px 16px",
+                      cursor: "pointer",
+                      fontSize: 13,
+                      color: "var(--text)",
+                    }}
+                    onMouseEnter={(e) => { e.currentTarget.style.background = "var(--bg-hover)"; }}
+                    onMouseLeave={(e) => { e.currentTarget.style.background = "transparent"; }}
+                  >
+                    <span style={{ marginRight: 6 }}>📁</span>
+                    {item.name}
+                  </div>
+                ))}
+              </div>
+
+              {/* Footer */}
+              <div style={{
+                padding: "10px 16px",
+                borderTop: "1px solid var(--border)",
+                display: "flex",
+                justifyContent: "flex-end",
+                gap: 8,
+              }}>
+                <button
+                  onClick={() => setShowCwdPicker(false)}
+                  style={{
+                    padding: "6px 14px",
+                    borderRadius: 6,
+                    border: "1px solid var(--border)",
+                    background: "var(--bg)",
+                    color: "var(--text-muted)",
+                    cursor: "pointer",
+                    fontSize: 13,
+                  }}
+                >
+                  {t("chat.cancel")}
+                </button>
+                <button
+                  onClick={handleConfirmCwd}
+                  style={{
+                    padding: "6px 14px",
+                    borderRadius: 6,
+                    border: "none",
+                    background: "var(--accent)",
+                    color: "#fff",
+                    cursor: "pointer",
+                    fontSize: 13,
+                    fontWeight: 500,
+                  }}
+                >
+                  {t("chat.start_chat")}
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}