@raingor/pi-web-switch 0.2.0

package/src/components/providers/ProvidersPage.tsx

@@ -0,0 +1,466 @@
+import { useState } from "react";
+import { useConfigStore } from "@/store/config-store";
+import { useTranslation } from "@/lib/i18n";
+import { Badge } from "@/components/ui/Badge";
+import { Modal } from "@/components/ui/Modal";
+import { EmptyState } from "@/components/ui/EmptyState";
+import { cn } from "@/lib/utils";
+import type { ApiType, CustomProviderConfig } from "@/types";
+import {
+  Plug,
+  Plus,
+  Trash2,
+  Edit3,
+  Globe,
+  Key,
+  ChevronDown,
+  ChevronRight,
+  Shield,
+  Server,
+} from "lucide-react";
+
+const API_TYPES: { value: ApiType; label: string }[] = [
+  { value: "openai-completions", label: "OpenAI Chat Completions" },
+  { value: "openai-responses", label: "OpenAI Responses" },
+  { value: "anthropic-messages", label: "Anthropic Messages" },
+  { value: "google-generative-ai", label: "Google Generative AI" },
+  { value: "google-vertex", label: "Google Vertex AI" },
+  { value: "bedrock-converse-stream", label: "AWS Bedrock" },
+  { value: "mistral-conversations", label: "Mistral" },
+];
+
+export function ProvidersPage() {
+  const { t } = useTranslation();
+  const { allProviders, auth, updateCustomProvider, removeCustomProvider, setProviderAuth, removeProviderAuth } =
+    useConfigStore();
+  const [expandedId, setExpandedId] = useState<string | null>(null);
+  const [editProvider, setEditProvider] = useState<string | null>(null);
+  const [showAdd, setShowAdd] = useState(false);
+  const [showAuth, setShowAuth] = useState<string | null>(null);
+  const [authKey, setAuthKey] = useState("");
+  const [deleteConfirm, setDeleteConfirm] = useState<string | null>(null);
+
+  const customProviders = allProviders.filter((p) => p.type === "custom");
+
+  const handleAddProvider = (id: string, cfg: CustomProviderConfig) => {
+    useConfigStore.getState().addCustomProvider(id, cfg);
+    setShowAdd(false);
+  };
+
+  const handleEditProvider = (id: string, cfg: Partial<CustomProviderConfig>) => {
+    updateCustomProvider(id, cfg);
+    setEditProvider(null);
+  };
+
+  const handleSetAuth = (providerId: string) => {
+    if (authKey) {
+      setProviderAuth(providerId, authKey);
+      setShowAuth(null);
+      setAuthKey("");
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold" style={{ color: "var(--page-text)" }}>{t("providers.title")}</h1>
+          <p className="mt-1 text-sm" style={{ color: "var(--muted-text)" }}>
+            {allProviders.length} providers ({customProviders.length} custom)
+          </p>
+        </div>
+        <button
+          onClick={() => setShowAdd(true)}
+          className="flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-colors"
+          style={{ backgroundColor: "#3b82f6", color: "#ffffff" }}
+        >
+          <Plus className="h-4 w-4" />
+          {t("providers.add_provider")}
+        </button>
+      </div>
+
+      {allProviders.length === 0 ? (
+        <EmptyState
+          icon={<Plug className="h-12 w-12" />}
+          title={t("providers.title")}
+          description="Add your first provider to get started"
+        />
+      ) : (
+        <div className="space-y-2">
+          {allProviders.map((p) => (
+            <div key={p.id} className="rounded-xl border border-gray-800 bg-gray-900/50">
+              {/* Header */}
+              <button
+                onClick={() => setExpandedId(expandedId === p.id ? null : p.id)}
+                className="flex w-full items-center gap-3 px-5 py-4 text-left"
+              >
+                <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-gray-800">
+                  {p.type === "custom" ? (
+                    <Server className="h-5 w-5 text-blue-400" />
+                  ) : (
+                    <Shield className="h-5 w-5 text-emerald-400" />
+                  )}
+                </div>
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-center gap-2">
+                    <span className="font-medium text-white">{p.name}</span>
+                    <Badge variant={p.type === "builtin" ? "info" : "default"}>
+                      {p.type === "builtin" ? "Built-in" : "Custom"}
+                    </Badge>
+                    {p.hasAuth && (
+                      <Badge variant="success">Auth Configured</Badge>
+                    )}
+                  </div>
+                  <p className="mt-0.5 text-xs text-gray-500">
+                    {p.models.length} models · {p.api ?? "No API type"}
+                  </p>
+                </div>
+                <div className="flex items-center gap-2">
+                  <span
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setShowAuth(p.id);
+                      setAuthKey(auth?.[p.id]?.key ?? "");
+                    }}
+                    className="flex items-center gap-1 rounded-md px-2 py-1 text-xs text-gray-400 hover:bg-gray-800 hover:text-gray-200"
+                  >
+                    <Key className="h-3 w-3" />
+                    Auth
+                  </span>
+                  {p.type === "custom" && (
+                    <>
+                      <span
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          setEditProvider(p.id);
+                        }}
+                        className="flex items-center gap-1 rounded-md px-2 py-1 text-xs text-gray-400 hover:bg-gray-800 hover:text-gray-200"
+                      >
+                        <Edit3 className="h-3 w-3" />
+                        {t("providers.edit_provider")}
+                      </span>
+                      <span
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          setDeleteConfirm(p.id);
+                        }}
+                        className="flex items-center gap-1 rounded-md px-2 py-1 text-xs text-red-400 hover:bg-red-500/10"
+                      >
+                        <Trash2 className="h-3 w-3" />
+                        {t("providers.delete_provider")}
+                      </span>
+                    </>
+                  )}
+                  {expandedId === p.id ? (
+                    <ChevronDown className="h-4 w-4 text-gray-500" />
+                  ) : (
+                    <ChevronRight className="h-4 w-4 text-gray-500" />
+                  )}
+                </div>
+              </button>
+
+              {/* Expanded Details */}
+              {expandedId === p.id && (
+                <div className="border-t border-gray-800 px-5 py-4">
+                  {/* Provider Info */}
+                  <div className="mb-4 grid grid-cols-2 gap-4 text-sm">
+                    <div>
+                      <span className="text-gray-500">Provider ID:</span>
+                      <span className="ml-2 text-gray-300">{p.id}</span>
+                    </div>
+                    <div>
+                      <span className="text-gray-500">API Type:</span>
+                      <span className="ml-2 text-gray-300">{p.api ?? "—"}</span>
+                    </div>
+                    {p.baseUrl && (
+                      <div className="col-span-2">
+                        <span className="text-gray-500">Base URL:</span>
+                        <code className="ml-2 rounded bg-gray-800 px-2 py-0.5 text-xs text-blue-400">
+                          {p.baseUrl}
+                        </code>
+                      </div>
+                    )}
+                    {p.authMethod && (
+                      <div>
+                        <span className="text-gray-500">Auth Method:</span>
+                        <span className="ml-2 text-gray-300">{p.authMethod}</span>
+                      </div>
+                    )}
+                  </div>
+
+                  {/* Models */}
+                  <h4 className="mb-2 text-xs font-medium uppercase tracking-wider text-gray-500">
+                    Models ({p.models.length})
+                  </h4>
+                  <div className="grid gap-2 sm:grid-cols-2 lg:grid-cols-3">
+                    {p.models.map((m) => (
+                      <div
+                        key={m.id}
+                        className={cn(
+                          "rounded-lg border px-3 py-2",
+                          m.enabled ? "border-gray-700 bg-gray-800/50" : "border-gray-800 bg-gray-800/20 opacity-50"
+                        )}
+                      >
+                        <div className="flex items-center justify-between">
+                          <span className="text-sm font-medium text-gray-200">{m.name || m.id}</span>
+                          <Badge variant={m.enabled ? "success" : "default"}>{m.enabled ? "On" : "Off"}</Badge>
+                        </div>
+                        <p className="mt-0.5 text-xs text-gray-500">
+                          {m.cost ? `$${m.cost.input}/${m.cost.output} per M` : "Free"}
+                        </p>
+                      </div>
+                    ))}
+                  </div>
+
+                  {/* Delete — only for custom providers */}
+                  {p.type === "custom" && (
+                    <div className="mt-6 border-t border-gray-800 pt-4">
+                      <button
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          setDeleteConfirm(p.id);
+                        }}
+                        className="flex items-center gap-2 rounded-lg px-4 py-2 text-sm text-red-400 transition-colors hover:bg-red-500/10"
+                      >
+                        <Trash2 className="h-4 w-4" />
+                        Delete {p.name}
+                      </button>
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Add Provider Modal */}
+      <Modal open={showAdd} onClose={() => setShowAdd(false)} title={t("providers.add_provider")} size="lg">
+        <ProviderForm
+          onSubmit={handleAddProvider}
+          onCancel={() => setShowAdd(false)}
+        />
+      </Modal>
+
+      {/* Edit Provider Modal */}
+      <Modal open={!!editProvider} onClose={() => setEditProvider(null)} title={t("providers.edit_provider")} size="lg">
+        {editProvider && (
+          <ProviderForm
+            initial={customProviders.find((p) => p.id === editProvider)}
+            onSubmit={(_, cfg) => handleEditProvider(editProvider, cfg)}
+            onCancel={() => setEditProvider(null)}
+            isEdit
+          />
+        )}
+      </Modal>
+
+      {/* Auth Modal */}
+      <Modal
+        open={!!showAuth}
+        onClose={() => { setShowAuth(null); setAuthKey(""); }}
+        title={`API Key — ${allProviders.find((p) => p.id === showAuth)?.name}`}
+      >
+        <div className="space-y-4">
+          <div>
+            <label className="block text-xs font-medium text-gray-400">API Key</label>
+            <input
+              type="password"
+              value={authKey}
+              onChange={(e) => setAuthKey(e.target.value)}
+              placeholder="sk-..."
+              className="mt-1 w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-white"
+            />
+          </div>
+          <div className="flex justify-between">
+            {showAuth && auth?.[showAuth] && (
+              <button
+                onClick={() => {
+                  removeProviderAuth(showAuth!);
+                  setShowAuth(null);
+                  setAuthKey("");
+                }}
+                className="text-sm text-red-400 hover:text-red-300"
+              >
+                Remove Key
+              </button>
+            )}
+            <div className="flex gap-3 ml-auto">
+              <button
+                onClick={() => { setShowAuth(null); setAuthKey(""); }}
+                className="rounded-lg px-4 py-2 text-sm text-gray-400 hover:bg-gray-800"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={() => handleSetAuth(showAuth!)}
+                disabled={!authKey}
+                className="rounded-lg px-4 py-2 text-sm font-medium transition-colors disabled:opacity-50"
+                style={{ backgroundColor: "#3b82f6", color: "#ffffff" }}
+              >
+                Save Key
+              </button>
+            </div>
+          </div>
+        </div>
+      </Modal>
+
+      {/* Delete Confirmation Modal */}
+      <Modal
+        open={!!deleteConfirm}
+        onClose={() => setDeleteConfirm(null)}
+        title="Delete Provider"
+      >
+        <div className="space-y-4">
+          <div className="flex items-start gap-3">
+            <Trash2 className="h-5 w-5 shrink-0 mt-0.5 text-red-400" />
+            <div>
+              <p className="text-sm text-gray-200">
+                Are you sure you want to delete <strong>{allProviders.find((p) => p.id === deleteConfirm)?.name}</strong>?
+              </p>
+              <p className="text-xs mt-2 text-gray-500">
+                This will remove the provider and all its models from your configuration.
+              </p>
+            </div>
+          </div>
+          <div className="flex justify-end gap-3">
+            <button
+              onClick={() => setDeleteConfirm(null)}
+              className="rounded-lg px-4 py-2 text-sm text-gray-400 hover:bg-gray-800"
+            >
+              Cancel
+            </button>
+            <button
+              onClick={() => {
+                if (deleteConfirm) {
+                  removeCustomProvider(deleteConfirm);
+                  setDeleteConfirm(null);
+                }
+              }}
+              className="flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-white"
+              style={{ backgroundColor: "#dc2626" }}
+            >
+              <Trash2 className="h-4 w-4" />
+              Delete
+            </button>
+          </div>
+        </div>
+      </Modal>
+    </div>
+  );
+}
+
+// ─── Provider Form ────────────────────────────────────────
+
+interface ProviderFormProps {
+  initial?: { id: string; baseUrl?: string; api?: ApiType; apiKey?: string; headers?: Record<string, string> };
+  onSubmit: (id: string, cfg: CustomProviderConfig) => void;
+  onCancel: () => void;
+  isEdit?: boolean;
+}
+
+function ProviderForm({ initial, onSubmit, onCancel, isEdit }: ProviderFormProps) {
+  const [id, setId] = useState(initial?.id ?? "");
+  const [baseUrl, setBaseUrl] = useState(initial?.baseUrl ?? "");
+  const [api, setApi] = useState<ApiType>(initial?.api ?? "openai-completions");
+  const [apiKey, setApiKey] = useState(initial?.apiKey ?? "");
+  const [headersStr, setHeadersStr] = useState(
+    initial?.headers ? JSON.stringify(initial.headers, null, 2) : ""
+  );
+
+  const handleSubmit = () => {
+    if (!id) return;
+    let headers: Record<string, string> | undefined;
+    try {
+      headers = headersStr ? JSON.parse(headersStr) : undefined;
+    } catch {
+      // invalid JSON
+    }
+    const cfg: CustomProviderConfig = {
+      baseUrl: baseUrl || undefined,
+      api,
+      apiKey: apiKey || undefined,
+      headers,
+      models: [],
+    };
+    onSubmit(id, cfg);
+  };
+
+  return (
+    <div className="space-y-4">
+      {!isEdit && (
+        <div>
+          <label className="block text-xs font-medium text-gray-400">Provider ID *</label>
+          <input
+            type="text"
+            value={id}
+            onChange={(e) => setId(e.target.value.replace(/[^a-z0-9-]/g, ""))}
+            placeholder="my-ollama"
+            className="mt-1 w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-white"
+          />
+          <p className="mt-1 text-xs text-gray-500">Lowercase letters, numbers, and hyphens only</p>
+        </div>
+      )}
+
+      <div>
+        <label className="block text-xs font-medium text-gray-400">API Type</label>
+        <select
+          value={api}
+          onChange={(e) => setApi(e.target.value as ApiType)}
+          className="mt-1 w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-white"
+        >
+          {API_TYPES.map((t) => (
+            <option key={t.value} value={t.value}>{t.label}</option>
+          ))}
+        </select>
+      </div>
+
+      <div>
+        <label className="block text-xs font-medium text-gray-400">Base URL</label>
+        <input
+          type="text"
+          value={baseUrl}
+          onChange={(e) => setBaseUrl(e.target.value)}
+          placeholder="http://localhost:11434/v1"
+          className="mt-1 w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-white"
+        />
+      </div>
+
+      <div>
+        <label className="block text-xs font-medium text-gray-400">API Key (optional)</label>
+        <input
+          type="password"
+          value={apiKey}
+          onChange={(e) => setApiKey(e.target.value)}
+          placeholder="$MY_API_KEY or sk-..."
+          className="mt-1 w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-white"
+        />
+        <p className="mt-1 text-xs text-gray-500">Use $ENV_VAR for env vars, or paste the key directly</p>
+      </div>
+
+      <div>
+        <label className="block text-xs font-medium text-gray-400">Custom Headers (JSON)</label>
+        <textarea
+          value={headersStr}
+          onChange={(e) => setHeadersStr(e.target.value)}
+          placeholder='{"X-Custom-Header": "value"}'
+          rows={3}
+          className="mt-1 w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-white font-mono"
+        />
+      </div>
+
+      <div className="flex justify-end gap-3 pt-2">
+        <button onClick={onCancel} className="rounded-lg px-4 py-2 text-sm text-gray-400 hover:bg-gray-800">
+          Cancel
+        </button>
+        <button
+          onClick={handleSubmit}
+          disabled={!id || !baseUrl}
+          className="rounded-lg px-4 py-2 text-sm font-medium transition-colors disabled:opacity-50"
+          style={{ backgroundColor: "#3b82f6", color: "#ffffff" }}
+        >
+          {isEdit ? "Save Changes" : "Add Provider"}
+        </button>
+      </div>
+    </div>
+  );
+}

package/src/components/sessions/MemoryPage.tsx

@@ -0,0 +1,177 @@
+import { useState, useEffect } from "react";
+import { useConfigStore } from "@/store/config-store";
+import { useTranslation } from "@/lib/i18n";
+import { Brain, User, AlertTriangle, Clock, FileText } from "lucide-react";
+
+interface MemoryFile {
+  name: string;
+  filename: string;
+  content: string;
+  updatedAt: string;
+}
+
+const FILE_ICONS: Record<string, typeof Brain> = {
+  "MEMORY.md": Brain,
+  "USER.md": User,
+  "failures.md": AlertTriangle,
+};
+
+const FILE_COLORS: Record<string, string> = {
+  "MEMORY.md": "#3b82f6",
+  "USER.md": "#10b981",
+  "failures.md": "#ef4444",
+};
+
+function formatDate(iso: string): string {
+  if (!iso) return "—";
+  const d = new Date(iso);
+  return d.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+}
+
+function mdToHtml(text: string): string {
+  return text
+    // Headings
+    .replace(/^### (.+)$/gm, '<h3 class="text-sm font-semibold mt-4 mb-2" style="color:var(--page-text)">$1</h3>')
+    .replace(/^## (.+)$/gm, '<h2 class="text-base font-bold mt-5 mb-2" style="color:var(--page-text)">$1</h2>')
+    .replace(/^# (.+)$/gm, '<h1 class="text-lg font-bold mt-5 mb-3" style="color:var(--page-text)">$1</h1>')
+    // Bold
+    .replace(/\*\*(.+?)\*\*/g, '<strong style="color:var(--page-text)">$1</strong>')
+    // Inline code
+    .replace(/`([^`]+)`/g, '<code class="text-xs px-1 py-0.5 rounded" style="background:var(--accent-bg);color:var(--sidebar-active-text)">$1</code>')
+    // Section separator § → horizontal rule
+    .replace(/^§\s*$/gm, '<hr style="border-color:var(--card-border);margin:12px 0" />')
+    // List items (must be after other inline patterns)
+    .replace(/^- (.+)$/gm, '<li class="text-sm ml-4" style="color:var(--page-text);list-style:disc">$1</li>')
+    // Comments: <!-- ... -->
+    .replace(/<!-- (.+?) -->/g, '<span class="text-xs ml-2" style="color:var(--subtle-text)">// $1</span>')
+    // Double line breaks to paragraphs
+    .replace(/\n\n/g, '</p><p class="text-sm leading-relaxed" style="color:var(--page-text)">')
+    // Single line breaks within paragraphs
+    .replace(/\n/g, '<br />')
+    // Wrap everything in paragraph if not already wrapped
+    .replace(/^(?!<[hp])/m, '<p class="text-sm leading-relaxed" style="color:var(--page-text)">')
+    .replace(/([^>])$/m, '$1</p>');
+}
+
+function MemoryCard({ file }: { file: MemoryFile }) {
+  const { t } = useTranslation();
+  const [open, setOpen] = useState(true);
+  const Icon = FILE_ICONS[file.filename] || FileText;
+  const color = FILE_COLORS[file.filename] || "#6b7280";
+  const lineCount = file.content.split("\n").length;
+
+  if (!file.content) {
+    return null;
+  }
+
+  return (
+    <div className="rounded-xl border overflow-hidden" style={{ borderColor: "var(--card-border)" }}>
+      {/* Header */}
+      <button
+        onClick={() => setOpen(!open)}
+        className="flex w-full items-center justify-between px-6 py-4"
+        style={{ backgroundColor: "var(--card-bg)" }}
+      >
+        <div className="flex items-center gap-3">
+          <div className="flex h-9 w-9 items-center justify-center rounded-lg" style={{ backgroundColor: `${color}15` }}>
+            <Icon className="h-4 w-4" style={{ color }} />
+          </div>
+          <div className="text-left">
+            <h3 className="text-sm font-semibold" style={{ color: "var(--page-text)" }}>{t("memory." + file.filename.replace("MEMORY.md", "project_memories").replace("USER.md", "user_profile").replace("failures.md", "failure_records"))}</h3>
+            <p className="text-xs" style={{ color: "var(--muted-text)" }}>
+              {t("memory.lines", String(lineCount))} · {t("memory.updated", formatDate(file.updatedAt))}
+            </p>
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          <span className="text-xs font-medium" style={{ color }}>
+            {file.filename}
+          </span>
+          <Clock className="h-3.5 w-3.5" style={{ color: "var(--muted-text)" }} />
+        </div>
+      </button>
+
+      {/* Content */}
+      {open && (
+        <div className="px-6 py-4" style={{ borderTop: "1px solid var(--card-border)", backgroundColor: "var(--page-bg)" }}>
+          <div
+            className="prose prose-sm max-w-none"
+            dangerouslySetInnerHTML={{ __html: mdToHtml(file.content) }}
+            style={{ color: "var(--page-text)" }}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function MemoryPage() {
+  const { t } = useTranslation();
+  const { initialized } = useConfigStore();
+  const [files, setFiles] = useState<MemoryFile[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!initialized) return;
+    setLoading(true);
+    fetch("/api/pi/memory")
+      .then((r) => r.json())
+      .then((data) => {
+        setFiles(data);
+        setLoading(false);
+      })
+      .catch((e) => {
+        setError(e.message);
+        setLoading(false);
+      });
+  }, [initialized]);
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="h-8 w-8 animate-spin rounded-full border-2 border-gray-600 border-t-blue-500" />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <p className="text-sm text-red-400">Failed to load memory: {error}</p>
+      </div>
+    );
+  }
+
+  const totalLines = files.reduce((s, f) => s + f.content.split("\n").length, 0);
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold" style={{ color: "var(--page-text)" }}>{t("memory.title")}</h1>
+        <p className="mt-1 text-sm" style={{ color: "var(--muted-text)" }}>
+          {t("memory.summary", String(totalLines), String(files.length))}
+        </p>
+      </div>
+
+      {files.length === 0 ? (
+        <div className="flex flex-col items-center justify-center py-12">
+          <Brain className="h-12 w-12" style={{ color: "var(--subtle-text)" }} />
+          <p className="mt-4 text-sm" style={{ color: "var(--muted-text)" }}>{t("memory.no_memory")}</p>
+          <p className="text-xs mt-1" style={{ color: "var(--subtle-text)" }}>{t("memory.no_memory_desc")}</p>
+        </div>
+      ) : (
+        <div className="space-y-4">
+          {files.map((file) => (
+            <MemoryCard key={file.filename} file={file} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}