fleetlens 0.15.2 → 0.15.4

package/app/apps/web/app/sessions/[id]/session-view/header-stats.tsx

@@ -15,10 +15,91 @@
  * a component (no hook calls at module load).
  */
 import React, { useRef, useState } from "react";
+import { Github, GitBranch } from "lucide-react";
 import type { SessionEvent } from "@claude-lens/parser";
+import type { GitFolderInfo } from "@claude-lens/parser/fs";
 import { formatTokens } from "@/lib/format";
 import { TooltipRow } from "./tooltip";
 
+const repoChip = {
+  fontFamily: "var(--font-mono)",
+  fontSize: 10.5,
+  padding: "1px 6px",
+  border: "1px solid var(--af-border-subtle)",
+  borderRadius: 999,
+  whiteSpace: "nowrap" as const,
+};
+
+/** The repo a session's cwd belongs to. `branch` is that folder's branch RIGHT
+ *  NOW — git keeps no record of what it was when the session ran — so it is
+ *  labelled as such rather than presented as the session's branch. */
+export function RepoStat({
+  git,
+  worktreeName,
+}: {
+  git: GitFolderInfo;
+  worktreeName?: string;
+}) {
+  const { remote, branch, defaultBranch } = git;
+  return (
+    <span
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 6,
+        fontSize: 12,
+        color: "var(--af-text-secondary)",
+        minWidth: 0,
+      }}
+    >
+      {remote && (
+        <a
+          href={remote.webUrl}
+          target="_blank"
+          rel="noreferrer"
+          title={remote.url}
+          style={{
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 5,
+            color: "inherit",
+            textDecoration: "none",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+          }}
+        >
+          {remote.host === "github.com" ? (
+            <Github size={12} aria-label="GitHub" />
+          ) : (
+            <GitBranch size={12} aria-label={remote.host} />
+          )}
+          {remote.owner}/{remote.name}
+        </a>
+      )}
+      {worktreeName && (
+        <span style={{ ...repoChip, color: "var(--af-text-secondary)" }}>
+          worktree: {worktreeName}
+        </span>
+      )}
+      {branch && (
+        <span
+          title={`This folder is currently on "${branch}"${
+            defaultBranch ? ` (default: ${defaultBranch})` : ""
+          }. Not necessarily the branch this session ran on.`}
+          style={{
+            ...repoChip,
+            color:
+              branch === defaultBranch ? "var(--af-text-tertiary)" : "var(--af-text)",
+          }}
+        >
+          {branch}
+        </span>
+      )}
+    </span>
+  );
+}
+
 export function InlineStat({
   icon,
   value,

package/app/apps/web/app/sessions/[id]/session-view.tsx

@@ -55,10 +55,13 @@ import {
   InlineStatDivider,
   EntrypointBadge,
   InlineTokenStat,
+  RepoStat,
   useAnchoredTooltip,
   AnchoredTooltip,
 } from "./session-view/header-stats";
 import { Drawer } from "./session-view/drawer";
+// type-only: erased at build, so node:fs never reaches the client bundle
+import type { GitFolderInfo } from "@claude-lens/parser/fs";
 import {
   WorkflowsPanel,
   WorkflowAgentDrawer,
@@ -128,11 +131,13 @@ const VALID_TABS: TabId[] = ["transcript", "workflows", "team", "debug"];
 
 export function SessionView({
   session,
+  git,
   team,
   teamLead,
   entries = [],
 }: {
   session: SessionDetail;
+  git?: GitFolderInfo;
   team?: (TimelineData & { teamName: string }) | null;
   teamLead?: { leadSessionId: string; teamName: string; agentName: string } | null;
   entries?: Entry[];
@@ -1128,6 +1133,12 @@ export function SessionView({
           )}
           <InlineStatDivider />
           <InlineStat icon={<Folder size={12} />} value={projectName} truncate />
+          {git && (git.remote || git.branch || session.worktreeName) && (
+            <>
+              <InlineStatDivider />
+              <RepoStat git={git} worktreeName={session.worktreeName} />
+            </>
+          )}
           <InlineStatDivider />
           {airTimeMs !== undefined && (
             <InlineStat

package/app/apps/web/app/sessions/sessions-grid.tsx

@@ -4,7 +4,7 @@ import Link from "next/link";
 import { useCallback, useMemo } from "react";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import type { AgentKind, SessionMeta } from "@claude-lens/parser";
-import { getAgentMetadata, isAgentKind } from "@claude-lens/parser";
+import { buildProjectKeyResolver, getAgentMetadata, isAgentKind, projectKey } from "@claude-lens/parser";
 import type { DayOutcome, EntryEnrichmentStatus } from "@claude-lens/entries";
 import {
   formatDuration,
@@ -30,6 +30,10 @@ export type SessionRow = {
   latestLocalDay: string | null;
 };
 
+type DisplaySessionRow = SessionRow & {
+  projectKey: string;
+};
+
 type SortBy = "newest" | "longest" | "most-tokens" | "outcome";
 
 const SORT_VALUES: readonly SortBy[] = ["newest", "longest", "most-tokens", "outcome"] as const;
@@ -38,6 +42,10 @@ function isSortBy(s: string | null | undefined): s is SortBy {
   return s !== null && s !== undefined && (SORT_VALUES as readonly string[]).includes(s);
 }
 
+function totalSessionTokens(s: SessionMeta): number {
+  return s.totalUsage.input + s.totalUsage.output + s.totalUsage.cacheRead + s.totalUsage.cacheWrite;
+}
+
 export function SessionsGrid({ rows }: { rows: SessionRow[] }) {
   const router = useRouter();
   const pathname = usePathname();
@@ -46,7 +54,22 @@ export function SessionsGrid({ rows }: { rows: SessionRow[] }) {
   // Filter state lives in the URL — back/forward replays the same view, and
   // returning from a session detail page restores what the user had picked.
   const query = searchParams.get("q") ?? "";
-  const project = searchParams.get("project") ?? "all";
+  const keyOf = useMemo(
+    () => buildProjectKeyResolver(rows.map((r) => r.session)),
+    [rows],
+  );
+  const displayRows = useMemo<DisplaySessionRow[]>(
+    () => rows.map((row) => ({ ...row, projectKey: keyOf(row.session) })),
+    [rows, keyOf],
+  );
+  // Older links carried the raw projectName path. Resolve those onto the
+  // project key so /sessions?project=… selects the same set as /projects/<key>.
+  const project = useMemo(() => {
+    const raw = searchParams.get("project") ?? "all";
+    if (raw === "all" || !raw.startsWith("/")) return raw;
+    const match = rows.find((r) => r.session.projectName === raw);
+    return match ? keyOf(match.session) : projectKey(raw);
+  }, [searchParams, rows, keyOf]);
   const agentParam = searchParams.get("agent");
   const agent: AgentKind | "all" = isAgentKind(agentParam) ? agentParam : "all";
   const sortBy: SortBy = isSortBy(searchParams.get("sort"))
@@ -72,9 +95,22 @@ export function SessionsGrid({ rows }: { rows: SessionRow[] }) {
   const setSortBy = (v: SortBy) => updateParam("sort", v, "newest");
 
   const projects = useMemo(() => {
-    const s = new Set(rows.map((r) => r.session.projectName));
-    return ["all", ...Array.from(s).sort()];
-  }, [rows]);
+    const totals = new Map<string, { tokens: number; sessions: number }>();
+    for (const r of displayRows) {
+      const cur = totals.get(r.projectKey) ?? { tokens: 0, sessions: 0 };
+      cur.tokens += totalSessionTokens(r.session);
+      cur.sessions += 1;
+      totals.set(r.projectKey, cur);
+    }
+    const ordered = Array.from(totals.entries())
+      .sort(([aKey, a], [bKey, b]) => {
+        if (b.tokens !== a.tokens) return b.tokens - a.tokens;
+        if (b.sessions !== a.sessions) return b.sessions - a.sessions;
+        return aKey.localeCompare(bKey);
+      })
+      .map(([key]) => key);
+    return ["all", ...ordered];
+  }, [displayRows]);
 
   const agentOptions = useMemo(() => {
     const counts = new Map<AgentKind, number>();
@@ -86,19 +122,20 @@ export function SessionsGrid({ rows }: { rows: SessionRow[] }) {
   }, [rows]);
 
   const filtered = useMemo(() => {
-    let items = rows.slice();
-    if (project !== "all") items = items.filter((r) => r.session.projectName === project);
+    let items = displayRows.slice();
+    if (project !== "all") items = items.filter((r) => r.projectKey === project);
     if (agent !== "all")
       items = items.filter((r) => (r.session.agent ?? "claude-code") === agent);
     if (query) {
       const q = query.toLowerCase();
       items = items.filter(
-        ({ session: s, briefSummary }) =>
+        ({ session: s, briefSummary, projectKey }) =>
           s.id.toLowerCase().includes(q) ||
           (briefSummary ?? "").toLowerCase().includes(q) ||
           (s.firstUserPreview ?? "").toLowerCase().includes(q) ||
           (s.lastAgentPreview ?? "").toLowerCase().includes(q) ||
-          s.projectName.toLowerCase().includes(q),
+          s.projectName.toLowerCase().includes(q) ||
+          projectKey.toLowerCase().includes(q),
       );
     }
     if (sortBy === "newest")
@@ -115,18 +152,12 @@ export function SessionsGrid({ rows }: { rows: SessionRow[] }) {
       );
     else if (sortBy === "most-tokens")
       items.sort(
-        (a, b) =>
-          b.session.totalUsage.input +
-          b.session.totalUsage.output +
-          b.session.totalUsage.cacheRead -
-          (a.session.totalUsage.input +
-            a.session.totalUsage.output +
-            a.session.totalUsage.cacheRead),
+        (a, b) => totalSessionTokens(b.session) - totalSessionTokens(a.session),
       );
     else if (sortBy === "outcome")
       items.sort((a, b) => outcomePriority(b.outcome) - outcomePriority(a.outcome));
     return items;
-  }, [rows, project, agent, query, sortBy]);
+  }, [displayRows, project, agent, query, sortBy]);
 
   return (
     <div>
@@ -199,7 +230,7 @@ export function SessionsGrid({ rows }: { rows: SessionRow[] }) {
       {filtered.length === 0 ? (
         <div className="af-empty">No sessions found.</div>
       ) : viewMode === "table" ? (
-        <DataTable<SessionRow>
+        <DataTable<DisplaySessionRow>
           rows={filtered}
           getRowKey={(r) => `${r.session.projectDir}/${r.session.id}`}
           onRowClick={(r) => router.push(`/sessions/${r.session.id}`)}
@@ -224,7 +255,7 @@ export function SessionsGrid({ rows }: { rows: SessionRow[] }) {
   );
 }
 
-const sessionTableColumns: Column<SessionRow>[] = [
+const sessionTableColumns: Column<DisplaySessionRow>[] = [
   {
     key: "outcome",
     header: "Outcome",
@@ -234,7 +265,7 @@ const sessionTableColumns: Column<SessionRow>[] = [
   {
     key: "project",
     header: "Project",
-    sortValue: (r) => r.session.projectName,
+    sortValue: (r) => r.projectKey,
     render: (r) => (
       <div
         style={{
@@ -243,7 +274,7 @@ const sessionTableColumns: Column<SessionRow>[] = [
           textOverflow: "ellipsis",
           whiteSpace: "nowrap",
         }}
-        title={r.session.projectName}
+        title={`${r.projectKey} (${r.session.projectName})`}
       >
         <div style={{ fontWeight: 500, display: "flex", alignItems: "center", gap: 6 }}>
           <span
@@ -254,7 +285,7 @@ const sessionTableColumns: Column<SessionRow>[] = [
               minWidth: 0,
             }}
           >
-            {prettyProjectName(r.session.projectName)}
+            {prettyProjectName(r.projectKey)}
           </span>
           <TeamBadge session={r.session} />
           <AgentBadge agent={r.session.agent} />
@@ -399,7 +430,7 @@ function OutcomeCell({ row }: { row: SessionRow }) {
   return <span style={{ color: "var(--af-text-tertiary)", fontSize: 10 }}>—</span>;
 }
 
-function SessionCard({ row }: { row: SessionRow }) {
+function SessionCard({ row }: { row: DisplaySessionRow }) {
   const router = useRouter();
   const { session: s, briefSummary, outcome, latestLocalDay, enrichmentStatus } = row;
   const totalTokens =
@@ -440,13 +471,13 @@ function SessionCard({ row }: { row: SessionRow }) {
             gap: 6,
             minWidth: 0,
           }}
-          title={s.projectName}
+          title={`${row.projectKey} (${s.projectName})`}
         >
           <LiveBadge mtimeIso={s.lastTimestamp} activityMs={s.lastActivityMs} />
           <span
             style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}
           >
-            {prettyProjectName(s.projectName)}
+            {prettyProjectName(row.projectKey)}
           </span>
           <TeamBadge session={s} linkable={false} />
           <AgentBadge agent={s.agent} />

package/app/apps/web/app/settings/page.tsx

@@ -2,10 +2,15 @@ import { readSettings } from "@claude-lens/entries/node";
 import { AiFeaturesForm } from "./ai-features-form";
 import { readAutostartState } from "@/lib/autostart-data";
 import { AutostartToggle } from "@/components/autostart-toggle";
+import { readMenubarState } from "@/lib/menubar-data";
+import { MenubarInstall } from "@/components/menubar-install";
+import { readCredentialsMasked } from "@claude-lens/entries/node";
+import { ZaiCredentialsForm } from "@/components/zai-credentials-form";
 
 // Layout mirrors /team: max-w-3xl, header + subtitle, card-style sections.
 export default function SettingsPage() {
   const s = readSettings();
+  const creds = readCredentialsMasked();
   return (
     <main className="mx-auto max-w-3xl p-6 space-y-8">
       <header>
@@ -24,6 +29,27 @@ export default function SettingsPage() {
         <AutostartToggle initial={readAutostartState()} />
       </section>
 
+      <section className="af-card space-y-3">
+        <h2 className="text-lg font-medium">Menu bar widget</h2>
+        <p className="text-sm text-gray-500">
+          Native macOS menu bar widget showing live Claude Code / Codex / Z.ai plan
+          utilization, reset countdowns, and burn-rate. Installs to ~/Applications
+          and updates as the daemon polls.
+        </p>
+        <MenubarInstall initial={readMenubarState()} />
+      </section>
+
+      <section className="af-card space-y-3">
+        <h2 className="text-lg font-medium">Z.ai API key</h2>
+        <p className="text-sm text-gray-500">
+          Optional. Add your Z.ai (GLM Coding Plan) API key so the daemon can track
+          your Z.ai usage alongside Claude Code and Codex. The key is stored in
+          ~/.cclens/credentials.json — nothing leaves your machine except the same
+          API calls Z.ai&apos;s own subscription UI makes.
+        </p>
+        <ZaiCredentialsForm initial={creds} />
+      </section>
+
       <section className="af-card space-y-3">
         <h2 className="text-lg font-medium">AI Features</h2>
         <p className="text-sm text-gray-500">

package/app/apps/web/app/usage/page.tsx

@@ -149,6 +149,26 @@ export default async function UsagePage({
             </span>
           </span>
         )}
+        {selected === "zai" && latest?.plan_type && (
+          <span
+            style={{
+              marginLeft: "auto",
+              display: "inline-flex",
+              alignItems: "center",
+              gap: 8,
+              fontSize: 12,
+              padding: "4px 10px",
+              border: "1px solid var(--af-border-subtle)",
+              borderRadius: 999,
+              fontFamily: "var(--font-mono)",
+            }}
+          >
+            <span style={{ color: "var(--af-text-tertiary)" }}>plan</span>
+            <span style={{ color: "var(--af-text)", fontWeight: 600 }}>
+              {latest.plan_type}
+            </span>
+          </span>
+        )}
       </header>
 
       {/* Agent tab strip — one Link per agent that has snapshots. */}
@@ -162,6 +182,9 @@ export default async function UsagePage({
             <PreviousCyclesTrend windowLabel="7d" cycles={cycles7d} />
           )}
           <UsageChartsDashboard snapshots={snapshots} predicted={predicted ?? undefined} />
+          {selected === "zai" && latest?.web_search_quota && (
+            <WebSearchQuotaCard quota={latest.web_search_quota} />
+          )}
           <div
             style={{
               fontSize: 11,
@@ -179,6 +202,63 @@ export default async function UsagePage({
   );
 }
 
+function WebSearchQuotaCard({
+  quota,
+}: {
+  quota: { used: number | null; limit: number | null };
+}) {
+  // web_search_quota is a percentage meter (used = 0–100, limit = 100),
+  // matching Z.ai's portal display — not a raw usage/remaining split.
+  const pct = quota.used ?? 0;
+  return (
+    <div className="af-card" style={{ padding: "16px 18px" }}>
+      <div
+        style={{
+          fontSize: 11,
+          color: "var(--af-text-tertiary)",
+          textTransform: "uppercase",
+          letterSpacing: "0.05em",
+          fontWeight: 600,
+        }}
+      >
+        Monthly web search
+      </div>
+      <div
+        style={{
+          fontSize: 28,
+          fontWeight: 700,
+          marginTop: 8,
+          letterSpacing: "-0.02em",
+          lineHeight: 1.1,
+          fontVariantNumeric: "tabular-nums",
+        }}
+      >
+        {Math.round(pct)}%
+      </div>
+      <div
+        style={{
+          marginTop: 10,
+          height: 6,
+          width: "100%",
+          background: "var(--af-border-subtle)",
+          borderRadius: 999,
+          overflow: "hidden",
+        }}
+      >
+        <div
+          style={{
+            height: "100%",
+            width: `${Math.min(100, pct)}%`,
+            background: "rgb(59, 130, 246)",
+            borderRadius: 999,
+            transition: "width 0.24s ease",
+          }}
+        />
+      </div>
+    </div>
+  );
+}
+
 function AgentTabs({ agents, selected }: { agents: AgentKind[]; selected: AgentKind }) {
   // Claude first, then everything else alphabetically.
   const sorted = [...agents].sort((a, b) => {

package/app/apps/web/components/menubar-install-banner.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+type MenubarState = {
+  supported: boolean;
+  installed: boolean;
+  running: boolean;
+  bundled: boolean;
+};
+
+const DISMISS_KEY = "fleetlens:menubar-banner-dismissed";
+
+// Global, dismissible "install the menu bar widget" banner. Fetches state on
+// mount and self-hides once installed (or when the user dismisses it). Mirrors
+// components/team-welcome-banner.tsx styling + localStorage-dismiss pattern.
+export function MenubarInstallBanner() {
+  const [hidden, setHidden] = useState(true); // start hidden to avoid SSR flash
+  const [state, setState] = useState<MenubarState | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    fetch("/api/menubar", { cache: "no-store" })
+      .then((r) => r.json())
+      .then((s: MenubarState) => {
+        if (cancelled) return;
+        setState(s);
+        const dismissed = window.localStorage.getItem(DISMISS_KEY);
+        // Show only on macOS, when not installed, and not previously dismissed.
+        if (s.supported && !s.installed && !dismissed) setHidden(false);
+      })
+      .catch(() => {});
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  // Re-hide if a background refresh (SSE router.refresh) flips installed=true.
+  useEffect(() => {
+    if (state?.installed) setHidden(true);
+  }, [state?.installed]);
+
+  if (hidden) return null;
+
+  const dismiss = () => {
+    window.localStorage.setItem(DISMISS_KEY, "1");
+    setHidden(true);
+  };
+
+  async function install() {
+    setBusy(true);
+    setError(null);
+    const res = await fetch("/api/menubar", {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ action: "install" }),
+    });
+    const body = await res.json().catch(() => null);
+    setBusy(false);
+    if (!res.ok) {
+      setError(body?.error ?? `Error ${res.status}`);
+      return;
+    }
+    setState(body);
+  }
+
+  return (
+    <div
+      role="status"
+      style={{
+        padding: "10px 24px",
+        background: "var(--af-accent-subtle)",
+        borderBottom: "1px solid var(--af-accent)",
+        color: "var(--af-text)",
+        fontSize: 13,
+        display: "flex",
+        gap: 12,
+        alignItems: "center",
+      }}
+    >
+      <span style={{ flex: 1 }}>
+        Get live Claude Code / Codex / Z.ai usage in your menu bar —{" "}
+        <strong>install the Fleetlens widget</strong>.
+      </span>
+      <button
+        type="button"
+        className="af-btn af-btn-primary"
+        disabled={busy}
+        onClick={() => void install()}
+        style={{ fontSize: 12, padding: "4px 12px" }}
+      >
+        {busy ? "Installing…" : "Install"}
+      </button>
+      <button
+        type="button"
+        onClick={dismiss}
+        aria-label="Dismiss"
+        style={{
+          background: "transparent",
+          border: "none",
+          color: "var(--af-text-tertiary)",
+          cursor: "pointer",
+          fontSize: 16,
+          lineHeight: 1,
+          padding: "2px 6px",
+        }}
+      >
+        ×
+      </button>
+      {error && (
+        <span style={{ color: "var(--af-danger, #dc2626)" }}>{error}</span>
+      )}
+    </div>
+  );
+}