claude-world-studio 1.0.0

package/client/components/SettingsPage.tsx

@@ -0,0 +1,452 @@
+import React, { useState, useEffect } from "react";
+import type { Language } from "../App";
+
+interface SettingsPageProps {
+  isVisible: boolean;
+  onClose: () => void;
+  language: Language;
+  onLanguageChange: (lang: Language) => void;
+}
+
+interface SettingsData {
+  trendPulseVenvPython: string;
+  cfBrowserVenvPython: string;
+  notebooklmServerPath: string;
+  cfBrowserUrl: string;
+  cfBrowserApiKey: string;
+  defaultWorkspace: string;
+}
+
+interface Account {
+  id: string;
+  name: string;
+  handle: string;
+  platform: string;
+  token: string;
+  user_id: string;
+  style: string;
+  persona_prompt: string;
+}
+
+type DetectedMap = Record<string, { value: string; found: boolean }>;
+
+interface FieldDef {
+  key: string;
+  label: string;
+  placeholder: string;
+  sensitive?: boolean;
+}
+
+interface SettingGroup {
+  title: string;
+  fields: FieldDef[];
+  guide?: { title: string; steps: string[]; links?: { label: string; url: string }[] };
+}
+
+const SETTING_GROUPS: SettingGroup[] = [
+  {
+    title: "MCP Servers",
+    fields: [
+      { key: "trendPulseVenvPython", label: "trend-pulse Python path", placeholder: "/path/to/trend-pulse/.venv/bin/python" },
+      { key: "cfBrowserVenvPython", label: "cf-browser Python path", placeholder: "/path/to/cf-browser/.venv/bin/python" },
+      { key: "notebooklmServerPath", label: "NotebookLM server path", placeholder: "/path/to/mcp-server/server.py" },
+      { key: "cfBrowserUrl", label: "CF Browser URL", placeholder: "https://cf-browser.your-subdomain.workers.dev" },
+      { key: "cfBrowserApiKey", label: "CF Browser API Key", placeholder: "api-key", sensitive: true },
+    ],
+    guide: {
+      title: "How to set up MCP Servers",
+      steps: [
+        "--- trend-pulse ---",
+        "git clone https://github.com/claude-world/trend-pulse.git",
+        "cd trend-pulse && python3 -m venv .venv && .venv/bin/pip install -e '.[mcp]'",
+        "",
+        "--- cf-browser ---",
+        "git clone https://github.com/claude-world/cf-browser.git",
+        "cd cf-browser && bash setup.sh",
+        "",
+        "--- NotebookLM ---",
+        "git clone https://github.com/claude-world/notebooklm-skill.git",
+        "cd notebooklm-skill && pip install -r requirements.txt",
+      ],
+      links: [
+        { label: "trend-pulse", url: "https://github.com/claude-world/trend-pulse" },
+        { label: "cf-browser", url: "https://github.com/claude-world/cf-browser" },
+        { label: "notebooklm-skill", url: "https://github.com/claude-world/notebooklm-skill" },
+      ],
+    },
+  },
+  {
+    title: "General",
+    fields: [
+      { key: "defaultWorkspace", label: "Default workspace path", placeholder: "/path/to/workspace" },
+    ],
+  },
+];
+
+const LANGUAGE_OPTIONS: { code: Language; label: string }[] = [
+  { code: "zh-TW", label: "繁體中文 (Taiwan)" },
+  { code: "en", label: "English" },
+  { code: "ja", label: "日本語 (Japanese)" },
+];
+
+function StatusDot({ found }: { found: boolean }) {
+  return (
+    <span className={`inline-block w-2 h-2 rounded-full ${found ? "bg-green-500" : "bg-gray-300"}`} title={found ? "Detected" : "Not found"} />
+  );
+}
+
+function SetupGuide({ guide }: { guide: NonNullable<SettingGroup["guide"]> }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <div className="mb-4">
+      <button onClick={() => setOpen(!open)} className="flex items-center gap-2 text-xs text-blue-600 hover:text-blue-800 font-medium">
+        <svg className={`w-3.5 h-3.5 transition-transform ${open ? "rotate-90" : ""}`} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+          <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
+        </svg>
+        {guide.title}
+      </button>
+      {open && (
+        <div className="mt-2 ml-5 p-3 bg-blue-50 border border-blue-100 rounded-lg text-xs text-gray-700 space-y-1">
+          {guide.steps.map((step, i) => {
+            if (step === "") return <div key={i} className="h-2" />;
+            if (step.startsWith("---")) return <div key={i} className="font-semibold text-gray-800 pt-1">{step.replace(/^-+\s*/, "").replace(/\s*-+$/, "")}</div>;
+            return <div key={i}><code className="whitespace-pre-wrap break-all">{step}</code></div>;
+          })}
+          {guide.links && (
+            <div className="pt-2 border-t border-blue-200 mt-2 flex flex-wrap gap-3">
+              {guide.links.map((link) => (
+                <a key={link.url} href={link.url} target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:text-blue-800 underline">
+                  {link.label}
+                </a>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── Accounts Manager ───
+
+const EMPTY_ACCOUNT: Omit<Account, "id"> = {
+  name: "", handle: "", platform: "threads", token: "", user_id: "", style: "", persona_prompt: "",
+};
+
+function AccountsManager() {
+  const [accounts, setAccounts] = useState<Account[]>([]);
+  const [editing, setEditing] = useState<Account | null>(null);
+  const [isNew, setIsNew] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [notice, setNotice] = useState("");
+
+  const fetchAccounts = () => {
+    fetch("/api/accounts").then((r) => r.ok ? r.json() : []).then(setAccounts).catch(() => {});
+  };
+
+  useEffect(() => { fetchAccounts(); }, []);
+
+  const handleSave = async () => {
+    if (!editing || !editing.name || !editing.handle) return;
+    setSaving(true);
+
+    const url = isNew ? "/api/accounts" : `/api/accounts/${editing.id}`;
+    const method = isNew ? "POST" : "PUT";
+
+    try {
+      const res = await fetch(url, {
+        method,
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(editing),
+      });
+      if (res.ok) {
+        setEditing(null);
+        setIsNew(false);
+        fetchAccounts();
+        setNotice("Saved. Start a new session to use updated accounts.");
+      }
+    } catch {}
+    setSaving(false);
+  };
+
+  const handleDelete = async (id: string) => {
+    try {
+      const res = await fetch(`/api/accounts/${id}`, { method: "DELETE" });
+      if (res.ok) { fetchAccounts(); setNotice("Deleted. Start a new session to apply."); }
+    } catch {}
+  };
+
+  const startNew = () => {
+    setEditing({ id: "", ...EMPTY_ACCOUNT });
+    setIsNew(true);
+  };
+
+  const startEdit = (account: Account) => {
+    setEditing({ ...account, token: "" }); // Don't prefill masked token
+    setIsNew(false);
+  };
+
+  return (
+    <div>
+      <div className="flex items-center justify-between mb-3">
+        <h3 className="text-sm font-semibold text-gray-700 uppercase tracking-wider">Social Accounts</h3>
+        <button onClick={startNew} className="text-xs px-3 py-1.5 bg-blue-600 text-white rounded-md hover:bg-blue-700 font-medium">
+          + Add Account
+        </button>
+      </div>
+
+      {/* Notice */}
+      {notice && (
+        <div className="mb-3 px-3 py-2 bg-amber-50 border border-amber-200 rounded-lg text-xs text-amber-700 flex items-center gap-2">
+          <span>&#9888;</span>
+          <span>{notice}</span>
+        </div>
+      )}
+
+      {/* Account list */}
+      {accounts.length === 0 && !editing && (
+        <p className="text-xs text-gray-400 mb-4">No accounts configured. Click "Add Account" to get started.</p>
+      )}
+
+      <div className="space-y-2 mb-4">
+        {accounts.map((a) => (
+          <div key={a.id} className="flex items-center justify-between p-3 border border-gray-200 rounded-lg">
+            <div className="min-w-0">
+              <div className="flex items-center gap-2">
+                <span className="text-sm font-medium text-gray-800">{a.handle}</span>
+                <span className={`text-[10px] px-1.5 py-0.5 rounded font-medium ${a.platform === "threads" ? "bg-gray-100 text-gray-600" : "bg-pink-50 text-pink-600"}`}>
+                  {a.platform}
+                </span>
+                {a.style && <span className="text-[10px] px-1.5 py-0.5 rounded bg-blue-50 text-blue-600">{a.style}</span>}
+              </div>
+              <div className="text-xs text-gray-400 mt-0.5">{a.name}</div>
+            </div>
+            <div className="flex items-center gap-1.5 shrink-0">
+              <button onClick={() => startEdit(a)} className="text-xs px-2 py-1 border border-gray-200 rounded hover:bg-gray-50 text-gray-600">Edit</button>
+              <button onClick={() => handleDelete(a.id)} className="text-xs px-2 py-1 text-red-500 hover:bg-red-50 rounded">Delete</button>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Edit form */}
+      {editing && (
+        <div className="p-4 border border-blue-200 rounded-lg bg-blue-50/30 space-y-3">
+          <div className="text-sm font-medium text-gray-700">{isNew ? "New Account" : `Edit: ${editing.handle}`}</div>
+          <div className="grid grid-cols-2 gap-3">
+            <div>
+              <label className="text-xs text-gray-500 block mb-1">Name *</label>
+              <input type="text" value={editing.name} onChange={(e) => setEditing({ ...editing, name: e.target.value })} placeholder="Claude World Taiwan" className="w-full px-3 py-1.5 border border-gray-300 rounded text-sm" />
+            </div>
+            <div>
+              <label className="text-xs text-gray-500 block mb-1">Handle *</label>
+              <input type="text" value={editing.handle} onChange={(e) => setEditing({ ...editing, handle: e.target.value })} placeholder="@your.account" className="w-full px-3 py-1.5 border border-gray-300 rounded text-sm" />
+            </div>
+            <div>
+              <label className="text-xs text-gray-500 block mb-1">Platform *</label>
+              <select value={editing.platform} onChange={(e) => setEditing({ ...editing, platform: e.target.value })} className="w-full px-3 py-1.5 border border-gray-300 rounded text-sm">
+                <option value="threads">Threads</option>
+                <option value="instagram">Instagram</option>
+              </select>
+            </div>
+            <div>
+              <label className="text-xs text-gray-500 block mb-1">Style</label>
+              <input type="text" value={editing.style} onChange={(e) => setEditing({ ...editing, style: e.target.value })} placeholder="tech-educator, futurist..." className="w-full px-3 py-1.5 border border-gray-300 rounded text-sm" />
+            </div>
+            <div>
+              <label className="text-xs text-gray-500 block mb-1">Token {!isNew && "(leave empty to keep current)"}</label>
+              <input type="password" value={editing.token} onChange={(e) => setEditing({ ...editing, token: e.target.value })} placeholder="API token" className="w-full px-3 py-1.5 border border-gray-300 rounded text-sm font-mono" />
+            </div>
+            <div>
+              <label className="text-xs text-gray-500 block mb-1">User ID</label>
+              <input type="text" value={editing.user_id} onChange={(e) => setEditing({ ...editing, user_id: e.target.value })} placeholder="your-threads-user-id" className="w-full px-3 py-1.5 border border-gray-300 rounded text-sm font-mono" />
+            </div>
+          </div>
+          <div>
+            <label className="text-xs text-gray-500 block mb-1">Persona Prompt (AI uses this to adapt content style for this account)</label>
+            <textarea value={editing.persona_prompt} onChange={(e) => setEditing({ ...editing, persona_prompt: e.target.value })} rows={3} placeholder="You are a tech educator focused on Claude Code. Write in Traditional Chinese. Tone: professional yet approachable..." className="w-full px-3 py-2 border border-gray-300 rounded text-sm resize-none" />
+          </div>
+          <div className="flex gap-2">
+            <button onClick={handleSave} disabled={!editing.name || !editing.handle || saving} className="text-xs px-4 py-1.5 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-40">
+              {saving ? "Saving..." : isNew ? "Create" : "Update"}
+            </button>
+            <button onClick={() => { setEditing(null); setIsNew(false); }} className="text-xs px-3 py-1.5 border border-gray-200 rounded hover:bg-gray-50 text-gray-600">Cancel</button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── Main Settings Page ───
+
+export function SettingsPage({ isVisible, onClose, language, onLanguageChange }: SettingsPageProps) {
+  const [settings, setSettings] = useState<Partial<SettingsData>>({});
+  const [detected, setDetected] = useState<DetectedMap>({});
+  const [detecting, setDetecting] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [message, setMessage] = useState("");
+
+  useEffect(() => {
+    if (!isVisible) return;
+    fetch("/api/settings").then((r) => r.ok ? r.json() : {}).then(setSettings).catch(() => {});
+  }, [isVisible]);
+
+  const handleDetect = async () => {
+    setDetecting(true);
+    setMessage("");
+    try {
+      const res = await fetch("/api/settings/detect");
+      if (!res.ok) throw new Error();
+      const data: DetectedMap = await res.json();
+      setDetected(data);
+      const found = Object.values(data).filter((d) => d.found).length;
+      setMessage(`Detected ${found}/${Object.keys(data).length} settings.`);
+    } catch { setMessage("Detection failed."); }
+    setDetecting(false);
+  };
+
+  const handleApplyDetected = async () => {
+    const updates: Partial<SettingsData> = {};
+    for (const [key, info] of Object.entries(detected)) {
+      if (info.found && info.value) {
+        (updates as any)[key] = info.value;
+      }
+    }
+    setSettings((prev) => ({ ...prev, ...updates }));
+
+    const hasSensitive = detected["cfBrowserApiKey"]?.found;
+    if (hasSensitive) {
+      try {
+        const res = await fetch("/api/settings/detect/apply", { method: "POST" });
+        if (!res.ok) { setMessage("Warning: Failed to apply server-side."); return; }
+      } catch { setMessage("Warning: Failed to apply server-side."); return; }
+    }
+    setMessage("Applied. Click Save to persist.");
+  };
+
+  const handleSave = async () => {
+    setSaving(true);
+    setMessage("");
+    try {
+      const res = await fetch("/api/settings", {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(settings),
+      });
+      if (!res.ok) throw new Error();
+      setMessage("Settings saved! Start a new session to apply MCP changes.");
+    } catch { setMessage("Error saving settings."); }
+    setSaving(false);
+  };
+
+  if (!isVisible) return null;
+
+  const allKeys = SETTING_GROUPS.flatMap((g) => g.fields.map((f) => f.key));
+  const detectedCount = allKeys.filter((k) => detected[k]?.found).length;
+  const configuredCount = allKeys.filter((k) => (settings as any)[k]).length;
+
+  return (
+    <div className="flex-1 flex flex-col bg-white overflow-y-auto">
+      {/* Header */}
+      <div className="px-6 py-4 border-b border-gray-200 flex items-center justify-between sticky top-0 bg-white z-10">
+        <div className="flex items-center gap-4">
+          <h2 className="text-lg font-semibold text-gray-800">Settings</h2>
+          <span className="text-xs text-gray-400">{configuredCount}/{allKeys.length} configured</span>
+        </div>
+        <button onClick={onClose} className="text-sm text-gray-500 hover:text-gray-700">Back to Chat</button>
+      </div>
+
+      <div className="p-6 max-w-2xl space-y-8">
+        {/* Auto-detect */}
+        <div className="p-4 bg-gradient-to-r from-emerald-50 to-blue-50 border border-emerald-200 rounded-lg">
+          <div className="flex items-center justify-between mb-2">
+            <h3 className="text-sm font-semibold text-gray-800">Auto-Detect MCP Tools</h3>
+            <div className="flex gap-2">
+              <button onClick={handleDetect} disabled={detecting} className="px-3 py-1.5 bg-emerald-600 text-white rounded-md hover:bg-emerald-700 disabled:opacity-50 text-xs font-medium">
+                {detecting ? "Scanning..." : "Scan System"}
+              </button>
+              {detectedCount > 0 && (
+                <button onClick={handleApplyDetected} className="px-3 py-1.5 bg-blue-600 text-white rounded-md hover:bg-blue-700 text-xs font-medium">
+                  Apply {detectedCount} found
+                </button>
+              )}
+            </div>
+          </div>
+          {Object.keys(detected).length > 0 && (
+            <div className="mt-3 grid grid-cols-2 gap-1.5">
+              {allKeys.map((key) => {
+                const info = detected[key];
+                if (!info) return null;
+                const label = SETTING_GROUPS.flatMap((g) => g.fields).find((f) => f.key === key)?.label || key;
+                return (
+                  <div key={key} className="flex items-center gap-1.5 text-xs">
+                    <StatusDot found={info.found} />
+                    <span className={info.found ? "text-gray-700" : "text-gray-400"}>{label}</span>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+
+        {/* Language */}
+        <div>
+          <h3 className="text-sm font-semibold text-gray-700 mb-3 uppercase tracking-wider">Language / 語言</h3>
+          <div className="flex gap-2">
+            {LANGUAGE_OPTIONS.map((opt) => (
+              <button key={opt.code} onClick={() => onLanguageChange(opt.code)} className={`px-4 py-2 rounded-lg text-sm font-medium transition-all border ${language === opt.code ? "bg-blue-600 text-white border-blue-600 shadow" : "bg-white text-gray-600 border-gray-300 hover:border-gray-400"}`}>
+                {opt.label}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Social Accounts */}
+        <AccountsManager />
+
+        {/* MCP + General settings */}
+        {SETTING_GROUPS.map((group) => (
+          <div key={group.title}>
+            <h3 className="text-sm font-semibold text-gray-700 mb-3 uppercase tracking-wider">{group.title}</h3>
+            {group.guide && <SetupGuide guide={group.guide} />}
+            <div className="space-y-3">
+              {group.fields.map((field) => {
+                const det = detected[field.key];
+                const hasValue = !!(settings as any)[field.key];
+                return (
+                  <div key={field.key}>
+                    <label className="text-sm text-gray-600 flex items-center gap-2 mb-1">
+                      {hasValue ? <StatusDot found={true} /> : det ? <StatusDot found={det.found} /> : null}
+                      {field.label}
+                      {det?.found && !(settings as any)[field.key] && (
+                        <button onClick={() => setSettings((prev) => ({ ...prev, [field.key]: det.value }))} className="text-xs text-emerald-600 hover:text-emerald-800 font-medium ml-1">
+                          use detected
+                        </button>
+                      )}
+                    </label>
+                    <input
+                      type={field.sensitive ? "password" : "text"}
+                      value={(settings as any)[field.key] || ""}
+                      onChange={(e) => setSettings((prev) => ({ ...prev, [field.key]: e.target.value }))}
+                      placeholder={field.placeholder}
+                      className={`w-full px-3 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 font-mono ${hasValue ? "border-green-300 bg-green-50/30" : "border-gray-300"}`}
+                    />
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        ))}
+
+        {/* Save */}
+        <div className="flex items-center gap-3">
+          <button onClick={handleSave} disabled={saving} className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 text-sm">
+            {saving ? "Saving..." : "Save Settings"}
+          </button>
+          {message && <span className="text-sm text-gray-600">{message}</span>}
+        </div>
+      </div>
+    </div>
+  );
+}

package/client/components/Sidebar.tsx

@@ -0,0 +1,198 @@
+import React from "react";
+import type { Language } from "../App";
+
+interface Session {
+  id: string;
+  title: string;
+  workspace_path: string;
+  created_at: string;
+  updated_at: string;
+}
+
+const LANGUAGES: { code: Language; flag: string; label: string }[] = [
+  { code: "zh-TW", flag: "TW", label: "繁中" },
+  { code: "en", flag: "EN", label: "English" },
+  { code: "ja", flag: "JA", label: "日本語" },
+];
+
+interface SidebarProps {
+  sessions: Session[];
+  selectedSessionId: string | null;
+  onSelectSession: (id: string) => void;
+  onNewSession: () => void;
+  onDeleteSession: (id: string) => void;
+  onShowSettings: () => void;
+  defaultWorkspace: string;
+  isConnected: boolean;
+  language: Language;
+  onLanguageChange: (lang: Language) => void;
+}
+
+function formatTime(dateStr: string): string {
+  const d = new Date(dateStr);
+  const now = new Date();
+  const diffMs = now.getTime() - d.getTime();
+  const diffMin = Math.floor(diffMs / 60000);
+  if (diffMin < 1) return "just now";
+  if (diffMin < 60) return `${diffMin}m ago`;
+  const diffHr = Math.floor(diffMin / 60);
+  if (diffHr < 24) return `${diffHr}h ago`;
+  return d.toLocaleDateString();
+}
+
+export function Sidebar({
+  sessions,
+  selectedSessionId,
+  onSelectSession,
+  onNewSession,
+  onDeleteSession,
+  onShowSettings,
+  defaultWorkspace,
+  isConnected,
+  language,
+  onLanguageChange,
+}: SidebarProps) {
+  return (
+    <div className="flex flex-col h-full bg-gray-900 text-white">
+      {/* Header */}
+      <div className="p-4 border-b border-gray-700">
+        <div className="flex items-center gap-2 mb-3">
+          <div className="w-7 h-7 rounded-lg bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white text-xs font-bold">
+            CW
+          </div>
+          <div>
+            <h1 className="text-sm font-bold text-gray-200 leading-tight">Claude World Studio</h1>
+            <div className="flex items-center gap-1.5 mt-0.5">
+              <span className={`inline-block w-1.5 h-1.5 rounded-full ${isConnected ? 'bg-green-400' : 'bg-red-400'}`} />
+              <span className="text-[10px] text-gray-500">
+                {isConnected ? 'Connected' : 'Reconnecting...'}
+              </span>
+            </div>
+          </div>
+        </div>
+        <button
+          onClick={onNewSession}
+          className="w-full flex items-center justify-center gap-2 px-4 py-2.5 bg-blue-600 hover:bg-blue-500 rounded-lg transition-colors text-sm font-medium"
+        >
+          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+          </svg>
+          New Session
+        </button>
+      </div>
+
+      {/* Session list */}
+      <div className="flex-1 overflow-y-auto">
+        {sessions.length === 0 ? (
+          <div className="p-4 text-center">
+            <div className="text-gray-500 space-y-3 mt-2">
+              <p className="text-sm font-medium text-gray-400">Get Started</p>
+              <div className="text-xs text-left space-y-2 px-2">
+                <div className="flex gap-2">
+                  <span className="text-blue-400 font-mono shrink-0">1.</span>
+                  <span className="text-gray-400">Click <strong className="text-gray-300">New Session</strong> above</span>
+                </div>
+                <div className="flex gap-2">
+                  <span className="text-blue-400 font-mono shrink-0">2.</span>
+                  <span className="text-gray-400">Ask Claude to discover trends</span>
+                </div>
+                <div className="flex gap-2">
+                  <span className="text-blue-400 font-mono shrink-0">3.</span>
+                  <span className="text-gray-400">Let it research and create content</span>
+                </div>
+                <div className="flex gap-2">
+                  <span className="text-blue-400 font-mono shrink-0">4.</span>
+                  <span className="text-gray-400">Publish directly to Threads/IG</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div className="p-2 space-y-0.5">
+            <div className="px-3 py-1.5 text-[10px] font-semibold text-gray-500 uppercase tracking-wider">
+              Sessions
+            </div>
+            {sessions.map((session) => (
+              <div
+                key={session.id}
+                className={`group flex items-center gap-2 px-3 py-2 rounded-lg cursor-pointer transition-colors ${
+                  selectedSessionId === session.id
+                    ? "bg-gray-700"
+                    : "hover:bg-gray-800"
+                }`}
+                onClick={() => onSelectSession(session.id)}
+              >
+                <div className="flex-1 min-w-0">
+                  <div className="text-sm truncate">{session.title}</div>
+                  <div className="text-[10px] text-gray-500 mt-0.5">
+                    {formatTime(session.updated_at)}
+                  </div>
+                </div>
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onDeleteSession(session.id);
+                  }}
+                  className="opacity-0 group-hover:opacity-100 p-1 hover:bg-gray-600 rounded transition-all text-gray-400 hover:text-white"
+                  title="Delete session"
+                >
+                  <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                  </svg>
+                </button>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Footer */}
+      <div className="p-3 border-t border-gray-700 space-y-2.5">
+        {/* Language switcher */}
+        <div>
+          <div className="text-[10px] text-gray-500 uppercase tracking-wider px-1 mb-1.5">
+            Language
+          </div>
+          <div className="flex gap-1">
+            {LANGUAGES.map((lang) => (
+              <button
+                key={lang.code}
+                onClick={() => onLanguageChange(lang.code)}
+                className={`flex-1 text-[11px] py-1.5 rounded transition-all font-medium ${
+                  language === lang.code
+                    ? "bg-blue-600 text-white shadow-sm"
+                    : "text-gray-400 hover:text-white hover:bg-gray-800"
+                }`}
+                title={lang.label}
+              >
+                {lang.flag}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {defaultWorkspace && (
+          <div
+            className="flex items-center gap-1.5 text-[10px] text-gray-500 truncate px-1"
+            title={defaultWorkspace}
+          >
+            <svg className="w-3 h-3 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
+            </svg>
+            {defaultWorkspace.split("/").slice(-2).join("/")}
+          </div>
+        )}
+        <button
+          onClick={onShowSettings}
+          className="w-full flex items-center justify-center gap-1.5 text-xs text-gray-400 hover:text-white py-1.5 hover:bg-gray-800 rounded transition-colors"
+        >
+          <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+          </svg>
+          Settings
+        </button>
+      </div>
+    </div>
+  );
+}