Compare commits

..

2 Commits

Author SHA1 Message Date
nntrivi2001 59533b997b chore: v2.8.73 — Artifacts folder bar restyled; hidden live profile gets a stand-in
- Artifacts: folders are rounded chips with a count badge; rename/delete are
  icons beside the picked folder (double-click renames); New folder is a
  dashed chip; the empty-folder hint mentions drag and drop.
- GET /api/pricing/quota: every Claude row carries its accountUuid.
- Settings → Profiles and the status bar's Usage panel: a profile hidden in
  this browser is left out of the Usage panel too; when the live login is
  hidden, the first visible profile is shown in its place (Logged in now,
  "in use", the % used chip with that profile's own usage). Display only.
2026-11-04 16:14:27 +07:00
nntrivi2001 e21120d51d chore: v2.8.72 — update survives npm-rewritten lockfiles; drag artifacts into folders
- update: before the --ff-only merge, put back package-lock.json /
  client/package-lock.json when they are the ONLY tracked changes (an
  earlier update's npm install rewrote them; v2.8.71 changed
  client/package-lock.json and the merge refused on such installs). Any
  other change still makes the merge refuse.
- Artifacts: drag a row or card onto a folder chip to put it there, onto
  "All folders" to take it out.
2026-11-04 15:27:48 +07:00
19 changed files with 468 additions and 118 deletions
+1 -1
View File
@@ -1,6 +1,6 @@
# Claude Code Working Guide
_Last synced: v2.8.71 (2026-11-04) — artifacts shared with chosen people, per-account folders, and a viewable copy of every page._ A change that makes any statement in this file, `AGENTS.md`, or a README wrong — a moved path, a new or changed extension point, a retired rule — updates that file in the same change-set and bumps this marker. **Bump = replace the version/date and a ≤ 1-line summary; never append a changelog here** — details belong in the commit message and `docs/`, because this whole file is loaded into every session.
_Last synced: v2.8.73 (2026-11-04) — Claude quota rows carry `accountUuid`; the Artifacts folder bar is restyled._ A change that makes any statement in this file, `AGENTS.md`, or a README wrong — a moved path, a new or changed extension point, a retired rule — updates that file in the same change-set and bumps this marker. **Bump = replace the version/date and a ≤ 1-line summary; never append a changelog here** — details belong in the commit message and `docs/`, because this whole file is loaded into every session.
## Project mission
- Maintain a reliable local-first dashboard for Claude Code session monitoring.
+44 -2
View File
@@ -29,7 +29,7 @@
* @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
*/
import { Fragment, useCallback, useEffect, useRef, useState } from "react";
import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from "react";
import { createPortal } from "react-dom";
import { useTranslation } from "react-i18next";
import { Link, useLocation } from "react-router-dom";
@@ -38,6 +38,12 @@ import { api, type RunHandle, type UserQuotaStatus } from "../lib/api";
import type { BudgetStatus, CostResult, ToolQuota } from "../lib/types";
import { fmt, fmtCostFull, formatDateTime, formatModelName, timeAgo } from "../lib/format";
import { AiToolIcon } from "./AiToolIcon";
import {
HIDDEN_PROFILES_EVENT,
isHiddenProfilesKey,
readHiddenProfiles,
standIn,
} from "../lib/hiddenProfilesStorage";
import { useLiveRefresh } from "../hooks/useLiveRefresh";
import { useSpin } from "../hooks/useSpin";
import { sessionChangeMatcher } from "../lib/sessionChange";
@@ -276,10 +282,44 @@ function QuotaPanel({
);
}
/** The profiles hidden in Settings → AI tools → Profiles, kept current. */
function useHiddenProfiles(): string[] {
const [hidden, setHidden] = useState<string[]>(readHiddenProfiles);
useEffect(() => {
const again = () => setHidden(readHiddenProfiles());
const onStorage = (e: StorageEvent) => isHiddenProfilesKey(e.key) && again();
window.addEventListener(HIDDEN_PROFILES_EVENT, again);
window.addEventListener("storage", onStorage);
return () => {
window.removeEventListener(HIDDEN_PROFILES_EVENT, again);
window.removeEventListener("storage", onStorage);
};
}, []);
return hidden;
}
/**
* Claude rows without the hidden profiles. When the live login is one of
* them, the first visible profile stands in as the live row — its own usage
* on the chip and the panel — so the panel never names the hidden account.
*/
export function withoutHidden(tools: ToolQuota[], hidden: string[]): ToolQuota[] {
if (!hidden.length) return tools;
const claude = tools.filter((q) => q.id === "claude");
const isLive = (q: ToolQuota) => q.active !== false;
const decoy = standIn(claude, isLive, hidden);
const keep = (q: ToolQuota) =>
q.id !== "claude" || !q.accountUuid || !hidden.includes(q.accountUuid);
const shown = tools.filter(keep);
if (!decoy) return shown;
// The stand-in leads the Claude rows, as the live login does.
return [{ ...decoy, active: true }, ...shown.filter((q) => q !== decoy)];
}
/** The right-end quota chips; nothing at all until a tool reports one. */
function QuotaChips() {
const { t } = useTranslation("nav");
const [tools, setTools] = useState<ToolQuota[]>([]);
const [fetched, setTools] = useState<ToolQuota[]>([]);
const [open, setOpen] = useState(false);
// Leaving the chips closes the panel only after a beat, and entering the
// panel cancels that: the pointer crosses the gap to read it.
@@ -303,6 +343,8 @@ function QuotaChips() {
);
const [refreshing, refresh] = useSpin(() => load(true));
useVisiblePoll(load, QUOTA_POLL_MS, [load]);
const hidden = useHiddenProfiles();
const tools = useMemo(() => withoutHidden(fetched, hidden), [fetched, hidden]);
if (!tools.length) return null;
return (
<>
@@ -162,7 +162,7 @@ vi.mock("../../lib/api", () => ({
}));
import { api } from "../../lib/api";
import { StatusBar } from "../StatusBar";
import { StatusBar, withoutHidden } from "../StatusBar";
import { LIVE_RUNS_EVENT } from "../WorkspaceTree";
const at = (url: string, ui: React.JSX.Element) =>
@@ -307,3 +307,35 @@ describe("StatusBar", () => {
expect(api.pricing.quota).toHaveBeenLastCalledWith(true);
});
});
describe("withoutHidden", () => {
const row = (accountUuid: string, active: boolean, pct: number) => ({
id: "claude" as const,
active,
accountUuid,
account: `${accountUuid}@x.y`,
windows: [{ label: "5h", usedPercent: pct, resetsAt: null }],
});
const codex = { id: "codex" as const, active: true, windows: [] };
it("leaves the list alone when nothing is hidden", () => {
const list = [row("u1", true, 82), row("u2", false, 19), codex];
expect(withoutHidden(list, [])).toBe(list);
});
it("drops a hidden saved profile", () => {
const out = withoutHidden([row("u1", true, 82), row("u2", false, 19), codex], ["u2"]);
expect(out.map((q) => q.accountUuid ?? q.id)).toEqual(["u1", "codex"]);
});
it("puts the first visible profile, with its own usage, in place of a hidden live login", () => {
const out = withoutHidden(
[row("u1", true, 82), row("u2", false, 19), row("u3", false, 0), codex],
["u1"]
);
expect(out.map((q) => q.accountUuid ?? q.id)).toEqual(["u2", "u3", "codex"]);
expect(out[0]?.active).toBe(true);
expect(out[0]?.windows[0]?.usedPercent).toBe(19);
expect(out[1]?.active).toBe(false);
});
});
@@ -41,6 +41,7 @@ import { toast } from "../../lib/toast";
import {
profileKey,
readHiddenProfiles,
standIn,
toggleHidden,
writeHiddenProfiles,
} from "../../lib/hiddenProfilesStorage";
@@ -526,6 +527,17 @@ function ClaudeProfiles({ pooled, local }: { pooled: boolean; local: boolean })
writeHiddenProfiles(next);
};
const activeHidden = !!active && !reveal && isHidden(active);
/** Shown as the live login while the real one is hidden: the first visible
* profile, with its own usage — a "—" there would only draw the eye. */
const decoy =
activeHidden && items
? standIn(
items.map((p) => ({ ...p, accountUuid: p.accountUuid ?? null })),
(p) => p.active || (!!active?.accountUuid && p.accountUuid === active.accountUuid),
hidden
)
: null;
const shownActive = (p: CcProfile) => (decoy ? p.name === decoy.name : p.active);
const load = useCallback(async () => {
try {
@@ -622,7 +634,9 @@ function ClaudeProfiles({ pooled, local }: { pooled: boolean; local: boolean })
<span>
{t("profiles.mismatch", {
config: mismatchEmail,
owner: activeHidden ? "?" : active?.email || active?.accountUuid || "?",
owner: activeHidden
? decoy?.email || "?"
: active?.email || active?.accountUuid || "?",
})}
</span>
</p>
@@ -639,7 +653,16 @@ function ClaudeProfiles({ pooled, local }: { pooled: boolean; local: boolean })
{t("profiles.activeLabel")}
</div>
{active && activeHidden ? (
<div className="text-sm text-fg-muted">—</div>
decoy ? (
<>
<div className="text-sm text-fg-primary">
{decoy.email || decoy.displayName || decoy.accountUuid}
</div>
<IdentityLine identity={decoy} />
</>
) : (
<div className="text-sm text-fg-muted">{t("profiles.noActive")}</div>
)
) : active ? (
<>
<div className="text-sm text-fg-primary">
@@ -650,7 +673,7 @@ function ClaudeProfiles({ pooled, local }: { pooled: boolean; local: boolean })
) : (
<div className="text-sm text-fg-muted">{t("profiles.noActive")}</div>
)}
{active && !activeSaved && (
{active && !activeSaved && !activeHidden && (
<div className="pt-1.5 space-y-1.5">
<div className="text-[11px] text-status-warning">{t("profiles.unsavedActive")}</div>
<button
@@ -673,7 +696,9 @@ function ClaudeProfiles({ pooled, local }: { pooled: boolean; local: boolean })
{t("profiles.empty")}
</div>
)}
{items?.filter((p) => reveal || !isHidden(p)).map((p) => (
{items
?.filter((p) => reveal || !isHidden(p))
.map((p) => (
<div
key={p.name}
data-testid={`profile-row-${p.name}`}
@@ -695,13 +720,15 @@ function ClaudeProfiles({ pooled, local }: { pooled: boolean; local: boolean })
)
}
/>
{p.active && <ActiveBadge />}
{shownActive(p) && <ActiveBadge />}
<span className="text-xs text-fg-secondary truncate flex-1 min-w-0">
{p.email || p.displayName || p.accountUuid}
</span>
{!p.active && (
{!shownActive(p) && (
<button disabled={busy !== null} onClick={() => switchTo(p)} className={btnCls}>
{busy === `switch:${p.name}` ? t("profiles.switching") : t("profiles.switchButton")}
{busy === `switch:${p.name}`
? t("profiles.switching")
: t("profiles.switchButton")}
</button>
)}
{pooled && <MoveToPool tool="claude" name={p.name} />}
@@ -737,7 +764,7 @@ function ClaudeProfiles({ pooled, local }: { pooled: boolean; local: boolean })
{ctx.menu && (
<ContextMenu x={ctx.menu.x} y={ctx.menu.y} onClose={ctx.close} testId="profile-menu">
<MenuItem onSelect={pick((p) => setRenaming(p.name))}>{t("profiles.rename")}</MenuItem>
{!ctx.menu.item.active && (
{!shownActive(ctx.menu.item) && !ctx.menu.item.active && (
<MenuItem disabled={busy !== null} onSelect={pick(switchTo)}>
{t("profiles.switchButton")}
</MenuItem>
@@ -160,6 +160,19 @@ describe("ToolProfilesSettings — Claude", () => {
expect(screen.getByTestId("profile-row-spare")).toBeInTheDocument();
});
it("shows the first visible profile as the live login while the live one is hidden", async () => {
localStorage.setItem("agenthub.cc.hiddenProfiles", JSON.stringify(["u1"]));
await show();
await settle();
expect(screen.queryByTestId("profile-row-work")).toBeNull();
expect(screen.queryByText("a@b.c")).toBeNull();
expect(screen.queryByText("—")).toBeNull();
const spare = screen.getByTestId("profile-row-spare");
expect(spare).toHaveTextContent(/active/);
expect(screen.queryByRole("button", { name: "Switch to" })).toBeNull();
expect(screen.getAllByText("d@e.f").length).toBe(2);
});
it("does not hide anything in server mode", async () => {
perms.local = false;
localStorage.setItem("agenthub.cc.hiddenProfiles", JSON.stringify(["u2"]));
+6 -2
View File
@@ -262,7 +262,7 @@
"folders.delete": "Delete folder",
"folders.deleteTitle": "Delete the folder “{{name}}”?",
"folders.deleteBody": "Only the folder goes; its artifacts stay where they are.",
"folders.empty": "This folder is empty. Put an artifact here with ⋯ → Move to folder.",
"folders.empty": "This folder is empty. Drag an artifact onto the folder, or use ⋯ → Move to folder.",
"folders.move": "Move to folder…",
"folders.moveTitle": "Move “{{title}}” to a folder",
"folders.private": "Your folders are yours alone: nobody else sees them.",
@@ -275,5 +275,9 @@
"pdf.failed": "This PDF could not be shown. Download it instead.",
"pdf.more": "Showing the first {{shown}} of {{total}} pages — download it for the rest.",
"exportsSwitch": "Keep a viewable copy of Docs and Slides",
"exportsSwitchHint": "When Claude publishes a Claude Docs doc, a deck or a design from an AgentHub session, it is asked to also save a copy (Markdown, PDF or HTML) that the Hub shows to the people it is shared with — they need no claude.ai access. Applies to sessions started afterwards."
"exportsSwitchHint": "When Claude publishes a Claude Docs doc, a deck or a design from an AgentHub session, it is asked to also save a copy (Markdown, PDF or HTML) that the Hub shows to the people it is shared with — they need no claude.ai access. Applies to sessions started afterwards.",
"folders.moved": "Moved to “{{name}}”",
"folders.takenOut": "Taken out of its folder",
"folders.dropHint": "Drop an artifact here to put it in this folder",
"folders.dropOutHint": "Drop an artifact here to take it out of its folder"
}
+6 -2
View File
@@ -260,7 +260,7 @@
"folders.delete": "Xóa thư mục",
"folders.deleteTitle": "Xóa thư mục “{{name}}”?",
"folders.deleteBody": "Chỉ xóa thư mục; các artifact bên trong vẫn giữ nguyên.",
"folders.empty": "Thư mục này trống. Đưa artifact vào bằng ⋯ → Chuyển vào thư mục.",
"folders.empty": "Thư mục này trống. Kéo artifact thả vào thư mục, hoặc dùng ⋯ → Chuyển vào thư mục.",
"folders.move": "Chuyển vào thư mục…",
"folders.moveTitle": "Chuyển “{{title}}” vào thư mục",
"folders.private": "Thư mục là của riêng bạn: người khác không thấy.",
@@ -273,5 +273,9 @@
"pdf.failed": "Không hiển thị được PDF này. Hãy tải về.",
"pdf.more": "Đang hiện {{shown}}/{{total}} trang đầu — tải về để xem hết.",
"exportsSwitch": "Giữ bản xem được của Docs và Slides",
"exportsSwitchHint": "Khi Claude tạo một Claude Docs, slide hoặc design trong phiên AgentHub, Claude được nhắc lưu thêm một bản sao (Markdown, PDF hoặc HTML) để Hub hiển thị cho người được chia sẻ — họ không cần quyền trên claude.ai. Áp dụng cho các phiên mở sau đó."
"exportsSwitchHint": "Khi Claude tạo một Claude Docs, slide hoặc design trong phiên AgentHub, Claude được nhắc lưu thêm một bản sao (Markdown, PDF hoặc HTML) để Hub hiển thị cho người được chia sẻ — họ không cần quyền trên claude.ai. Áp dụng cho các phiên mở sau đó.",
"folders.moved": "Đã chuyển vào “{{name}}”",
"folders.takenOut": "Đã bỏ khỏi thư mục",
"folders.dropHint": "Thả artifact vào đây để đưa vào thư mục này",
"folders.dropOutHint": "Thả artifact vào đây để bỏ khỏi thư mục"
}
+38 -1
View File
@@ -4,12 +4,17 @@
* AI tools → Profiles, kept in localStorage with the same read/validate/
* fallback convention as laneOrderStorage.ts. A viewer preference only: the
* profile files, the API and the database are untouched, and another browser
* still lists every profile.
* still lists every profile. The status bar's Usage panel reads the same list
* (`HIDDEN_PROFILES_EVENT` tells it of a change in this tab), and when the
* live login is hidden both show the first visible profile in its place
* (`standIn`).
*
* @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
*/
const STORAGE_KEY = "agenthub.cc.hiddenProfiles";
/** Fired on `window` after this tab changes the list. */
export const HIDDEN_PROFILES_EVENT = "agenthub:hidden-profiles";
/** A profile's stable key: its account (survives a rename), else its file name. */
export function profileKey(p: { accountUuid: string | null; name?: string }): string {
@@ -34,6 +39,38 @@ export function writeHiddenProfiles(keys: string[]): void {
} catch {
/* ignore quota / disabled storage */
}
try {
window.dispatchEvent(new Event(HIDDEN_PROFILES_EVENT));
} catch {
/* no window (tests outside jsdom) */
}
}
/** True when `key` names a change to the hidden list (a `storage` event's key). */
export const isHiddenProfilesKey = (key: string | null) => key === STORAGE_KEY || key === null;
/**
* The entry shown in place of a hidden live login: the first one in `list`
* that is not hidden, or null when the live one is visible (or none is left).
*/
export function standIn<T extends { accountUuid?: string | null; name?: string }>(
list: T[],
isActive: (x: T) => boolean,
hidden: string[]
): T | null {
const live = list.find(isActive);
if (
!live ||
!hidden.includes(profileKey({ accountUuid: live.accountUuid ?? null, name: live.name }))
)
return null;
return (
list.find(
(x) =>
!isActive(x) &&
!hidden.includes(profileKey({ accountUuid: x.accountUuid ?? null, name: x.name }))
) ?? null
);
}
/** `keys` with `key` added when absent, removed when present. */
+2
View File
@@ -1240,6 +1240,8 @@ export interface ToolQuota {
active?: boolean;
/** The saved profile's label, when the account has one. */
label?: string | null;
/** Claude: the Anthropic account the row is about (hides a profile hidden in Settings). */
accountUuid?: string | null;
/** The signed-in account's email, when the tool's login names one. */
account?: string | null;
/** The subscription's name as the tool reports it (`pro`, `max`, `plus`, `team`…). */
+101 -33
View File
@@ -65,9 +65,11 @@ import {
LayoutGrid,
List,
MoreHorizontal,
Pencil,
Puzzle,
Search,
Sparkles,
Trash2,
X,
} from "lucide-react";
import {
@@ -131,6 +133,17 @@ const PREVIEWABLE =
const PDF = /\.pdf$/i;
/** What a row can do, worked out once for its card, menu and detail sheet. */
/** What a dragged artifact carries: its id, for a folder chip to take. */
const DRAG_TYPE = "application/x-agenthub-artifact";
const dragProps = (a: Artifact) => ({
draggable: true,
onDragStart: (e: React.DragEvent) => {
e.dataTransfer.setData(DRAG_TYPE, String(a.id));
e.dataTransfer.setData("text/plain", a.title);
e.dataTransfer.effectAllowed = "move";
},
});
/** Shared at all: with everyone (the Hub) or with chosen people. */
const isShared = (a: Artifact) => a.shared || (a.sharedWith?.length ?? 0) > 0;
@@ -834,6 +847,11 @@ export function Artifacts() {
active={activeFolder}
counts={(id) => (loaded ?? []).filter((a) => folders.of[a.id] === id).length}
onPick={setFolder}
onDropItem={(id, fid) => {
moveToFolder(id, fid);
const f = fid ? folders.folders.find((x) => x.id === fid) : null;
toast.success(f ? t("folders.moved", { name: f.name }) : t("folders.takenOut"));
}}
/>
{items === null ? (
@@ -1539,6 +1557,7 @@ function ArtifactRow({ inPack, ...props }: ItemProps & { inPack?: boolean }) {
className="flex items-center gap-3 px-3 py-2.5 transition-colors hover:bg-surface-2/60"
data-testid={`artifact-${a.id}`}
onContextMenu={(e) => menu.open(e, null)}
{...dragProps(a)}
>
<KindIcon kind={a.kind} />
<button
@@ -1593,6 +1612,7 @@ function ArtifactCard({ as = "li", ...props }: ItemProps & { as?: "li" | "div" }
className="card flex flex-col gap-2.5 p-4 transition-colors hover:border-border-light"
data-testid={`artifact-${a.id}`}
onContextMenu={(e: React.MouseEvent) => menu.open(e, null)}
{...dragProps(a)}
>
<div className="flex items-start gap-3">
<KindIcon kind={a.kind} />
@@ -2492,13 +2512,35 @@ function FolderBar({
active,
counts,
onPick,
onDropItem,
}: {
folders: { id: string; name: string }[];
active: string;
counts: (id: string) => number;
onPick: (id: string) => void;
/** An artifact dropped on a chip: that folder, or (null, "All folders") none. */
onDropItem: (itemId: number, folderId: string | null) => void;
}) {
const { t } = useTranslation("artifacts");
// The chip an artifact is dragged over ("" = All folders), lit as a target.
const [over, setOver] = useState<string | null>(null);
const dropProps = (target: string) => ({
onDragOver: (e: React.DragEvent) => {
if (!e.dataTransfer.types.includes(DRAG_TYPE)) return;
e.preventDefault();
e.dataTransfer.dropEffect = "move";
if (over !== target) setOver(target);
},
onDragLeave: () => setOver((cur) => (cur === target ? null : cur)),
onDrop: (e: React.DragEvent) => {
setOver(null);
const id = Number(e.dataTransfer.getData(DRAG_TYPE));
if (!Number.isInteger(id) || id <= 0) return;
e.preventDefault();
onDropItem(id, target || null);
},
});
const lit = (target: string) => (over === target ? " ring-2 ring-accent bg-accent-muted" : "");
// `new`: naming a new folder; a folder id: renaming that one.
const [editing, setEditing] = useState<"new" | string | null>(null);
const [name, setName] = useState("");
@@ -2524,36 +2566,80 @@ function FolderBar({
if (active === f.id) onPick("");
};
const chip = (on: boolean) =>
`inline-flex items-center gap-1 rounded-md px-2.5 py-1 text-xs whitespace-nowrap transition-colors ${
on ? "bg-surface-4 text-fg-primary" : "text-fg-muted hover:text-fg-secondary"
`inline-flex h-7 items-center gap-1.5 rounded-full border px-3 text-xs whitespace-nowrap transition-colors ${
on
? "border-accent/40 bg-accent-muted text-fg-primary"
: "border-border text-fg-secondary hover:border-border-light hover:bg-surface-2 hover:text-fg-primary"
}`;
const activeFolder = folders.find((f) => f.id === active);
const count = (n: number, on: boolean) => (
<span
className={`min-w-[1.25rem] rounded-full px-1.5 text-center text-[10px] leading-4 tabular-nums ${
on ? "bg-accent/20 text-accent" : "bg-surface-3 text-fg-muted"
}`}
>
{n}
</span>
);
const iconBtn =
"inline-flex h-7 w-7 items-center justify-center rounded-full text-fg-muted transition-colors hover:bg-surface-3 hover:text-fg-primary";
return (
<div className="flex flex-wrap items-center gap-1" data-testid="artifact-folders">
<Folder className="mr-1 h-3.5 w-3.5 text-fg-muted" aria-hidden />
<div className="flex flex-wrap items-center gap-1.5" data-testid="artifact-folders">
<button
type="button"
aria-pressed={!active}
className={chip(!active)}
className={chip(!active) + lit("")}
onClick={() => onPick("")}
title={folders.length ? t("folders.dropOutHint") : undefined}
{...dropProps("")}
>
<Folder className="h-3.5 w-3.5" aria-hidden />
{t("folders.all")}
</button>
{folders.map((f) => (
{folders.map((f) => {
const on = active === f.id;
return editing === f.id ? null : (
<span key={f.id} className="inline-flex items-center">
<button
key={f.id}
type="button"
aria-pressed={active === f.id}
className={chip(active === f.id)}
aria-pressed={on}
className={chip(on) + lit(f.id)}
onClick={() => onPick(f.id)}
onDoubleClick={() => begin(f.id, f.name)}
title={t("folders.dropHint")}
data-testid={`artifact-folder-${f.id}`}
{...dropProps(f.id)}
>
{f.name}
<span className="text-fg-muted">{counts(f.id)}</span>
<span className="max-w-[12rem] truncate">{f.name}</span>
{count(counts(f.id), on)}
</button>
))}
{on && !editing && (
<>
<button
type="button"
className={`${iconBtn} ml-0.5`}
onClick={() => begin(f.id, f.name)}
title={t("folders.rename")}
aria-label={t("folders.rename")}
>
<Pencil className="h-3.5 w-3.5" />
</button>
<button
type="button"
className={`${iconBtn} hover:!text-status-danger`}
onClick={() => void remove(f)}
title={t("folders.delete")}
aria-label={t("folders.delete")}
>
<Trash2 className="h-3.5 w-3.5" />
</button>
</>
)}
</span>
);
})}
{editing ? (
<input
className="input h-7 w-40 text-xs"
className="input h-7 w-44 rounded-full px-3 text-xs"
autoFocus
maxLength={MAX_FOLDER_NAME}
aria-label={t(editing === "new" ? "folders.newName" : "folders.rename")}
@@ -2574,7 +2660,7 @@ function FolderBar({
) : (
<button
type="button"
className={chip(false)}
className="inline-flex h-7 items-center gap-1 rounded-full border border-dashed border-border px-3 text-xs text-fg-muted transition-colors hover:border-accent/50 hover:text-fg-primary"
onClick={() => begin("new")}
data-testid="artifact-folder-new"
>
@@ -2582,24 +2668,6 @@ function FolderBar({
{t("folders.new")}
</button>
)}
{activeFolder && !editing && (
<span className="ml-1 flex gap-1">
<button
type="button"
className="btn-ghost px-2 py-1 text-xs"
onClick={() => begin(activeFolder.id, activeFolder.name)}
>
{t("folders.rename")}
</button>
<button
type="button"
className="btn-ghost px-2 py-1 text-xs text-status-danger"
onClick={() => void remove(activeFolder)}
>
{t("folders.delete")}
</button>
</span>
)}
</div>
);
}
@@ -506,6 +506,43 @@ describe("Artifacts", () => {
localStorage.removeItem("agenthub.artifacts.folders");
});
it("drags an artifact onto a folder to put it there, and onto All folders to take it out", async () => {
localStorage.setItem(
"agenthub.artifacts.folders",
JSON.stringify({ folders: [{ id: "f1", name: "Slides" }], of: {} })
);
open();
const row = await screen.findByTestId("artifact-2");
expect(row).toHaveAttribute("draggable", "true");
const data = new Map<string, string>();
const dataTransfer = {
setData: (k: string, v: string) => data.set(k, v),
getData: (k: string) => data.get(k) ?? "",
get types() {
return [...data.keys()];
},
effectAllowed: "",
dropEffect: "",
};
const stored = () => JSON.parse(localStorage.getItem("agenthub.artifacts.folders")!);
fireEvent.dragStart(row, { dataTransfer });
const chip = screen.getByTestId("artifact-folder-f1");
fireEvent.dragOver(chip, { dataTransfer });
expect(chip.className).toMatch(/ring-2/);
fireEvent.drop(chip, { dataTransfer });
expect(stored().of["2"]).toBe("f1");
expect(chip.className).not.toMatch(/ring-2/);
// Something that is not an artifact (a file from the desktop) is ignored.
fireEvent.drop(chip, {
dataTransfer: { ...dataTransfer, getData: () => "", types: ["Files"] },
});
expect(stored().of["2"]).toBe("f1");
fireEvent.dragStart(row, { dataTransfer });
fireEvent.drop(screen.getByRole("button", { name: "All folders" }), { dataTransfer });
expect(stored().of["2"]).toBeUndefined();
localStorage.removeItem("agenthub.artifacts.folders");
});
it("keeps a shared row in the Hub when its owner deletes it, and removes it from there on ask", async () => {
vi.mocked(api.artifacts.settings).mockResolvedValue({
serverMode: true,
@@ -7316,7 +7316,7 @@ exports[`screen snapshots > Settings — about 1`] = `
<span
class="text-status-warning/90"
>
UI build v2.8.71 (rebuild client to match)
UI build v2.8.73 (rebuild client to match)
</span>
</p>
</div>
+2 -2
View File
@@ -2961,7 +2961,7 @@ curl "http://localhost:4820/api/pricing/cost?tz_offset=-420&from=2026-09-01&to=2
GET /api/pricing/quota[?force=1]
```
How much of each native tool's plan quota is spent: `{ tools: [{ id: "claude"|"codex"|"antigravity"|"cursor", active, label?, account?, plan?, expiresAt?, windows: [{ label, usedPercent, resetsAt, group? }], error?, asOf? }], checkedAt }` (`server/lib/quota.js`). **Claude** asks Anthropic's `GET /api/oauth/usage` with the access token the CLI holds right now — never refreshed, so an expired token answers `error: "ELIVEEXPIRED"` until Claude Code refreshes it — cached 5 min (`force=1`, the status bar's click, re-asks at most every 30 s); no OAuth login, no entry. That live account is `active: true`; every OTHER saved auth profile follows as `active: false` with its `label`, asked with its OWN stored token only while that token is valid — never refreshed here, since a refresh rotates the saved credentials (only the Profiles modal's **Check quota** does that) — and, once expired, showing the last figure this server read (`asOf`) or `error: "EPROFILEEXPIRED"`. Each Claude token's owner is also asked (`GET /api/oauth/profile`): the live row carries the label and email of the account its token belongs to (`.claude.json` can name another), and a saved profile whose token belongs to a different account answers `error: "EWRONGACCOUNT"` with no windows, never that other account's usage. **Codex** reads the newest `rate_limits` from its rollout journals, no network (`asOf` = when the journal recorded it; a window past its reset reads 0). **Antigravity** runs the catalog-detected `agy` as `agy --print /usage --output-format json` — the CLI's own `/usage` command, no model call (`num_turns` 0, no conversation) — in a private empty temp directory with a 60 s timeout, only while the tool is enabled in AI Tools and `agy --version` is ≥ 1.1.11 (an older agy may bill `/usage` as a model request); cached like Claude, a failed run shows the last figure (`asOf`) or `error: "EUPSTREAM"`. One window per pool bucket (`5h`, `wk`), `group` naming the pool ("Gemini Models", "Claude and GPT models"); the report names no account and no plan. Running agy may let it update itself; `AGENTHUB_AGY_USAGE=0` never runs it (no entry). **Cursor** reads the Cursor CLI's (`cursor-agent`) own login, `$XDG_CONFIG_HOME/cursor/auth.json` (default `~/.config`), and sends it ONLY to cursor.com's undocumented `GET /api/usage-summary` as the `WorkosCursorSessionToken=<user id>::<token>` cookie (user id from `~/.cursor/cli-config.json` `authInfo`), while its JWT is valid and never refreshed — expired or a 401 is `error: "ETOKENEXPIRED"`; cached like Claude; no file (macOS keeps it in the keychain), no entry. One `mo` window: `individualUsage.plan.totalPercentUsed`, resetting at `billingCycleEnd` (an Enterprise seat without `plan` shows its plan name and no window). `plan` is the subscription's name — Claude's as `GET /api/oauth/profile` reports it NOW (`organization.organization_type` / `rate_limit_tier` / `seat_tier`, remembered per account so saved profiles and pool accounts show it too), else read from the stored rate-limit tier and seat ("Max 5x", "Team Standard", "Team Premium", else `subscriptionType` title-cased; the stored fields are written at sign-in, so they keep `pro` after an upgrade to Max), Codex's `chatgpt_plan_type` id-token claim, Cursor's `membershipType` — shown as a badge beside the account. `account` is the signed-in email and `expiresAt` when the stored access token runs out — Claude's `claudeAiOauth.expiresAt`, Codex's and Cursor's access-token `exp` (JWT claims read unverified; no token leaves the server but Cursor's own, to cursor.com). Labels: `5h`, `wk`, `mo`, else `<n>d`/`<n>h` (the hover spells `wk`/`mo` out as week/month). The status bar shows one "N% used" chip per tool (its live account) at its right end and, on hover, every account grouped per tool with a row per window — bar, percent, reset time. **Server mode with S3** (one Linux user per account): a developer or analyst gets ONLY their own account's rows, read from their Linux home at the tools' default paths (`~/.claude`, `~/.codex`, `~/.config/cursor` + `~/.cursor`) — never the host's — and only from files that account owns (open + `fstat` owner check, a FIFO refused). No saved Claude profiles and no Antigravity row for them (agy's `/usage` needs the self-updating binary, so it stays the host's); an account that is not provisioned gets `tools: []`. An admin gets the host's, as before.
How much of each native tool's plan quota is spent: `{ tools: [{ id: "claude"|"codex"|"antigravity"|"cursor", active, label?, accountUuid?, account?, plan?, expiresAt?, windows: [{ label, usedPercent, resetsAt, group? }], error?, asOf? }], checkedAt }` (`server/lib/quota.js`). **Claude** asks Anthropic's `GET /api/oauth/usage` with the access token the CLI holds right now — never refreshed, so an expired token answers `error: "ELIVEEXPIRED"` until Claude Code refreshes it — cached 5 min (`force=1`, the status bar's click, re-asks at most every 30 s); no OAuth login, no entry. That live account is `active: true`; every OTHER saved auth profile follows as `active: false` with its `label`, asked with its OWN stored token only while that token is valid — never refreshed here, since a refresh rotates the saved credentials (only the Profiles modal's **Check quota** does that) — and, once expired, showing the last figure this server read (`asOf`) or `error: "EPROFILEEXPIRED"`. Each Claude token's owner is also asked (`GET /api/oauth/profile`): the live row carries the label and email of the account its token belongs to (`.claude.json` can name another), and a saved profile whose token belongs to a different account answers `error: "EWRONGACCOUNT"` with no windows, never that other account's usage. Every Claude row carries its Anthropic `accountUuid` (null when unknown). **Codex** reads the newest `rate_limits` from its rollout journals, no network (`asOf` = when the journal recorded it; a window past its reset reads 0). **Antigravity** runs the catalog-detected `agy` as `agy --print /usage --output-format json` — the CLI's own `/usage` command, no model call (`num_turns` 0, no conversation) — in a private empty temp directory with a 60 s timeout, only while the tool is enabled in AI Tools and `agy --version` is ≥ 1.1.11 (an older agy may bill `/usage` as a model request); cached like Claude, a failed run shows the last figure (`asOf`) or `error: "EUPSTREAM"`. One window per pool bucket (`5h`, `wk`), `group` naming the pool ("Gemini Models", "Claude and GPT models"); the report names no account and no plan. Running agy may let it update itself; `AGENTHUB_AGY_USAGE=0` never runs it (no entry). **Cursor** reads the Cursor CLI's (`cursor-agent`) own login, `$XDG_CONFIG_HOME/cursor/auth.json` (default `~/.config`), and sends it ONLY to cursor.com's undocumented `GET /api/usage-summary` as the `WorkosCursorSessionToken=<user id>::<token>` cookie (user id from `~/.cursor/cli-config.json` `authInfo`), while its JWT is valid and never refreshed — expired or a 401 is `error: "ETOKENEXPIRED"`; cached like Claude; no file (macOS keeps it in the keychain), no entry. One `mo` window: `individualUsage.plan.totalPercentUsed`, resetting at `billingCycleEnd` (an Enterprise seat without `plan` shows its plan name and no window). `plan` is the subscription's name — Claude's as `GET /api/oauth/profile` reports it NOW (`organization.organization_type` / `rate_limit_tier` / `seat_tier`, remembered per account so saved profiles and pool accounts show it too), else read from the stored rate-limit tier and seat ("Max 5x", "Team Standard", "Team Premium", else `subscriptionType` title-cased; the stored fields are written at sign-in, so they keep `pro` after an upgrade to Max), Codex's `chatgpt_plan_type` id-token claim, Cursor's `membershipType` — shown as a badge beside the account. `account` is the signed-in email and `expiresAt` when the stored access token runs out — Claude's `claudeAiOauth.expiresAt`, Codex's and Cursor's access-token `exp` (JWT claims read unverified; no token leaves the server but Cursor's own, to cursor.com). Labels: `5h`, `wk`, `mo`, else `<n>d`/`<n>h` (the hover spells `wk`/`mo` out as week/month). The status bar shows one "N% used" chip per tool (its live account) at its right end and, on hover, every account grouped per tool with a row per window — bar, percent, reset time. **Server mode with S3** (one Linux user per account): a developer or analyst gets ONLY their own account's rows, read from their Linux home at the tools' default paths (`~/.claude`, `~/.codex`, `~/.config/cursor` + `~/.cursor`) — never the host's — and only from files that account owns (open + `fstat` owner check, a FIFO refused). No saved Claude profiles and no Antigravity row for them (agy's `/usage` needs the self-updating binary, so it stays the host's); an account that is not provisioned gets `tools: []`. An admin gets the host's, as before.
#### Analytics
```http
@@ -3658,7 +3658,7 @@ POST /api/updates/check
POST /api/updates/apply
```
Release-based update detection (`server/lib/update-check.js`). `status` and `check` answer the same object — `{ git_repo, update_available, install_kind: "checkout"|"plugin", local_version, latest_release, latest_release_url, latest_release_notes, release_check, commits_behind, commits_behind_release, manual_command, situation, last_plugin_update, plugin_update_progress, repo_root, … }` (`plugin_update_progress` is `{ step, index, total, started_at }` while a plugin-update chain runs — `marketplace_update` → `plugin_update` → `bootstrap`, from `plugin-update-progress.json` in the runtime dir — else `null`) (`repo_root` is `null` for a developer); `check` also broadcasts it as `update_status`. `apply` (admin-only in server mode) picks its mode by install kind, never from the request: a fast-forwardable checkout merges the release `--ff-only`, rebuilds, answers `{ …, applied: true }` and then restarts the server; a plugin-cache install with a newer release hands off to the detached plugin-update chain → `{ …, applied: true, mode: "plugin" }`. Nothing to apply is `409 UPDATE_NOT_APPLICABLE` (`reason`: `up_to_date`, `plugin_managed`, `not_fast_forwardable`). `500 UPDATE_STATUS_FAILED` / `UPDATE_CHECK_FAILED` / `UPDATE_APPLY_FAILED`.
Release-based update detection (`server/lib/update-check.js`). `status` and `check` answer the same object — `{ git_repo, update_available, install_kind: "checkout"|"plugin", local_version, latest_release, latest_release_url, latest_release_notes, release_check, commits_behind, commits_behind_release, manual_command, situation, last_plugin_update, plugin_update_progress, repo_root, … }` (`plugin_update_progress` is `{ step, index, total, started_at }` while a plugin-update chain runs — `marketplace_update` → `plugin_update` → `bootstrap`, from `plugin-update-progress.json` in the runtime dir — else `null`) (`repo_root` is `null` for a developer); `check` also broadcasts it as `update_status`. `apply` (admin-only in server mode) picks its mode by install kind, never from the request: a fast-forwardable checkout merges the release `--ff-only` (first putting back `package-lock.json` / `client/package-lock.json` when they are the ONLY tracked changes — an earlier update's `npm install` rewrote them; any other change still makes the merge refuse), rebuilds, answers `{ …, applied: true }` and then restarts the server; a plugin-cache install with a newer release hands off to the detached plugin-update chain → `{ …, applied: true, mode: "plugin" }`. Nothing to apply is `409 UPDATE_NOT_APPLICABLE` (`reason`: `up_to_date`, `plugin_managed`, `not_fast_forwardable`). `500 UPDATE_STATUS_FAILED` / `UPDATE_CHECK_FAILED` / `UPDATE_APPLY_FAILED`.
### Import history
+2 -2
View File
@@ -1,12 +1,12 @@
{
"name": "agenthub",
"version": "2.8.71",
"version": "2.8.73",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "agenthub",
"version": "2.8.71",
"version": "2.8.73",
"hasInstallScript": true,
"license": "UNLICENSED",
"dependencies": {
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "agenthub",
"version": "2.8.71",
"version": "2.8.73",
"bin": {
"agenthub": "bin/agenthub.js"
},
+2
View File
@@ -281,6 +281,8 @@ test("the live row is the account its token belongs to, not the one .claude.json
assert.strictEqual(live.label, "Victor");
assert.strictEqual(live.account, "victor@x.y");
assert.strictEqual(live.ownerUuid, undefined);
assert.strictEqual(live.accountUuid, "uuid-v");
assert.ok(claude.filter((t) => !t.active).every((t) => "accountUuid" in t));
assert.strictEqual(live.plan, "Max");
assert.deepStrictEqual(
claude.filter((t) => !t.active).map((t) => t.label),
@@ -18,6 +18,7 @@ const { execFileSync } = require("child_process");
const {
getUpdatesStatus,
applyUpdate,
restoreNpmLockfiles,
compareVersions,
releaseApiUrl,
detectPluginInstall,
@@ -512,3 +513,48 @@ describe("applyUpdate — plugin cache is Claude Code's to replace", () => {
assert.equal(git(repo, ["rev-parse", "HEAD"]), headBefore, "HEAD must be untouched");
});
});
describe("restoreNpmLockfiles — npm's rewrite never blocks an update", () => {
const git = (cwd, ...args) =>
execFileSync("git", args, {
cwd,
encoding: "utf8",
env: {
...process.env,
GIT_AUTHOR_NAME: "t",
GIT_AUTHOR_EMAIL: "t@t",
GIT_COMMITTER_NAME: "t",
GIT_COMMITTER_EMAIL: "t@t",
},
});
let repo;
before(() => {
repo = fs.mkdtempSync(path.join(os.tmpdir(), "lockfiles-"));
git(repo, "init", "-q");
fs.mkdirSync(path.join(repo, "client"));
fs.writeFileSync(path.join(repo, "package-lock.json"), "{}\n");
fs.writeFileSync(path.join(repo, "client", "package-lock.json"), "{}\n");
fs.writeFileSync(path.join(repo, "app.js"), "v1\n");
git(repo, "add", ".");
git(repo, "commit", "-qm", "init");
});
after(() => fs.rmSync(repo, { recursive: true, force: true }));
it("puts lockfiles npm rewrote back, and only when nothing else changed", async () => {
const lock = path.join(repo, "client", "package-lock.json");
fs.writeFileSync(lock, '{"npm":"rewrote"}\n');
assert.deepEqual(await restoreNpmLockfiles(repo), ["client/package-lock.json"]);
assert.equal(fs.readFileSync(lock, "utf8"), "{}\n");
// A real change beside it: nothing is touched, the merge refuses as before.
fs.writeFileSync(lock, '{"npm":"rewrote"}\n');
fs.writeFileSync(path.join(repo, "app.js"), "my edit\n");
assert.deepEqual(await restoreNpmLockfiles(repo), []);
assert.equal(fs.readFileSync(lock, "utf8"), '{"npm":"rewrote"}\n');
assert.equal(fs.readFileSync(path.join(repo, "app.js"), "utf8"), "my edit\n");
// A clean tree: nothing to do.
git(repo, "checkout", "--", ".");
assert.deepEqual(await restoreNpmLockfiles(repo), []);
});
});
+14 -4
View File
@@ -210,8 +210,8 @@ async function claudeQuotas(force, home) {
liveClaude(() => memberClaudeAuth(home))
);
if (!live) return [];
const { ownerUuid: _uuid, ...shown } = live;
return [{ id: "claude", active: true, label: null, ...shown }];
const { ownerUuid, ...shown } = live;
return [{ id: "claude", active: true, label: null, accountUuid: ownerUuid || null, ...shown }];
}
let items = [];
try {
@@ -231,12 +231,22 @@ async function claudeQuotas(force, home) {
id: "claude",
active: false,
label: it.label,
accountUuid: it.accountUuid || null,
...(await cached(`profile:${it.name}`, force, () => profileClaude(it))),
}))
);
if (!live) return others;
const { ownerUuid: _uuid, ...shown } = live;
return [{ id: "claude", active: true, label: mine?.label || null, ...shown }, ...others];
const { ownerUuid, ...shown } = live;
return [
{
id: "claude",
active: true,
label: mine?.label || null,
accountUuid: ownerUuid || mine?.accountUuid || null,
...shown,
},
...others,
];
}
/** The newest `rate_limits` in the last `TAIL_BYTES` of a rollout, or null. */
+26
View File
@@ -837,6 +837,30 @@ async function getUpdatesStatus(gitRoot = DEFAULT_ROOT, options = {}) {
* @returns {Promise<object>} the refreshed status, plus `applied` (and
* `reason` when `applied` is false).
*/
// The lockfiles `npm run setup` (an earlier update's `npm install`) may have
// rewritten — another npm version normalizes them. Left modified, the next
// update's `merge --ff-only` refuses the moment a release changes one of them.
const NPM_LOCKFILES = ["package-lock.json", "client/package-lock.json"];
/**
* Before a fast-forward: when the ONLY tracked changes are npm lockfiles, put
* them back to HEAD (npm wrote them, not the user) and return their paths.
* Any other change leaves everything alone (returns []), so the merge still
* refuses rather than lose real work.
*/
async function restoreNpmLockfiles(root) {
const changed = (await execGit(root, ["diff", "--name-only", "HEAD", "--"], { timeout: 30_000 }))
.split("\n")
.map((f) => f.trim())
.filter(Boolean);
if (!changed.length || !changed.every((f) => NPM_LOCKFILES.includes(f))) return [];
await execGit(root, ["checkout", "HEAD", "--", ...changed], { timeout: 30_000 });
console.log(
`[updates] restored ${changed.join(", ")} (rewritten by npm install) before updating`
);
return changed;
}
async function applyUpdate(gitRoot = DEFAULT_ROOT) {
// A plugin-cache install is Claude Code's to replace. Pulling here would
// leave a cache directory named after one commit but holding another, and
@@ -866,6 +890,7 @@ async function applyUpdate(gitRoot = DEFAULT_ROOT) {
}
const root = path.resolve(gitRoot);
await restoreNpmLockfiles(root);
if (status.situation === "release_available") {
await execGit(root, ["fetch", status.canonical_remote, "--tags"], { timeout: 120_000 });
// --ff-only is the guard: a release that isn't a descendant of HEAD (a
@@ -903,4 +928,5 @@ module.exports = {
isShallowClone,
npmInvocation,
execNpm,
restoreNpmLockfiles,
};