@brainpilot/web 0.0.9 → 0.0.11

package/src/components/settings/SettingsDialog.tsx

@@ -1,35 +1,45 @@
 import { FormEvent, useEffect, useState } from "react";
-import { Check, Eye, EyeOff, Loader2, Plug, Plus, Settings, SlidersHorizontal, Trash2, UserRound, X } from "lucide-react";
+import { Check, Database, Eye, EyeOff, Loader2, Plug, Plus, Settings, SlidersHorizontal, Trash2, UserRound, X } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
 import type { McpServerEntry, ProviderProfile, ProviderApi } from "../../contracts/backend";
 import { useAuth } from "../../contexts/AuthContext";
 import { usePreferences } from "../../contexts/PreferencesContext";
 import { useT } from "../../i18n/useT";
 import { api } from "../../utils/api";
+import { runtimeConfig } from "../../config";
+import { EXAMPLE_MODEL } from "@brainpilot/protocol";
 import { CustomSelect } from "../primitives/CustomSelect";
 import { IconButton } from "../primitives/IconButton";
+import { KnowledgeBasePanel } from "./KnowledgeBasePanel";
 
-type SettingsTab = "account" | "providers" | "mcp" | "preferences";
+type SettingsTab = "account" | "providers" | "mcp" | "knowledgeBase" | "preferences";
 
 type SettingsDialogProps = {
   isOpen: boolean;
   onClose: () => void;
 };
 
-const tabs: Array<{ id: SettingsTab; labelKey: string; icon: LucideIcon }> = [
+const ALL_TABS: Array<{ id: SettingsTab; labelKey: string; icon: LucideIcon }> = [
   { id: "account", labelKey: "settings.tab.account", icon: UserRound },
   { id: "providers", labelKey: "settings.tab.providers", icon: SlidersHorizontal },
   { id: "mcp", labelKey: "settings.tab.mcp", icon: Plug },
+  { id: "knowledgeBase", labelKey: "settings.tab.knowledgeBase", icon: Database },
   { id: "preferences", labelKey: "settings.tab.preferences", icon: Settings },
 ];
 
+// Local single-user mode has no host-managed identity — the account tab would
+// only show placeholder "local / local / 1970" values, so drop it entirely.
+const tabs = runtimeConfig.localMode
+  ? ALL_TABS.filter((tab) => tab.id !== "account")
+  : ALL_TABS;
+
 const DEFAULT_PROVIDER_FORM = {
   name: "",
   baseUrl: "https://api.anthropic.com",
   api: "anthropic-messages" as ProviderApi,
   apiKey: "",
   apiKeyMasked: "",
-  models: ["claude-opus-4-6"],
+  models: [EXAMPLE_MODEL],
   iconColor: "#111111",
   notes: "",
 };
@@ -56,7 +66,7 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
   const { user } = useAuth();
   const preferences = usePreferences();
   const t = useT();
-  const [activeTab, setActiveTab] = useState<SettingsTab>("account");
+  const [activeTab, setActiveTab] = useState<SettingsTab>(tabs[0].id);
   const [providers, setProviders] = useState<ProviderProfile[]>([]);
   const [mcpServers, setMcpServers] = useState<McpServerEntry[]>([]);
   const [providerForm, setProviderForm] = useState(DEFAULT_PROVIDER_FORM);
@@ -364,7 +374,6 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
                   </div>
                 </dl>
                 <p className="settings-note">{t("settings.account.managedByHost")}</p>
-                {version ? <span className="settings-version">{version}</span> : null}
               </section>
             ) : null}
 
@@ -440,6 +449,19 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
                     </article>
                   );
 
+                  if (providers.length === 0) {
+                    return (
+                      <div className="settings-empty">
+                        <SlidersHorizontal size={22} />
+                        <strong>{t("settings.providers.empty")}</strong>
+                        <p>{t("settings.providers.emptyHint")}</p>
+                        <button className="settings-button" onClick={openProviderForm} type="button">
+                          {t("settings.providers.add")}
+                        </button>
+                      </div>
+                    );
+                  }
+
                   return (
                     <>
                       {sharedProviders.length > 0 ? (
@@ -475,72 +497,113 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
                     {t("settings.mcp.addServer")}
                   </button>
                 </div>
-                <div className="settings-list">
-                  {mcpServers.map((server) => (
-                    <article className="settings-list-item" key={server.name}>
-                      <div>
-                        <strong>{server.name}</strong>
-                        <span>{server.type === "stdio" ? [server.command, ...(server.args || [])].filter(Boolean).join(" ") : server.url}</span>
-                        <small>{server.type}</small>
-                      </div>
-                      <div className="settings-list-item__actions mcp-actions">
-                        <button onClick={() => editMcpServer(server)} type="button">{t("settings.mcp.edit")}</button>
-                        <button onClick={() => void removeMcpServer(server.name)} type="button">{t("settings.mcp.remove")}</button>
-                      </div>
-                    </article>
-                  ))}
-                </div>
+                {mcpServers.length === 0 ? (
+                  <div className="settings-empty">
+                    <Plug size={22} />
+                    <strong>{t("settings.mcp.empty")}</strong>
+                    <p>{t("settings.mcp.emptyHint")}</p>
+                    <button className="settings-button" onClick={openMcpForm} type="button">
+                      {t("settings.mcp.addServer")}
+                    </button>
+                  </div>
+                ) : (
+                  <div className="settings-list">
+                    {mcpServers.map((server) => (
+                      <article className="settings-list-item" key={server.name}>
+                        <div>
+                          <strong>
+                            {server.name}
+                            <span className={`mcp-transport-chip mcp-transport-chip--${server.type}`}>{server.type}</span>
+                          </strong>
+                          <span>{server.type === "stdio" ? [server.command, ...(server.args || [])].filter(Boolean).join(" ") : server.url}</span>
+                        </div>
+                        <div className="settings-list-item__actions mcp-actions">
+                          <button onClick={() => editMcpServer(server)} type="button">{t("settings.mcp.edit")}</button>
+                          <button onClick={() => void removeMcpServer(server.name)} type="button">{t("settings.mcp.remove")}</button>
+                        </div>
+                      </article>
+                    ))}
+                  </div>
+                )}
               </section>
             ) : null}
 
+            {activeTab === "knowledgeBase" ? <KnowledgeBasePanel /> : null}
+
             {activeTab === "preferences" ? (
               <section className="settings-section">
                 <h3>{t("settings.prefs.title")}</h3>
-                <div className="settings-field">
-                  <span>{t("settings.prefs.theme")}</span>
-                  <CustomSelect
-                    ariaLabel={t("settings.prefs.theme")}
-                    onChange={(value) => preferences.setTheme(value as typeof preferences.theme)}
-                    options={[
-                      { label: t("settings.prefs.themeLight"), value: "light" },
-                      { label: t("settings.prefs.themeDark"), value: "dark" },
-                      { label: t("settings.prefs.themeSystem"), value: "system" },
-                    ]}
-                    value={preferences.theme}
-                  />
+
+                <div className="settings-group">
+                  <h4 className="settings-group__title">{t("settings.prefs.groupAppearance")}</h4>
+                  <div className="settings-field settings-field--split">
+                    <div className="settings-field__label">
+                      <span>{t("settings.prefs.theme")}</span>
+                      <small>{t("settings.prefs.themeDesc")}</small>
+                    </div>
+                    <CustomSelect
+                      ariaLabel={t("settings.prefs.theme")}
+                      onChange={(value) => preferences.setTheme(value as typeof preferences.theme)}
+                      options={[
+                        { label: t("settings.prefs.themeLight"), value: "light" },
+                        { label: t("settings.prefs.themeDark"), value: "dark" },
+                        { label: t("settings.prefs.themeSystem"), value: "system" },
+                      ]}
+                      value={preferences.theme}
+                    />
+                  </div>
+                  <div className="settings-field settings-field--split">
+                    <div className="settings-field__label">
+                      <span>{t("settings.prefs.language")}</span>
+                      <small>{t("settings.prefs.languageDesc")}</small>
+                    </div>
+                    <CustomSelect
+                      ariaLabel={t("settings.prefs.language")}
+                      onChange={(value) => preferences.setLanguage(value as typeof preferences.language)}
+                      options={[
+                        { label: "简体中文", value: "zh-CN" },
+                        { label: "English", value: "en-US" },
+                      ]}
+                      value={preferences.language}
+                    />
+                  </div>
                 </div>
-                <div className="settings-field">
-                  <span>{t("settings.prefs.language")}</span>
-                  <CustomSelect
-                    ariaLabel={t("settings.prefs.language")}
-                    onChange={(value) => preferences.setLanguage(value as typeof preferences.language)}
-                    options={[
-                      { label: "简体中文", value: "zh-CN" },
-                      { label: "English", value: "en-US" },
-                    ]}
-                    value={preferences.language}
-                  />
+
+                <div className="settings-group">
+                  <h4 className="settings-group__title">{t("settings.prefs.groupBehavior")}</h4>
+                  <label className="settings-toggle-row">
+                    <span className="settings-toggle-row__text">
+                      <span>{t("settings.prefs.confirmDangerous")}</span>
+                      <small>{t("settings.prefs.confirmDangerousDesc")}</small>
+                    </span>
+                    <input
+                      checked={preferences.security.confirmDangerousActions}
+                      onChange={(event) => preferences.setSecurity({ ...preferences.security, confirmDangerousActions: event.target.checked })}
+                      type="checkbox"
+                    />
+                  </label>
+                  <label className="settings-toggle-row">
+                    <span className="settings-toggle-row__text">
+                      <span>{t("settings.prefs.notifyDone")}</span>
+                      <small>{t("settings.prefs.notifyDoneDesc")}</small>
+                    </span>
+                    <input
+                      checked={preferences.notifications.agentDone}
+                      onChange={(event) => preferences.setNotifications({ ...preferences.notifications, agentDone: event.target.checked })}
+                      type="checkbox"
+                    />
+                  </label>
                 </div>
-                <label className="settings-check">
-                  <input
-                    checked={preferences.security.confirmDangerousActions}
-                    onChange={(event) => preferences.setSecurity({ ...preferences.security, confirmDangerousActions: event.target.checked })}
-                    type="checkbox"
-                  />
-                  <span>{t("settings.prefs.confirmDangerous")}</span>
-                </label>
-                <label className="settings-check">
-                  <input
-                    checked={preferences.notifications.agentDone}
-                    onChange={(event) => preferences.setNotifications({ ...preferences.notifications, agentDone: event.target.checked })}
-                    type="checkbox"
-                  />
-                  <span>{t("settings.prefs.notifyDone")}</span>
-                </label>
               </section>
             ) : null}
           </div>
         </div>
+
+        {version ? (
+          <footer className="settings-modal__footer">
+            <span className="settings-version">{version}</span>
+          </footer>
+        ) : null}
       </section>
 
       {isProviderFormOpen ? (
@@ -611,7 +674,7 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
                 {providerForm.models.map((model, index) => (
                   <label className="provider-model-row" key={`${index}-${providerForm.models.length}`}>
                     <input
-                      placeholder="claude-sonnet-4-6"
+                      placeholder={EXAMPLE_MODEL}
                       value={model}
                       onChange={(event) => updateProviderModel(index, event.target.value)}
                     />
@@ -626,6 +689,9 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
                   </label>
                 ))}
               </div>
+              <p className="provider-form__models-hint">
+                {t("settings.providerForm.modelsHint")}
+              </p>
             </div>
 
             <div className="provider-form__appearance">

package/src/components/shell/SandboxStatus.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from "react";
+import { Radio, Server } from "lucide-react";
 import { useSandbox } from "../../contexts/SandboxContext";
 import { useSessions } from "../../contexts/SessionContext";
 import { useT } from "../../i18n/useT";
@@ -24,6 +25,13 @@ function formatBytes(bytes?: number) {
   return `${value >= 10 ? value.toFixed(0) : value.toFixed(1)} ${units[index]}`;
 }
 
+/** Clamp a percentage into [0, 100] and pick a severity band for the meter fill. */
+function meterLevel(percent?: number): { pct: number; level: "ok" | "warning" | "critical" } {
+  const pct = Math.max(0, Math.min(100, Math.round(percent ?? 0)));
+  const level = pct >= 90 ? "critical" : pct >= 75 ? "warning" : "ok";
+  return { pct, level };
+}
+
 function getConnectionState(status: string, isConnected: boolean): SandboxConnectionState {
   if (status === "running" && isConnected) {
     return "connected";
@@ -64,6 +72,7 @@ function getStatusKey(status: string, isConnected: boolean) {
 export function SandboxStatus() {
   const [isOpen, setIsOpen] = useState(false);
   const [logs, setLogs] = useState("");
+  const [showLogs, setShowLogs] = useState(false);
   const [health, setHealth] = useState<Record<string, unknown> | null>(null);
   const [detailsLoading, setDetailsLoading] = useState(false);
   const rootRef = useRef<HTMLDivElement | null>(null);
@@ -157,98 +166,119 @@ export function SandboxStatus() {
         id="sandbox-status-popover"
         role="dialog"
       >
-        <div className="sandbox-status__header">
-          <span className="sandbox-status__eyebrow">Sandbox</span>
-          <strong>{t(connectionLabelKey[connection])}</strong>
+        <div className={`sandbox-status__hero sandbox-status__hero--${connection}`}>
+          <span className="sandbox-status__hero-dot" aria-hidden="true" />
+          <div className="sandbox-status__hero-text">
+            <strong>{t(connectionLabelKey[connection])}</strong>
+            <span className={isLoading ? "is-loading" : ""}>
+              {(() => {
+                const notice = getStatusKey(effectiveStatus, isConnected);
+                return t(notice.key, notice.vars);
+              })()}
+            </span>
+          </div>
         </div>
-
-        <p className={`sandbox-status__notice ${isLoading ? "is-loading" : ""}`}>
-          {(() => {
-            const notice = getStatusKey(effectiveStatus, isConnected);
-            return t(notice.key, notice.vars);
-          })()}
-        </p>
         {error ? <p className="sandbox-status__empty">{error}</p> : null}
 
         {hasSandbox ? (
           <>
-            <dl className="sandbox-status__grid">
-              <div>
-                <dt>{t("sandbox.label.name")}</dt>
-                <dd>{currentSandbox.name}</dd>
-              </div>
-              <div>
-                <dt>{t("sandbox.label.id")}</dt>
-                <dd>{currentSandbox.id}</dd>
-              </div>
-              <div>
-                <dt>{t("sandbox.label.container")}</dt>
-                <dd>{currentSandbox.containerName || "-"}</dd>
-              </div>
-              <div>
-                <dt>{t("sandbox.label.hostApi")}</dt>
-                <dd>{currentSandbox.hostApiUrl || "-"}</dd>
-              </div>
-              <div>
-                <dt>{t("sandbox.label.port")}</dt>
-                <dd>{currentSandbox.port ?? "-"}</dd>
-              </div>
-              <div>
-                <dt>{t("sandbox.label.created")}</dt>
-                <dd>{new Date(currentSandbox.createdAt).toLocaleString()}</dd>
-              </div>
-            </dl>
-
-            <div className="sandbox-status__metrics">
-              <div>
-                <span>{t("sandbox.label.memory")}</span>
-                <strong>
-                  {formatBytes(stats?.memory.usedBytes)} / {formatBytes(stats?.memory.limitBytes)}
-                </strong>
-                <small>{stats?.memory.percent ?? 0}%</small>
-              </div>
-              <div>
-                <span>{t("sandbox.label.cpu")}</span>
-                <strong>{t("sandbox.cpuUsed", { percent: stats?.cpu.usedPercent ?? 0 })}</strong>
-                <small>
-                  {t("sandbox.cpuQuota", { quota: stats?.cpu.quotaPercent ?? 0, cpus: stats?.cpu.onlineCpus ?? 0 })}
-                </small>
-              </div>
-              <div>
-                <span>{t("sandbox.label.pids")}</span>
-                <strong>
-                  {stats?.pids.current ?? 0} / {stats?.pids.limit ?? t("sandbox.unlimited")}
-                </strong>
-              </div>
-              <div>
-                <span>{t("sandbox.label.disk")}</span>
-                <strong>
-                  {formatBytes(stats?.disk.workspaceUsedBytes)} / {formatBytes(stats?.disk.quotaBytes)}
-                </strong>
-                <small>{stats?.disk.percentOfQuota ?? 0}%</small>
-              </div>
+            <div className="sandbox-status__meters">
+              {(() => {
+                const rows: Array<{ label: string; percent?: number; detail: string }> = [
+                  {
+                    label: t("sandbox.label.memory"),
+                    percent: stats?.memory.percent,
+                    detail: `${formatBytes(stats?.memory.usedBytes)} / ${formatBytes(stats?.memory.limitBytes)}`,
+                  },
+                  {
+                    label: t("sandbox.label.disk"),
+                    percent: stats?.disk.percentOfQuota,
+                    detail: `${formatBytes(stats?.disk.workspaceUsedBytes)} / ${formatBytes(stats?.disk.quotaBytes)}`,
+                  },
+                  {
+                    label: t("sandbox.label.cpu"),
+                    percent: stats?.cpu.usedPercent,
+                    detail: t("sandbox.cpuQuota", { quota: stats?.cpu.quotaPercent ?? 0, cpus: stats?.cpu.onlineCpus ?? 0 }),
+                  },
+                ];
+                return rows.map((row) => {
+                  const { pct, level } = meterLevel(row.percent);
+                  return (
+                    <div className="sandbox-meter" key={row.label}>
+                      <div className="sandbox-meter__head">
+                        <span>{row.label}</span>
+                        <strong>{pct}%</strong>
+                      </div>
+                      <div className="sandbox-meter__track" aria-hidden="true">
+                        <span className={`sandbox-meter__fill sandbox-meter__fill--${level}`} style={{ width: `${pct}%` }} />
+                      </div>
+                      <small>{row.detail}</small>
+                    </div>
+                  );
+                });
+              })()}
             </div>
 
-            <div className="sandbox-status__health">
-              <div>
-                <span>{t("sandbox.label.health")}</span>
-                <strong>{String(health?.status ?? (detailsLoading ? t("sandbox.health.checking") : t("sandbox.health.unknown")))}</strong>
-              </div>
-              <div>
-                <span>{t("sandbox.label.runtime")}</span>
-                <strong>{health?.agent_runtime === false ? t("sandbox.health.offline") : health?.agent_runtime ? t("sandbox.health.online") : "-"}</strong>
-              </div>
-              <div>
-                <span>{t("sandbox.label.sse")}</span>
-                <strong>{isConnected ? t("sandbox.health.connected") : t("sandbox.health.offline")}</strong>
-              </div>
-              <div>
-                <span>{t("sandbox.label.checked")}</span>
-                <strong>{health?.checked_at ? new Date(String(health.checked_at)).toLocaleTimeString() : "-"}</strong>
-              </div>
+            <div className="sandbox-status__chips">
+              {(() => {
+                const runtimeOnline = health?.agent_runtime !== false && !!health?.agent_runtime;
+                const runtimeKnown = health?.agent_runtime !== undefined;
+                return (
+                  <span className={`sandbox-chip sandbox-chip--${runtimeKnown ? (runtimeOnline ? "ok" : "off") : "unknown"}`}>
+                    <Server size={13} />
+                    {t("sandbox.label.runtime")}
+                    <i className="sandbox-chip__dot" aria-hidden="true" />
+                  </span>
+                );
+              })()}
+              <span className={`sandbox-chip sandbox-chip--${isConnected ? "ok" : "off"}`}>
+                <Radio size={13} />
+                {t("sandbox.label.sse")}
+                <i className="sandbox-chip__dot" aria-hidden="true" />
+              </span>
             </div>
 
-            <pre className="sandbox-status__logs">{detailsLoading ? t("sandbox.logs.loading") : logs || t("sandbox.logs.empty")}</pre>
+            <details className="sandbox-status__details">
+              <summary>{t("sandbox.details.more")}</summary>
+              <dl className="sandbox-status__grid">
+                <div>
+                  <dt>{t("sandbox.label.name")}</dt>
+                  <dd>{currentSandbox.name}</dd>
+                </div>
+                <div>
+                  <dt>{t("sandbox.label.id")}</dt>
+                  <dd>{currentSandbox.id}</dd>
+                </div>
+                <div>
+                  <dt>{t("sandbox.label.container")}</dt>
+                  <dd>{currentSandbox.containerName || "-"}</dd>
+                </div>
+                <div>
+                  <dt>{t("sandbox.label.hostApi")}</dt>
+                  <dd>{currentSandbox.hostApiUrl || "-"}</dd>
+                </div>
+                <div>
+                  <dt>{t("sandbox.label.port")}</dt>
+                  <dd>{currentSandbox.port ?? "-"}</dd>
+                </div>
+                <div>
+                  <dt>{t("sandbox.label.pids")}</dt>
+                  <dd>{stats?.pids.current ?? 0} / {stats?.pids.limit ?? t("sandbox.unlimited")}</dd>
+                </div>
+                <div>
+                  <dt>{t("sandbox.label.created")}</dt>
+                  <dd>{new Date(currentSandbox.createdAt).toLocaleString()}</dd>
+                </div>
+                <div>
+                  <dt>{t("sandbox.label.checked")}</dt>
+                  <dd>{health?.checked_at ? new Date(String(health.checked_at)).toLocaleTimeString() : "-"}</dd>
+                </div>
+              </dl>
+            </details>
+
+            {showLogs ? (
+              <pre className="sandbox-status__logs">{detailsLoading ? t("sandbox.logs.loading") : logs || t("sandbox.logs.empty")}</pre>
+            ) : null}
           </>
         ) : (
           <p className="sandbox-status__empty">{t("sandbox.empty")}</p>
@@ -263,7 +293,21 @@ export function SandboxStatus() {
               <button disabled={isLoading} onClick={() => void refresh()} type="button">
                 {t("sandbox.action.refresh")}
               </button>
-              <button disabled={detailsLoading} onClick={() => void loadDetails()} type="button">
+              <button
+                aria-pressed={showLogs}
+                className={showLogs ? "is-active" : ""}
+                disabled={detailsLoading}
+                onClick={() => {
+                  setShowLogs((current) => {
+                    const next = !current;
+                    if (next) {
+                      void loadDetails();
+                    }
+                    return next;
+                  });
+                }}
+                type="button"
+              >
                 {t("sandbox.action.logs")}
               </button>
               <button