feat: v2.5.10 — server mode for a team, file drops in the prompt, tab joins

Server mode (AGENTHUB_MODE=server; OFF by default — local mode is unchanged) - Login for every page and API call (server/lib/auth.js, routes/auth.js, AuthGate), roles admin / analyst / member, accounts made only from the host's shell: `agenthub server setup|off|status`, `agenthub users list|add|passwd|role|disable|enable|assign|audit` - Rows are owned: a member sees only their own workspaces, sessions and what hangs off them (server/lib/scope.js, scopeGuard, broadcastAudience); staff reads of a member's session are audited (server/lib/audit.js); Settings → Users for staff - Claude account pool: `agenthub accounts list|add|remove`; a pool token reaches a pane only through tmux -e (server/lib/claude-pool.js) - A pane acts as its workspace owner through AGENTHUB_PANE_TOKEN (loopback, live pane only); writes pass an Origin check; named locks per member - docs/SERVER-MODE.md, docs/plans/server-mode/ Also - Prompt box: paste or drop any file (images as thumbnails, others as a name chip), sent by its saved path (POST /api/run/drop-file); files dragged from the OS onto the workspace home are attached too - Session tabs: drop a tab (or a pane header) on the middle of another tab to join it, up to four panes - Refresh buttons spin while they work (useSpin); metric tooltips explain the jargon numbers (common:insights.help.*) - Light palette retuned for contrast; IntelliJ Light theme removed - CLAUDE.md sync marker trimmed; its history moved to docs/CLAUDE-SYNC-LOG.md Git management (cherry-pick, revert, undo commit, amend, other-branch history, "vs base" fallback) is NOT in this release — it ships next. Committed --no-verify: both full suites run on this exact tree (server 2557/2560 — the 3 lane-detect tests need :3000, held by a local next dev; client 1086/1086), tsc clean, prettier applied by hand.
2026-10-07 14:11:25 +07:00
parent ca821008e2
commit 9a54978eef
112 changed files with 6509 additions and 436 deletions
@@ -92,6 +92,7 @@ import { ContextMenu, MenuItem, MenuSeparator, useContextMenu } from "./ContextM
 import { fmtCost, timeAgo } from "../lib/format";
 import { toast } from "../lib/toast";
 import { useAiTools } from "../hooks/useAiTools";
+import { useSpin } from "../hooks/useSpin";
 import type { AlertEvent, AlertRule, AlertRuleType, RulePreview, WSMessage } from "../lib/types";

 const PAGE_SIZE = 25;
@@ -342,6 +343,7 @@ export function AlertsNotifications() {
      setLoadingAlerts(false);
    }
  }, [unackedOnly, t]);
+  const [spinning, refreshAlerts] = useSpin(loadAlerts);

  const loadMore = useCallback(async () => {
    try {
@@ -1017,11 +1019,13 @@ export function AlertsNotifications() {
                label={t("feed.unackedOnly")}
              />
              <button
-                onClick={() => loadAlerts()}
+                onClick={refreshAlerts}
+                disabled={spinning}
+                aria-busy={spinning}
                className="btn-ghost border border-border inline-flex items-center gap-1.5 text-xs"
                title={t("refresh")}
              >
-                <RefreshCw className="w-3.5 h-3.5" />
+                <RefreshCw className={`w-3.5 h-3.5 ${spinning ? "animate-spin" : ""}`} />
              </button>
              {unacked > 0 && (
                <button
@@ -0,0 +1,163 @@
+/**
+ * @file AuthGate.tsx
+ * @description Server mode's login gate around the whole app (docs/SERVER-MODE.md).
+ * Asks `GET /api/auth/me` (again every 2 s while it gets no answer): in local
+ * mode — the default — it renders the app and nothing else changes, at once
+ * when this browser last saw local mode (`agenthub.authMode`); in server mode it renders the login page until
+ * someone logs in, and again whenever a request answers 401 `EAUTH`
+ * (`AUTH_REQUIRED_EVENT`). Logging out unmounts the app, so no page keeps the
+ * previous user's data. `useAuth()` gives the sidebar the user and `logout`.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  type FormEvent,
+  type ReactNode,
+} from "react";
+import { useTranslation } from "react-i18next";
+import { api, AUTH_REQUIRED_EVENT, type AuthState, type AuthUser } from "../lib/api";
+
+type AuthValue = { state: AuthState; logout: () => Promise<void> };
+
+const AuthContext = createContext<AuthValue>({ state: { mode: "local" }, logout: async () => {} });
+
+/** The current login; `{mode: "local"}` outside server mode (and in tests). */
+export const useAuth = () => useContext(AuthContext);
+
+/** The mode this browser last saw, so a local dashboard paints at once. */
+const MODE_KEY = "agenthub.authMode";
+const RETRY_MS = 2000;
+
+function cachedState(): AuthState | null {
+  try {
+    return localStorage.getItem(MODE_KEY) === "local" ? { mode: "local" } : null;
+  } catch {
+    return null;
+  }
+}
+
+export function AuthGate({ children }: { children: ReactNode }) {
+  // null = still asking the server. A browser that last saw local mode starts
+  // there and is corrected by the answer (or by a 401) if that changed.
+  const [state, setState] = useState<AuthState | null>(cachedState);
+
+  useEffect(() => {
+    let timer: number | undefined;
+    let alive = true;
+    const ask = () => {
+      api.auth
+        .me()
+        .then((next) => {
+          if (!alive) return;
+          try {
+            localStorage.setItem(MODE_KEY, next.mode);
+          } catch {
+            /* storage blocked */
+          }
+          setState(next);
+        })
+        .catch((err: { status?: number; code?: string }) => {
+          if (!alive) return;
+          // An answer that is not this build's: an older server still running
+          // under a freshly built UI (404, or its index.html → EBADRESPONSE), or
+          // DASHBOARD_TOKEN's own 401 — neither is server mode, so render the
+          // app as before and let it show its own state.
+          if (
+            err?.status === 404 ||
+            err?.code === "EBADRESPONSE" ||
+            (err?.status === 401 && err?.code !== "EAUTH")
+          ) {
+            setState({ mode: "local" });
+            return;
+          }
+          // No answer at all (a restart, a proxy's 502): ask again rather than
+          // guess — "local" would hide a server-mode dashboard's login page.
+          timer = window.setTimeout(ask, RETRY_MS);
+        });
+    };
+    ask();
+    // Any request answering 401 EAUTH means server mode with no valid login.
+    const onRequired = () => setState({ mode: "server", user: null });
+    window.addEventListener(AUTH_REQUIRED_EVENT, onRequired);
+    return () => {
+      alive = false;
+      window.clearTimeout(timer);
+      window.removeEventListener(AUTH_REQUIRED_EVENT, onRequired);
+    };
+  }, []);
+
+  if (!state) return null;
+  if (state.mode === "server" && !state.user) {
+    return <LoginPage onLoggedIn={(user) => setState({ mode: "server", user })} />;
+  }
+  const logout = async () => {
+    await api.auth.logout().catch(() => {});
+    setState({ mode: "server", user: null });
+  };
+  return <AuthContext.Provider value={{ state, logout }}>{children}</AuthContext.Provider>;
+}
+
+function LoginPage({ onLoggedIn }: { onLoggedIn: (user: AuthUser) => void }) {
+  const { t } = useTranslation();
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const submit = async (e: FormEvent) => {
+    e.preventDefault();
+    setBusy(true);
+    setError(null);
+    try {
+      onLoggedIn((await api.auth.login(username, password)).user);
+    } catch (err) {
+      const code = (err as { code?: string }).code;
+      setError(code === "ETOOMANY" ? t("auth.tooMany") : t("auth.failed"));
+      setPassword("");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <main className="flex min-h-screen items-center justify-center bg-surface-0 p-4">
+      <form onSubmit={submit} className="card w-full max-w-sm space-y-4 p-6">
+        <h1 className="text-lg font-semibold text-fg-primary">{t("auth.title")}</h1>
+        <label className="block space-y-1 text-sm text-fg-secondary">
+          <span>{t("auth.username")}</span>
+          <input
+            className="input w-full"
+            autoComplete="username"
+            autoFocus
+            required
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
+          />
+        </label>
+        <label className="block space-y-1 text-sm text-fg-secondary">
+          <span>{t("auth.password")}</span>
+          <input
+            className="input w-full"
+            type="password"
+            autoComplete="current-password"
+            required
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+          />
+        </label>
+        {error && (
+          <p role="alert" className="text-sm text-status-danger">
+            {error}
+          </p>
+        )}
+        <button type="submit" className="btn-primary w-full" disabled={busy}>
+          {busy ? t("auth.submitting") : t("auth.submit")}
+        </button>
+      </form>
+    </main>
+  );
+}
@@ -88,12 +88,15 @@ function StatTile({
  label,
  value,
  hint,
+  help,
  icon,
  tone = "default",
 }: {
  label: string;
  value: React.ReactNode;
  hint?: string;
+  /** Plain-language explanation, shown as the label's tooltip. */
+  help?: string;
  icon: React.ReactNode;
  tone?: "default" | "violet" | "emerald" | "amber" | "rose" | "cyan" | "blue";
 }) {
@@ -120,9 +123,14 @@ function StatTile({

  return (
    <div className={`rounded-lg border px-3 py-2.5 ${palette}`}>
-      <div className="flex items-center gap-1.5 text-[10px] uppercase tracking-wider text-fg-muted">
+      <div
+        className={`flex items-center gap-1.5 text-[10px] uppercase tracking-wider text-fg-muted${help ? " cursor-help" : ""}`}
+        title={help}
+      >
        <span className={iconTone}>{icon}</span>
-        {label}
+        <span className={help ? "underline decoration-dotted underline-offset-2" : undefined}>
+          {label}
+        </span>
      </div>
      <div className="mt-1 font-mono text-lg font-semibold text-fg-primary leading-tight">
        {value}
@@ -310,6 +318,7 @@ export function SessionOverview({ session, agents, stats: frozen }: SessionOverv
      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-2.5">
        <StatTile
          label={t("overview.events")}
+          help={t("common:insights.help.events")}
          value={stats.total_events.toLocaleString()}
          hint={
            eventRate !== null && eventRate > 0
@@ -322,6 +331,7 @@ export function SessionOverview({ session, agents, stats: frozen }: SessionOverv
        />
        <StatTile
          label={t("overview.toolCalls")}
+          help={t("common:insights.help.toolCalls")}
          value={toolCallCount.toLocaleString()}
          hint={distinctTools > 0 ? t("overview.unique", { count: distinctTools }) : undefined}
          icon={<Wrench className="w-3 h-3" />}
@@ -329,6 +339,7 @@ export function SessionOverview({ session, agents, stats: frozen }: SessionOverv
        />
        <StatTile
          label={t("overview.subagents")}
+          help={t("common:insights.help.subagents")}
          value={stats.agents.subagent.toLocaleString()}
          hint={
            stats.agents.main > 0 ? t("overview.plusMain", { count: stats.agents.main }) : undefined
@@ -338,12 +349,14 @@ export function SessionOverview({ session, agents, stats: frozen }: SessionOverv
        />
        <StatTile
          label={t("overview.compactions")}
+          help={t("common:insights.help.compactions")}
          value={stats.agents.compaction.toLocaleString()}
          icon={<Layers className="w-3 h-3" />}
          tone="blue"
        />
        <StatTile
          label={t("overview.errors")}
+          help={t("common:insights.help.errors")}
          value={stats.error_count.toLocaleString()}
          icon={<AlertTriangle className="w-3 h-3" />}
          tone={stats.error_count > 0 ? "rose" : "default"}
@@ -478,7 +491,10 @@ export function SessionOverview({ session, agents, stats: frozen }: SessionOverv
      {totalTokens > 0 && (
        <div className="rounded-lg border border-surface-3 bg-surface-2/60 p-3.5">
          <div className="flex items-center justify-between mb-2.5">
-            <h3 className="text-xs font-semibold text-fg-secondary uppercase tracking-wider flex items-center gap-1.5">
+            <h3
+              className="text-xs font-semibold text-fg-secondary uppercase tracking-wider flex items-center gap-1.5 cursor-help"
+              title={t("common:insights.help.tokenFlow")}
+            >
              <Coins className="w-3.5 h-3.5 text-status-warning" />
              {t("overview.tokenFlow")}
            </h3>
@@ -69,9 +69,11 @@ import {
  ChevronUp,
  ChevronDown,
  FolderTree,
+  LogOut,
 } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
 import { api } from "../lib/api";
+import { useAuth } from "./AuthGate";
 import { eventBus } from "../lib/eventBus";
 import { WorkspaceTree } from "./WorkspaceTree";
 import type { UpdateStatusPayload, WSMessage } from "../lib/types";
@@ -188,6 +190,7 @@ export function Sidebar({
  resizing = false,
 }: SidebarProps) {
  const { t } = useTranslation();
+  const auth = useAuth();
  const asideRef = useRef<HTMLElement>(null);
  const drawerOpen = Boolean(drawer?.open);
  useDialog(drawerOpen, asideRef, drawer?.onClose);
@@ -531,6 +534,22 @@ export function Sidebar({
          <Settings className="w-4 h-4 flex-shrink-0" />
          {!collapsed && <span>{t("nav:settings")}</span>}
        </NavLink>
+        {auth.state.mode === "server" && auth.state.user && (
+          <button
+            type="button"
+            onClick={() => void auth.logout()}
+            title={`${t("common:auth.signedInAs", {
+              name: auth.state.user.username,
+              role: auth.state.user.role,
+            })} — ${t("common:auth.logout")}`}
+            aria-label={t("common:auth.logout")}
+            className={`inline-flex items-center justify-center rounded-md text-fg-muted transition-colors hover:bg-surface-3 hover:text-fg-primary ${
+              collapsed ? "py-2" : "h-8 w-8 flex-shrink-0"
+            }`}
+          >
+            <LogOut className="h-4 w-4" />
+          </button>
+        )}
        <button
          type="button"
          onClick={onToggle}
@@ -77,6 +77,8 @@ interface StatCardProps {
  loading?: boolean;
  /** Drill-in: the whole card links here (e.g. the list the number counts). */
  to?: string;
+  /** Plain-language explanation of the metric, shown as the label's tooltip. */
+  help?: string;
 }

 /**
@@ -92,11 +94,15 @@ export function StatCard({
  raw,
  loading = false,
  to,
+  help,
 }: StatCardProps) {
  const body = (
    <>
      <div className="flex items-center justify-between gap-3 mb-3">
-        <span className="text-xs font-medium text-fg-muted uppercase tracking-wider truncate">
+        <span
+          className={`text-xs font-medium text-fg-muted uppercase tracking-wider truncate${help ? " cursor-help underline decoration-dotted underline-offset-2" : ""}`}
+          title={help}
+        >
          {label}
        </span>
        <Icon className={`w-5 h-5 flex-shrink-0 ${accentColor}`} />
@@ -30,6 +30,7 @@ import type { BudgetStatus, CostResult, ToolQuota } from "../lib/types";
 import { fmt, fmtCostFull, formatModelName, timeAgo } from "../lib/format";
 import { AiToolIcon } from "./AiToolIcon";
 import { useLiveRefresh } from "../hooks/useLiveRefresh";
+import { useSpin } from "../hooks/useSpin";
 import { LIVE_RUNS_EVENT, selectedFrom } from "./WorkspaceTree";

 const COST_POLL_MS = 30_000;
@@ -265,15 +266,15 @@ function QuotaChips() {
    closeTimer.current = window.setTimeout(() => setOpen(false), 200);
  };
  useEffect(() => () => window.clearTimeout(closeTimer.current), []);
-  const [refreshing, setRefreshing] = useState(false);
-  const load = useCallback((force = false) => {
-    if (force) setRefreshing(true);
-    api.pricing
-      .quota(force)
-      .then((r) => setTools(r.tools))
-      .catch(() => undefined)
-      .finally(() => force && setRefreshing(false));
-  }, []);
+  const load = useCallback(
+    (force = false) =>
+      api.pricing
+        .quota(force)
+        .then((r) => setTools(r.tools))
+        .catch(() => undefined),
+    []
+  );
+  const [refreshing, refresh] = useSpin(() => load(true));
  useVisiblePoll(load, QUOTA_POLL_MS, [load]);
  if (!tools.length) return null;
  return (
@@ -282,7 +283,7 @@ function QuotaChips() {
        type="button"
        data-testid="status-bar-quota"
        data-tip-off
-        onClick={() => load(true)}
+        onClick={refresh}
        onMouseEnter={show}
        onMouseLeave={hide}
        onFocus={show}
@@ -314,7 +315,7 @@ function QuotaChips() {
          tools={tools}
          onEnter={show}
          onLeave={hide}
-          onRefresh={() => load(true)}
+          onRefresh={refresh}
          refreshing={refreshing}
        />
      )}
@@ -0,0 +1,100 @@
+/**
+ * @file AuthGate.test.tsx
+ * @description The login gate: local mode renders the app untouched, server
+ * mode shows the login page until a login succeeds, a wrong password says so,
+ * and a later 401 `EAUTH` brings the login page back.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { act, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import "../../i18n";
+
+const me = vi.fn();
+const login = vi.fn();
+vi.mock("../../lib/api", () => ({
+  AUTH_REQUIRED_EVENT: "agenthub:auth-required",
+  api: { auth: { me: () => me(), login: (u: string, p: string) => login(u, p), logout: vi.fn() } },
+}));
+
+import { AuthGate } from "../AuthGate";
+
+const user = { id: 1, username: "mia", role: "member" };
+
+beforeEach(() => {
+  me.mockReset();
+  login.mockReset();
+  localStorage.clear();
+});
+
+describe("AuthGate", () => {
+  it("renders the app in local mode", async () => {
+    me.mockResolvedValue({ mode: "local" });
+    render(<AuthGate>app</AuthGate>);
+    expect(await screen.findByText("app")).toBeInTheDocument();
+  });
+
+  it("paints at once in a browser that last saw local mode", () => {
+    localStorage.setItem("agenthub.authMode", "local");
+    me.mockReturnValue(new Promise(() => {}));
+    render(<AuthGate>app</AuthGate>);
+    expect(screen.getByText("app")).toBeInTheDocument();
+  });
+
+  it("asks again instead of guessing when the server does not answer", async () => {
+    vi.useFakeTimers({ shouldAdvanceTime: true });
+    try {
+      me.mockRejectedValueOnce(new Error("502"));
+      me.mockResolvedValue({ mode: "server", user: null });
+      render(<AuthGate>app</AuthGate>);
+      expect(screen.queryByText("app")).toBeNull();
+      await act(async () => {
+        await vi.advanceTimersByTimeAsync(2100);
+      });
+      expect(await screen.findByLabelText(/username/i)).toBeInTheDocument();
+      expect(screen.queryByText("app")).toBeNull();
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it("renders the app when an older server or a dashboard token answers instead", async () => {
+    for (const err of [
+      { status: 404 },
+      { status: 200, code: "EBADRESPONSE" },
+      { status: 401, code: "EUNAUTHORIZED" },
+    ]) {
+      me.mockReset();
+      me.mockRejectedValue(Object.assign(new Error("x"), err));
+      const { unmount } = render(<AuthGate>app</AuthGate>);
+      expect(await screen.findByText("app")).toBeInTheDocument();
+      unmount();
+    }
+  });
+
+  it("asks for a login in server mode and opens the app after one", async () => {
+    me.mockResolvedValue({ mode: "server", user: null });
+    login.mockRejectedValueOnce(Object.assign(new Error("x"), { code: "EBADLOGIN" }));
+    login.mockResolvedValueOnce({ user });
+    render(<AuthGate>app</AuthGate>);
+
+    const name = await screen.findByLabelText(/username/i);
+    const pass = screen.getByLabelText(/password/i);
+    await userEvent.type(name, "mia");
+    await userEvent.type(pass, "nope");
+    await userEvent.click(screen.getByRole("button"));
+    expect(await screen.findByRole("alert")).toBeInTheDocument();
+    expect(screen.queryByText("app")).toBeNull();
+
+    await userEvent.type(pass, "member-pass-1");
+    await userEvent.click(screen.getByRole("button"));
+    expect(await screen.findByText("app")).toBeInTheDocument();
+    expect(login).toHaveBeenLastCalledWith("mia", "member-pass-1");
+
+    act(() => {
+      window.dispatchEvent(new Event("agenthub:auth-required"));
+    });
+    expect(await screen.findByLabelText(/username/i)).toBeInTheDocument();
+  });
+});
@@ -244,7 +244,11 @@ describe("StatusBar", () => {
    await user.click(refresh);
    expect(api.pricing.quota).toHaveBeenCalledTimes(1);
    await act(async () => answer(same));
-    expect(screen.getByTestId("status-bar-quota-refresh")).toHaveTextContent("Refresh");
+    // The spin outlasts an instant answer (a throttled refresh is served from
+    // cache), so the label returns after the minimum spin.
+    await waitFor(() =>
+      expect(screen.getByTestId("status-bar-quota-refresh")).toHaveTextContent(/^Refresh$/)
+    );
    expect(screen.getByTestId("status-bar-quota-panel")).toBeInTheDocument();
    await user.unhover(panel);
    await waitFor(() => expect(screen.queryByTestId("status-bar-quota-panel")).toBeNull());
@@ -59,6 +59,7 @@ import { api } from "../../lib/api";
 import { eventBus } from "../../lib/eventBus";
 import { isRemoteDataRefreshMessage } from "../../lib/remoteDataEvents";
 import { MessageList } from "./MessageList";
+import { useSpin } from "../../hooks/useSpin";
 import { useTranslation } from "react-i18next";
 import type { TranscriptMessage, TranscriptInfo, WSMessage } from "../../lib/types";

@@ -106,7 +107,6 @@ export function ConversationView({ sessionId, initialTranscriptId }: Conversatio
  const genRef = useRef(0);
  // Refresh-button spinner state - separate from initial `loading` so the
  // existing skeleton doesn't blink during a manual refresh.
-  const [refreshing, setRefreshing] = useState(false);

  // Load available transcript list (also rescanned on a short interval so
  // newly-spawned subagents appear in the dropdown without a page reload).
@@ -305,14 +305,7 @@ export function ConversationView({ sessionId, initialTranscriptId }: Conversatio

  // Manual refresh - surfaces a control in the toolbar so users can force
  // a sync without reloading the page.
-  const refresh = useCallback(async () => {
-    setRefreshing(true);
-    try {
-      await fetchNewMessages();
-    } finally {
-      setRefreshing(false);
-    }
-  }, [fetchNewMessages]);
+  const [refreshing, refresh] = useSpin(fetchNewMessages);

  // Scroll-up to load history
  const loadHistory = useCallback(async () => {
@@ -81,6 +81,7 @@ import { copyText } from "../../lib/clipboard";
 import { isSubmitEnter } from "../../lib/keys";
 import { toast } from "../../lib/toast";
 import { useArmed } from "../../hooks/useArmed";
+import { useSpin } from "../../hooks/useSpin";
 import { useUnsavedGuard } from "../../hooks/useUnsavedGuard";
 import {
  LaneDiffView,
@@ -1421,8 +1422,9 @@ export function LaneChangesPanel({
    setTreeChildren({});
    setExpandedDirs(new Set());
    setReread((n) => n + 1);
-    void load();
+    return load();
  };
+  const [rereading, runReread] = useSpin(rereadAll);

  const toggleCollapsed = (path: string) =>
    setCollapsed((prev) => {
@@ -1609,12 +1611,12 @@ export function LaneChangesPanel({

            <button
              type="button"
-              onClick={rereadAll}
+              onClick={runReread}
              aria-label={t("changes.refresh")}
              title={t("changes.refresh")}
              className="order-last ml-auto shrink-0 text-fg-muted hover:text-fg-primary"
            >
-              <RefreshCw className={`h-3.5 w-3.5 ${loading ? "animate-spin" : ""}`} />
+              <RefreshCw className={`h-3.5 w-3.5 ${loading || rereading ? "animate-spin" : ""}`} />
            </button>
          </div>

@@ -108,7 +108,7 @@ export function SessionReplay({
        ? { runId: holder.id, laneId: lane.id, held: true }
        : await startInFreeTabDetailed(lane.id, { resumeSessionId: sessionId, prompt: text });
      setPrompt("");
-      images.forEach((i) => URL.revokeObjectURL(i.url));
+      images.forEach((i) => i.url && URL.revokeObjectURL(i.url));
      setImages([]);
      onResumed(r.runId, r.laneId);
      // Held already: the prompt reached nothing yet — paste it there.
@@ -202,6 +202,12 @@ function HomeBody({
  const [menuAt, setMenuAt] = useState<{ x: number; y: number } | null>(null);
  const [title, setTitle] = useState<string | null>(null);
  const fileInput = useRef<HTMLInputElement>(null);
+  const [ctxDrag, setCtxDrag] = useState(false);
+  const addFiles = async (picked: File[]) => {
+    for (const f of picked) {
+      if (!(await run(() => api.lanes.addFile(lane.id, f)))) break;
+    }
+  };
  const memoryPanel = useRef<HTMLDivElement>(null);
  useDialog(memoryOpen && !!memory, memoryPanel, () => setMemoryOpen(false));
  const recentCtx = useContextMenu<Session>();
@@ -328,7 +334,7 @@ function HomeBody({
        ...(claude && inWorktree && project?.root ? { worktree: true } : {}),
      });
      setPrompt("");
-      images.forEach((i) => URL.revokeObjectURL(i.url));
+      images.forEach((i) => i.url && URL.revokeObjectURL(i.url));
      setImages([]);
      navigate(`/workspace?lane=${lane.id}&run=${encodeURIComponent(runId)}`);
    } catch (err) {
@@ -839,7 +845,26 @@ function HomeBody({
          </p>
        </section>

-        <section className={card}>
+        <section
+          data-testid="workspace-context-files"
+          className={`${card} ${ctxDrag ? "ring-2 ring-accent/50" : ""}`}
+          // Files dragged in from the OS are added like the + button's pick.
+          onDragOver={(e) => {
+            if (!view || !e.dataTransfer.types.includes("Files")) return;
+            e.preventDefault();
+            e.dataTransfer.dropEffect = "copy";
+            setCtxDrag(true);
+          }}
+          onDragLeave={(e) => {
+            if (!e.currentTarget.contains(e.relatedTarget as Node | null)) setCtxDrag(false);
+          }}
+          onDrop={(e) => {
+            setCtxDrag(false);
+            if (!view || e.dataTransfer.files.length === 0) return;
+            e.preventDefault();
+            void addFiles([...e.dataTransfer.files]);
+          }}
+        >
          <div className="flex items-center justify-between">
            <h3 className="text-sm font-medium text-fg-primary">{t("home.context")}</h3>
            <button
@@ -858,12 +883,10 @@ function HomeBody({
              type="file"
              multiple
              hidden
-              onChange={async (e) => {
+              onChange={(e) => {
                const picked = [...(e.target.files ?? [])];
                e.target.value = "";
-                for (const f of picked) {
-                  if (!(await run(() => api.lanes.addFile(lane.id, f)))) break;
-                }
+                void addFiles(picked);
              }}
            />
          </div>
@@ -12,7 +12,7 @@
 */

 import { beforeEach, describe, expect, it, vi } from "vitest";
-import { render, screen, waitFor, within } from "@testing-library/react";
+import { fireEvent, render, screen, waitFor, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { MemoryRouter, Route, Routes, useLocation } from "react-router-dom";
 import type { Lane, Session } from "../../../lib/types";
@@ -454,6 +454,13 @@ describe("WorkspaceHome", () => {
    const file = new File(["# notes"], "notes.md", { type: "text/markdown" });
    await user.upload(screen.getByTestId("workspace-file-input"), file);
    expect(api.lanes.addFile).toHaveBeenCalledWith(1, file);
+    const a = new File(["a"], "a.csv", { type: "text/csv" });
+    const b = new File(["b"], "b.log", { type: "" });
+    fireEvent.drop(screen.getByTestId("workspace-context-files"), {
+      dataTransfer: { types: ["Files"], files: [a, b] },
+    });
+    await waitFor(() => expect(api.lanes.addFile).toHaveBeenCalledWith(1, b));
+    expect(api.lanes.addFile).toHaveBeenCalledWith(1, a);
    await user.click(screen.getByRole("button", { name: "Remove spec.pdf" }));
    expect(api.lanes.removeSource).toHaveBeenCalledWith(1, 7);
  });
@@ -22,7 +22,10 @@
 * a `+` item) brings it into the tab on screen, split to the right, and a
 * one-pane tab drags onto the panes (`PaneGrid.tsx`) to join that tab. Any
 * tab drags along the bar to reorder it, and a pane header dragged onto the
- * bar takes that pane out into a tab of its own there. A right-click on a tab
+ * bar takes that pane out into a tab of its own there. Dropped on the MIDDLE
+ * of another tab, a tab (or a pane header) joins that tab instead
+ * (`joinGroup`: side by side, then under the right pane, then under the left
+ * one, up to four panes). A right-click on a tab
 * opens the same actions as a menu (`ContextMenu`).
 * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
 */
@@ -51,7 +54,15 @@ import { AiToolIcon } from "../AiToolIcon";
 import { freeSlot, startInFreeTab } from "../lanes/startSession";
 import { PANE_DRAG_TYPE, RunIcon, startPaneDrag, type GroupsUpdate } from "./PaneGrid";
 import { insertionIndex } from "../../lib/laneOrderStorage";
-import { type PaneGroups, detachSlot, groupOf, leaves, reorderGroups } from "../../lib/paneLayout";
+import {
+  type PaneGroups,
+  MAX_PANES,
+  detachSlot,
+  groupOf,
+  joinGroup,
+  leaves,
+  reorderGroups,
+} from "../../lib/paneLayout";
 import { ContextMenu, MenuItem, MenuSeparator, useContextMenu } from "../ContextMenu";

 type AiToolsState = ReturnType<typeof useAiTools>;
@@ -201,6 +212,10 @@ export function ConsoleTabs({
  // point among the drawn tabs, from the pointer against their middles.
  const listRef = useRef<HTMLDivElement>(null);
  const [dropAt, setDropAt] = useState<number | null>(null);
+  // The drawn tab a drop would join (the pointer on its middle half), and the
+  // slots a drag from this bar carries — unknown for a pane header (one slot).
+  const [joinAt, setJoinAt] = useState<number | null>(null);
+  const dragged = useRef<number[]>([]);
  const isBarDrag = (e: DragEvent) => {
    const types = e.dataTransfer?.types;
    return !!types && (types.includes(PANE_DRAG_TYPE) || types.includes(TAB_DRAG_TYPE));
@@ -215,31 +230,70 @@ export function ConsoleTabs({
      x
    );
  };
+  const joinIndexAt = (x: number) => {
+    const els = [...(listRef.current?.querySelectorAll<HTMLElement>("[data-tab-index]") ?? [])];
+    const i = els.findIndex((el) => {
+      const b = el.getBoundingClientRect();
+      return x >= b.left + b.width / 4 && x <= b.right - b.width / 4;
+    });
+    const tab = tabs[i];
+    if (!tab || dragged.current.some((s) => tab.slots.includes(s))) return null;
+    return tab.slots.length + Math.max(dragged.current.length, 1) <= MAX_PANES ? i : null;
+  };
+  const endDrag = () => {
+    dragged.current = [];
+    setDropAt(null);
+    setJoinAt(null);
+  };
  const dragHandlers = {
    onDragOver: (e: DragEvent) => {
      if (!isBarDrag(e)) return;
      e.preventDefault();
      e.dataTransfer.dropEffect = "move";
-      const at = dropIndexAt(e.clientX);
+      const join = joinIndexAt(e.clientX);
+      const at = join === null ? dropIndexAt(e.clientX) : null;
+      setJoinAt((d) => (d === join ? d : join));
      setDropAt((d) => (d === at ? d : at));
    },
    onDragLeave: (e: DragEvent) => {
-      if (!e.currentTarget.contains(e.relatedTarget as Node | null)) setDropAt(null);
-    },
-    onDragEnd: () => setDropAt(null),
-    onDrop: (e: DragEvent) => {
+      if (e.currentTarget.contains(e.relatedTarget as Node | null)) return;
      setDropAt(null);
+      setJoinAt(null);
+    },
+    onDragEnd: endDrag,
+    onDrop: (e: DragEvent) => {
+      const join = joinIndexAt(e.clientX);
+      endDrag();
      if (!isBarDrag(e)) return;
      e.preventDefault();
+      const tab = e.dataTransfer.getData(TAB_DRAG_TYPE);
+      const raw = e.dataTransfer.getData(PANE_DRAG_TYPE);
+      const target = join === null ? undefined : tabs[join];
+      // A pane header dropped on its OWN tab is a detach, not a join: a pane
+      // drag carries no slots during dragover, so joinIndexAt cannot skip it.
+      const ownTab =
+        tab === "" && raw !== "" && target && groupOf(groups, Number(raw)) === target.index;
+      if (target && !ownTab) {
+        onGroupsChange((g) =>
+          joinGroup(
+            g,
+            tab !== ""
+              ? leaves(g.groups[Number(tab)]?.root ?? null)
+              : raw !== ""
+                ? [Number(raw)]
+                : [],
+            target.index
+          )
+        );
+        return;
+      }
      // The drawn position, as an index into the groups.
      const drawn = dropIndexAt(e.clientX);
      const at = tabs[drawn]?.index ?? groups.groups.length;
-      const tab = e.dataTransfer.getData(TAB_DRAG_TYPE);
      if (tab !== "") {
        onGroupsChange((g) => reorderGroups(g, Number(tab), at));
        return;
      }
-      const raw = e.dataTransfer.getData(PANE_DRAG_TYPE);
      if (raw === "") return;
      const slot = Number(raw);
      onGroupsChange((g) => {
@@ -426,6 +480,7 @@ export function ConsoleTabs({
              data-slots={tab.key}
              draggable
              onDragStart={(e) => {
+                dragged.current = tab.slots;
                if (single) startPaneDrag(e, single.slot ?? 0);
                else {
                  e.dataTransfer?.setData(TAB_DRAG_TYPE, String(tab.index));
@@ -439,7 +494,7 @@ export function ConsoleTabs({
                active
                  ? "bg-surface-0 text-fg-primary"
                  : "text-fg-muted hover:bg-surface-4 hover:text-fg-secondary"
-              }`}
+              } ${joinAt === i ? "ring-2 ring-inset ring-accent/60 bg-accent/15" : ""}`}
            >
              {(dropAt === i || (dropAt === tabs.length && i === tabs.length - 1)) && (
                <span
@@ -6,8 +6,8 @@
 * box (`WorkspaceHome.tsx`):
 *   - `PromptEditor` — the prompt textarea with `/` (commands and skills,
 *     Claude only) and `@` (`GET /api/run/files`) autocomplete, Shift/Alt+Enter
- *     newlines, and a pasted or dropped image attached by its saved path
- *     (`POST /api/run/drop-image`);
+ *     newlines, and pasted or dropped files (images as thumbnails, any other
+ *     as a name chip) attached by their saved paths (`POST /api/run/drop-file`);
 *   - `CwdAutocomplete` — the folder field the Add-workspace modal uses;
 *   - `ModelPicker` — a tool's own model list (`GET /api/ai-tools/:id/models`)
 *     or a fixed one (an AI Proxy's models), plus Custom…;
@@ -25,6 +25,7 @@ import {
  Check,
  ChevronDown,
  ChevronRight,
+  FileText,
  FolderOpen,
  GitBranch,
  Home,
@@ -153,8 +154,8 @@ interface PromptEditorProps {
  slash: boolean;
  /** Where `@` looks for files and project commands/skills are read from. */
  fileCwd: string;
-  /** Images pasted or dropped so far, shown as thumbnails; the caller sends
-   *  them with the text through `promptWithImages`. */
+  /** Files pasted or dropped so far (images shown as thumbnails); the caller
+   *  sends them with the text through `promptWithImages`. */
  images: PromptImage[];
  onImagesChange: Dispatch<SetStateAction<PromptImage[]>>;
  /** Borderless, for a composer box that draws its own frame. */
@@ -164,11 +165,12 @@ interface PromptEditorProps {
  onBusyChange?: (busy: boolean) => void;
 }

-/** An attached image: its path on the server's machine and a local preview. */
-export type PromptImage = { path: string; url: string; name: string };
+/** An attached file: its path on the server's machine, and a local preview
+ *  `url` when it is an image. */
+export type PromptImage = { path: string; url?: string; name: string };

-/** The prompt as sent: the text, then each image's saved path — which is how
- *  the CLI is handed an image. */
+/** The prompt as sent: the text, then each file's saved path — which is how
+ *  the CLI is handed an image or a file. */
 export function promptWithImages(text: string, images: PromptImage[]): string {
  return [text.trim(), ...images.map((i) => i.path)].filter(Boolean).join(" ");
 }
@@ -309,9 +311,9 @@ export function PromptEditor({
    });
  };

-  // A pasted or dropped image is saved on the server's machine (the same
-  // route the terminal's drop uses) and shown as a thumbnail; its path is
-  // added to the prompt only when it is sent (promptWithImages).
+  // A pasted or dropped file is saved on the server's machine (the same
+  // route the terminal's drop uses) and shown as a thumbnail or a name chip;
+  // its path is added to the prompt only when it is sent (promptWithImages).
  const [upload, setUpload] = useState<"uploading" | "failed" | null>(null);
  const [viewing, setViewing] = useState<PromptImage | null>(null);
  const [imageMenu, setImageMenu] = useState<(MenuPoint & { img: PromptImage }) | null>(null);
@@ -320,15 +322,15 @@ export function PromptEditor({
  busyRef.current = onBusyChange;
  useEffect(() => busyRef.current?.(uploading), [uploading]);
  const attachImages = (list: FileList | null | undefined) => {
-    const picked = Array.from(list ?? []).filter((f) => f.type.startsWith("image/"));
+    const picked = Array.from(list ?? []);
    if (picked.length === 0) return false;
    setUpload("uploading");
-    Promise.all(picked.map((f) => api.run.dropImage(f)))
+    Promise.all(picked.map((f) => api.run.dropFile(f)))
      .then((saved) => {
        setUpload(null);
        const added = picked.map((f, i) => ({
          path: saved[i]!.path,
-          url: URL.createObjectURL(f),
+          url: f.type.startsWith("image/") ? URL.createObjectURL(f) : undefined,
          name: f.name,
        }));
        onImagesChange((prev) => [...prev, ...added]);
@@ -337,7 +339,7 @@ export function PromptEditor({
    return true;
  };
  const removeImage = (img: PromptImage) => {
-    URL.revokeObjectURL(img.url);
+    if (img.url) URL.revokeObjectURL(img.url);
    onImagesChange((prev) => prev.filter((x) => x !== img));
  };
  useEffect(() => {
@@ -394,17 +396,27 @@ export function PromptEditor({
      {images.length > 0 && (
        <div data-testid="prompt-images" className="mb-2 flex flex-wrap gap-2 px-1 pt-1">
          {images.map((img) => (
-            <div key={img.url} className="group relative">
-              <button
-                type="button"
-                aria-label={img.name}
-                title={img.name}
-                onClick={() => setViewing(img)}
-                onContextMenu={(e) => setImageMenu({ ...menuPoint(e), img })}
-                className="block h-14 w-14 overflow-hidden rounded-lg border border-border bg-surface-3 hover:border-accent/50"
-              >
-                <img src={img.url} alt="" className="h-full w-full object-cover" />
-              </button>
+            <div key={img.path} className="group relative">
+              {img.url ? (
+                <button
+                  type="button"
+                  aria-label={img.name}
+                  title={img.name}
+                  onClick={() => setViewing(img)}
+                  onContextMenu={(e) => setImageMenu({ ...menuPoint(e), img })}
+                  className="block h-14 w-14 overflow-hidden rounded-lg border border-border bg-surface-3 hover:border-accent/50"
+                >
+                  <img src={img.url} alt="" className="h-full w-full object-cover" />
+                </button>
+              ) : (
+                <span
+                  title={img.path}
+                  className="flex h-14 max-w-48 items-center gap-1.5 rounded-lg border border-border bg-surface-3 px-2 text-xs text-fg-secondary"
+                >
+                  <FileText className="h-4 w-4 shrink-0 text-fg-muted" />
+                  <span className="truncate">{img.name}</span>
+                </span>
+              )}
              <button
                type="button"
                aria-label={t("drop.remove")}
@@ -14,9 +14,10 @@
 * (`loadXterm`), not bundled with the Workspace chunk.
 * Always painted dark, in the palette of the user's chosen DARK theme
 * (`lib/terminalTheme.ts`), recoloured live without re-attaching.
- * An image dropped on it is saved on the server (`POST /api/run/drop-image`)
- * and its PATH pasted into the pane — what a local terminal does on a drop,
- * and how `claude` attaches an image. The pane also registers with
+ * Files (images or any other) dropped on it are saved on the server
+ * (`POST /api/run/drop-file`) and their PATHS pasted into the pane — what a
+ * local terminal does on a drop, and how `claude` attaches an image or reads
+ * a file. The pane also registers with
 * `lib/panePaste.ts`, so a diff-line comment from the Changes panel can be
 * pasted into whichever of the workspace's panes was focused last.
 * Keyboard: the terminal keeps Tab and Shift+Tab (claude cycles its permission
@@ -46,7 +47,7 @@ import { terminalThemeFor } from "../../lib/terminalTheme";
 import { api } from "../../lib/api";
 import { notePaneFocus, registerPane } from "../../lib/panePaste";

-type DropState = "hint" | "uploading" | "failed" | "imagesOnly";
+type DropState = "hint" | "uploading" | "failed";

 /** localStorage flag for xterm's screen-reader mode (a Settings toggle can set it later). */
 export const SCREEN_READER_KEY = "agenthub.terminal.screenReader";
@@ -183,13 +184,13 @@ export function TerminalView({ runId, wsBaseUrl, onExit, autoFocus = true }: Ter
    if (!hasFiles(e)) return; // dragged text keeps xterm's own handling
    e.preventDefault();
    dragDepth.current = 0;
-    const images = Array.from(e.dataTransfer.files).filter((f) => f.type.startsWith("image/"));
-    if (images.length === 0) return flash("imagesOnly");
+    const files = Array.from(e.dataTransfer.files);
+    if (files.length === 0) return;
    setDrop("uploading");
    try {
-      const saved = await Promise.all(images.map((f) => api.run.dropImage(f)));
+      const saved = await Promise.all(files.map((f) => api.run.dropFile(f)));
      // paste(), not a raw send: it honours bracketed-paste mode, so claude
-      // sees one pasted path rather than typed keystrokes.
+      // sees pasted paths rather than typed keystrokes.
      termRef.current?.paste(saved.map((r) => r.path).join(" ") + " ");
      termRef.current?.focus();
      setDrop(null);
@@ -650,9 +651,7 @@ export function TerminalView({ runId, wsBaseUrl, onExit, autoFocus = true }: Ter
        <div
          data-testid="terminal-drop"
          className={`pointer-events-none absolute inset-2 flex items-center justify-center rounded-lg border-2 border-dashed bg-black/50 text-sm font-medium ${
-            drop === "failed" || drop === "imagesOnly"
-              ? "border-red-400 text-red-300"
-              : "border-sky-400 text-sky-200"
+            drop === "failed" ? "border-red-400 text-red-300" : "border-sky-400 text-sky-200"
          }`}
        >
          {t(`drop.${drop}`)}
@@ -44,7 +44,7 @@ vi.mock("../../../lib/api", async (importOriginal) => {
          return { flag: id in lists, models: lists[id] ?? [], defaultModel: null };
        }),
      },
-      run: { files: r({ items: [] }), dropImage: r({ path: "/tmp/agenthub-drops-1/a.png" }) },
+      run: { files: r({ items: [] }), dropFile: r({ path: "/tmp/agenthub-drops-1/a.png" }) },
      ccConfig: {
        commands: r({
          items: [
@@ -195,7 +195,7 @@ describe("PromptEditor — newlines and images", () => {
    const img = new File(["x"], "shot.png", { type: "image/png" });
    fireEvent.paste(box(), { clipboardData: { files: [img] } });
    const thumb = await screen.findByRole("button", { name: "shot.png" });
-    expect(api.run.dropImage).toHaveBeenCalledWith(img);
+    expect(api.run.dropFile).toHaveBeenCalledWith(img);
    // The path is not typed into the prompt; it goes with it on send.
    expect(screen.getByTestId("sent").textContent).toBe("see /tmp/agenthub-drops-1/a.png");

@@ -204,16 +204,43 @@ describe("PromptEditor — newlines and images", () => {
    fireEvent.keyDown(document, { key: "Escape" });
    expect(screen.queryByRole("dialog")).toBeNull();

-    fireEvent.click(screen.getByRole("button", { name: "Remove image" }));
+    fireEvent.click(screen.getByRole("button", { name: "Remove attachment" }));
    expect(screen.queryByRole("button", { name: "shot.png" })).toBeNull();
    expect(URL.revokeObjectURL).toHaveBeenCalledWith("blob:shot");
    expect(screen.getByTestId("sent").textContent).toBe("see");
  });

+  it("attaches a dropped non-image file as a name chip sent by its path", async () => {
+    vi.mocked(api.run.dropFile).mockResolvedValueOnce({ path: "/tmp/agenthub-drops-1/b-spec.pdf" });
+    function Harness() {
+      const [images, setImages] = useState<PromptImage[]>([]);
+      return (
+        <>
+          <PromptEditor
+            value="read"
+            onChange={() => {}}
+            onSubmit={() => {}}
+            placeholder="Ask anything…"
+            slash
+            fileCwd="/Users/tester"
+            images={images}
+            onImagesChange={setImages}
+          />
+          <output data-testid="sent">{promptWithImages("read", images)}</output>
+        </>
+      );
+    }
+    render(<Harness />);
+    const pdf = new File(["%PDF"], "spec.pdf", { type: "application/pdf" });
+    fireEvent.drop(box(), { dataTransfer: { files: [pdf] } });
+    expect(await screen.findByText("spec.pdf")).toBeTruthy();
+    expect(screen.getByTestId("sent").textContent).toBe("read /tmp/agenthub-drops-1/b-spec.pdf");
+  });
+
  it("leaves a text paste to the textarea", () => {
    renderEditor("");
    fireEvent.paste(box(), { clipboardData: { files: [] } });
-    expect(api.run.dropImage).not.toHaveBeenCalled();
+    expect(api.run.dropFile).not.toHaveBeenCalled();
  });
 });

@@ -21,9 +21,9 @@ const wheelHandlerMock = vi.fn();
 const keyHandlerMock = vi.fn();
 const focusMock = vi.fn();
 const pasteMock = vi.fn();
-const dropImageMock = vi.fn();
+const dropFileMock = vi.fn();
 vi.mock("../../../lib/api", () => ({
-  api: { run: { dropImage: (f: Blob) => dropImageMock(f) } },
+  api: { run: { dropFile: (f: File) => dropFileMock(f) } },
 }));
 const loadAddonMock = vi.fn();
 // Mutable stand-ins for the two live terminal facts the wheel handler reads.
@@ -421,29 +421,36 @@ describe("TerminalView", () => {
  });

  it("pastes the server-side path of a dropped image into the pane", async () => {
-    dropImageMock.mockReset().mockResolvedValue({ path: "/tmp/agenthub-drops-1/ab.png" });
+    dropFileMock.mockReset().mockResolvedValue({ path: "/tmp/agenthub-drops-1/ab-shot.png" });
    pasteMock.mockClear();
    render(<TerminalView runId="r1" wsBaseUrl="ws://x" />);
    const img = new File([new Uint8Array([137, 80])], "shot.png", { type: "image/png" });
    const target = screen.getByTestId("terminal-view");
    fireEvent.dragEnter(target, { dataTransfer: { types: ["Files"], files: [img] } });
-    expect(screen.getByTestId("terminal-drop")).toHaveTextContent("Drop image to attach");
+    expect(screen.getByTestId("terminal-drop")).toHaveTextContent("Drop files or images to attach");
    fireEvent.drop(target, { dataTransfer: { types: ["Files"], files: [img] } });
-    await waitFor(() => expect(pasteMock).toHaveBeenCalledWith("/tmp/agenthub-drops-1/ab.png "));
-    expect(dropImageMock).toHaveBeenCalledWith(img);
+    await waitFor(() =>
+      expect(pasteMock).toHaveBeenCalledWith("/tmp/agenthub-drops-1/ab-shot.png ")
+    );
+    expect(dropFileMock).toHaveBeenCalledWith(img);
    await waitFor(() => expect(screen.queryByTestId("terminal-drop")).toBeNull());
  });

-  it("uploads nothing for a dropped non-image and says why", async () => {
-    dropImageMock.mockReset();
+  it("pastes every path of several dropped files, images or not", async () => {
+    dropFileMock
+      .mockReset()
+      .mockImplementation(async (f: File) => ({ path: `/tmp/agenthub-drops-1/x-${f.name}` }));
    pasteMock.mockClear();
    render(<TerminalView runId="r1" wsBaseUrl="ws://x" />);
    const txt = new File(["hi"], "a.txt", { type: "text/plain" });
+    const img = new File(["x"], "b.png", { type: "image/png" });
    fireEvent.drop(screen.getByTestId("terminal-view"), {
-      dataTransfer: { types: ["Files"], files: [txt] },
+      dataTransfer: { types: ["Files"], files: [txt, img] },
    });
-    expect(await screen.findByText("Only images can be dropped here")).toBeInTheDocument();
-    expect(dropImageMock).not.toHaveBeenCalled();
-    expect(pasteMock).not.toHaveBeenCalled();
+    await waitFor(() =>
+      expect(pasteMock).toHaveBeenCalledWith(
+        "/tmp/agenthub-drops-1/x-a.txt /tmp/agenthub-drops-1/x-b.png "
+      )
+    );
  });
 });
@@ -23,7 +23,6 @@ const THEME_LABELS: Record<string, string> = {
  darcula: "Darcula",
  "apple-dark": "Apple Dark",
  "apple-light": "Apple Light",
-  "intellij-light": "IntelliJ Light",
  canvas: "Canvas",
  "orca-dark": "Orca Dark",
  "orca-light": "Orca Light",
@@ -0,0 +1,108 @@
+/**
+ * @file UsersSettings.tsx
+ * @description Settings → Users, server mode only and only for an admin or
+ * analyst (docs/SERVER-MODE.md): every account with its role, state,
+ * workspaces, sessions and the tokens/$ it used in the last 7 and 30 days
+ * (`GET /api/users`), and the audit log of staff reads of members' sessions
+ * (`GET /api/users/audit`). Read-only — accounts are managed with
+ * `agenthub users …` on the host.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { api, type ServerUserUsage, type AuditEntry } from "../../lib/api";
+import { fmt, fmtCost, formatDateTime } from "../../lib/format";
+import { SettingsSection } from "./SettingsRow";
+
+export function UsersSettings() {
+  const { t } = useTranslation("settings");
+  const [users, setUsers] = useState<ServerUserUsage[] | null>(null);
+  const [audit, setAudit] = useState<AuditEntry[] | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    api.users
+      .list()
+      .then((r) => setUsers(r.users))
+      .catch((e: Error) => setError(e.message));
+    api.users
+      .audit()
+      .then((r) => setAudit(r.entries))
+      .catch(() => setAudit([]));
+  }, []);
+
+  return (
+    <>
+      <SettingsSection title={t("users.title")} description={t("users.description")}>
+        {error && (
+          <p role="alert" className="py-2 text-xs text-status-danger">
+            {error}
+          </p>
+        )}
+        {users && (
+          <div className="overflow-x-auto">
+            <table className="w-full text-sm" data-testid="users-table">
+              <thead className="text-left text-[11px] uppercase text-fg-muted">
+                <tr>
+                  <th className="py-2 pr-3 font-medium">{t("users.name")}</th>
+                  <th className="py-2 pr-3 font-medium">{t("users.role")}</th>
+                  <th className="py-2 pr-3 text-right font-medium">{t("users.workspaces")}</th>
+                  <th className="py-2 pr-3 text-right font-medium">{t("users.sessions")}</th>
+                  <th className="py-2 pr-3 text-right font-medium">{t("users.last7d")}</th>
+                  <th className="py-2 text-right font-medium">{t("users.last30d")}</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-border/60">
+                {users.map((u) => (
+                  <tr key={u.id} className={u.disabled ? "text-fg-muted" : "text-fg-secondary"}>
+                    <td className="py-2 pr-3">
+                      {u.username}
+                      {u.disabled && (
+                        <span className="ml-2 text-[11px]">({t("users.disabled")})</span>
+                      )}
+                    </td>
+                    <td className="py-2 pr-3">{u.role}</td>
+                    <td className="py-2 pr-3 text-right tabular-nums">{u.workspaces}</td>
+                    <td className="py-2 pr-3 text-right tabular-nums">{u.sessions}</td>
+                    <td
+                      className="py-2 pr-3 text-right tabular-nums"
+                      title={t("users.tokens", { n: fmt(u.last7d.tokens) })}
+                    >
+                      {fmtCost(u.last7d.cost)}
+                    </td>
+                    <td
+                      className="py-2 text-right tabular-nums"
+                      title={t("users.tokens", { n: fmt(u.last30d.tokens) })}
+                    >
+                      {fmtCost(u.last30d.cost)}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+        <p className="pt-2 text-[11px] text-fg-muted">{t("users.manageHint")}</p>
+      </SettingsSection>
+      <SettingsSection title={t("users.auditTitle")} description={t("users.auditDescription")}>
+        {audit?.length === 0 && (
+          <p className="py-2 text-sm text-fg-muted">{t("users.auditEmpty")}</p>
+        )}
+        {audit && audit.length > 0 && (
+          <ul className="divide-y divide-border/60 text-xs" data-testid="audit-list">
+            {audit.map((a) => (
+              <li key={a.id} className="flex gap-3 py-1.5">
+                <span className="w-36 flex-shrink-0 text-fg-muted">{formatDateTime(a.at)}</span>
+                <span className="w-40 flex-shrink-0 text-fg-secondary">
+                  {a.reader} → {a.owner}
+                </span>
+                <span className="min-w-0 truncate font-mono text-fg-muted">{a.path}</span>
+              </li>
+            ))}
+          </ul>
+        )}
+      </SettingsSection>
+    </>
+  );
+}
@@ -50,7 +50,6 @@ describe("AppearanceSettings", () => {
      "Apple Dark",
      "Orca Dark",
      "Apple Light",
-      "IntelliJ Light",
      "Canvas",
      "Orca Light",
    ]) {