fleetlens 0.13.2 → 0.15.0

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

@@ -1,19 +1,15 @@
 /**
- * Team-sync consent page.
+ * Team-sync status page.
  *
- * Shows the user which team their daemon is paired with, what data flows
- * over the wire on the next push, and lets them toggle the two opt-outs
- * the bridge respects: per-project privacy and LLM-enriched extras.
- *
- * The page works against the same on-disk team-config.json the daemon
- * reads, so a change here propagates to the next `fleetlens team push`.
+ * Shows which team this machine's daemon is paired with and what data flows
+ * over the wire on the next push. All LLM-enriched fields are shared for
+ * every synced project; which projects are synced is the member's own
+ * choice (Settings' Synced-projects selection, seeded by the onboarding
+ * wizard). The page reads the same on-disk team-config.json the daemon reads.
  */
-import Link from "next/link";
-import { groupByProject, type SessionMeta } from "@claude-lens/parser";
-import { listSessions } from "@/lib/data";
 import { readTeamConfig, toTeamConfigView } from "@/lib/team-config";
-import { TeamSyncForm } from "./team-sync-form";
-import { prettyProjectName } from "@/lib/format";
+import { SyncedProjectsSection } from "./synced-projects-section";
+import { SyncActivitySection } from "./sync-activity-section";
 
 export const dynamic = "force-dynamic";
 
@@ -36,33 +32,14 @@ function lastSyncedSnapshotLabel(iso: string | undefined): string {
   return new Date(ms).toLocaleString();
 }
 
-function recentDaysFilter<T extends SessionMeta>(sessions: T[], days: number): T[] {
-  const cutoff = Date.now() - days * 86_400_000;
-  return sessions.filter((s) => {
-    if (!s.firstTimestamp) return false;
-    const ms = Date.parse(s.firstTimestamp);
-    return !Number.isNaN(ms) && ms >= cutoff;
-  });
-}
-
-export default async function TeamPage() {
+export default function TeamPage() {
   const config = readTeamConfig();
-  const allSessions = await listSessions();
-  const recent = recentDaysFilter(allSessions, 30);
-  const projects = groupByProject(recent)
-    .map((p) => ({
-      name: p.projectName,
-      pretty: prettyProjectName(p.projectName),
-      sessions: p.sessions.length,
-      worktreeCount: p.worktreeCount,
-    }))
-    .sort((a, b) => b.sessions - a.sessions);
 
   if (!config) {
     return (
       <main className="mx-auto max-w-3xl p-6 space-y-6">
         <h1 className="text-2xl font-semibold">Team sync</h1>
-        <section className="border border-dashed rounded-lg p-6 text-sm space-y-3">
+        <section className="af-card border-dashed text-sm space-y-3">
           <p className="font-medium">Not paired with any team.</p>
           <p className="text-gray-600">
             To pair this machine with a Fleetlens team server, run from a
@@ -81,20 +58,30 @@ fleetlens team join &lt;server-url&gt; &lt;invite-token&gt;
   }
 
   const view = toTeamConfigView(config);
-  const privateProjects = new Set(config.privateProjects ?? []);
-  const enrichmentOptIn = !!config.enrichmentOptIn;
-  const sharedCount = projects.filter((p) => !privateProjects.has(p.name)).length;
+  const sp = config.syncProjects;
+  const syncSummary = sp
+    ? sp.autoIncludeNew
+      ? `Syncing: all projects except ${sp.excluded.length} excluded`
+      : `Syncing: only ${sp.included.length} selected project${sp.included.length === 1 ? "" : "s"}`
+    : null;
 
   return (
     <main className="mx-auto max-w-3xl p-6 space-y-8">
       <header>
         <h1 className="text-2xl font-semibold">Team sync</h1>
         <p className="text-sm text-gray-500 mt-1">
-          Manage what your daemon shares with your team server.
+          What your daemon shares with your team server.
         </p>
       </header>
 
-      <section className="border rounded-lg p-5 space-y-3">
+      {config.setupPending && (
+        <div className="border border-amber-400/40 bg-amber-400/10 rounded-lg p-4 text-sm">
+          Setup isn&rsquo;t finished — nothing is syncing yet.{" "}
+          <a className="underline font-medium" href="/team/onboarding">Finish onboarding</a>
+        </div>
+      )}
+
+      <section className="af-card space-y-3">
         <div className="flex items-baseline justify-between">
           <h2 className="text-lg font-medium">Pairing</h2>
           <span className="text-xs uppercase tracking-wide text-green-700 dark:text-green-400">
@@ -105,7 +92,11 @@ fleetlens team join &lt;server-url&gt; &lt;invite-token&gt;
           <dt className="text-gray-500">Team slug</dt>
           <dd className="font-mono">{view.teamSlug}</dd>
           <dt className="text-gray-500">Server</dt>
-          <dd className="font-mono break-all">{view.serverUrl}</dd>
+          <dd className="font-mono break-all">
+            <a href={view.serverUrl} target="_blank" rel="noreferrer" className="hover:underline">
+              {view.serverUrl} <span aria-hidden>↗</span>
+            </a>
+          </dd>
           <dt className="text-gray-500">Member ID</dt>
           <dd className="font-mono break-all text-xs">{view.memberId}</dd>
           <dt className="text-gray-500">Bearer token</dt>
@@ -119,65 +110,53 @@ fleetlens team join &lt;server-url&gt; &lt;invite-token&gt;
         </dl>
       </section>
 
-      <section className="border rounded-lg p-5 space-y-4">
-        <div>
-          <h2 className="text-lg font-medium">What gets shared</h2>
-          <p className="text-sm text-gray-500 mt-1">
-            Toggles below take effect on the daemon&rsquo;s next push (usually
-            within 5 minutes). See{" "}
-            <Link
-              href="https://github.com/cowcow02/fleetlens"
-              className="underline"
-            >
-              the bridge design spec
-            </Link>{" "}
-            for the full data inventory.
-          </p>
-        </div>
+      <section className="af-card">
+        <SyncActivitySection />
+      </section>
 
-        <TeamSyncForm
-          initial={{ enrichmentOptIn, privateProjects: Array.from(privateProjects) }}
-          projects={projects}
-        />
+      <section className="af-card">
+        <SyncedProjectsSection />
       </section>
 
-      <section className="border rounded-lg p-5 space-y-3">
-        <h2 className="text-lg font-medium">Next push will carry</h2>
+      <section className="af-card space-y-3">
+        <h2 className="text-lg font-medium">What gets shared</h2>
+        <p className="text-sm text-gray-500">
+          {syncSummary ?? "Syncing: all projects (no selection set)."}
+        </p>
         <ul className="text-sm space-y-2">
           <li>
             <strong>Daily rollup</strong> — agent time, session count, tool
-            calls, turns, token totals. Always shared.
+            calls, turns, token totals.
           </li>
           <li>
-            <strong>Rich rollup</strong> (Entry-derived counts) for{" "}
-            <strong>{sharedCount}</strong> of {projects.length} active projects:
-            working-shape distribution, top skills, subagents dispatched,
-            long-autonomous turns, plan-mode usage, brainstorm warmups, tool
-            errors, PRs/commits/pushes. Project labels only; never raw
-            prompts or agent output.
+            <strong>Rich rollup</strong> (Entry-derived counts) for each
+            synced project: working-shape distribution, top skills, subagents
+            dispatched, long-autonomous turns, plan-mode usage, brainstorm
+            warmups, tool errors, PRs/commits/pushes. Project labels only;
+            never raw prompts or agent output.
           </li>
           <li>
             <strong>Plan utilization snapshot</strong> — current 5h + 7d
-            utilization windows, per Anthropic&rsquo;s rate-limit API. Always
-            shared when fresh.
+            utilization windows, per Anthropic&rsquo;s rate-limit API.
           </li>
           <li>
-            <strong>Enriched extras</strong> (outcome / helpfulness / goal
-            minute mix):{" "}
-            {enrichmentOptIn ? (
-              <span className="text-green-700 dark:text-green-400">opted in</span>
-            ) : (
-              <span className="text-gray-500">disabled</span>
-            )}
+            <strong>Enriched extras</strong> — outcome / helpfulness / goal
+            minute mix, derived locally by your AI-features pipeline (no new
+            model calls ride along with the push).
           </li>
         </ul>
-        <p className="text-xs text-gray-500 pt-2">
-          Never shared: first-user prompts, final-agent output, raw transcript
-          text, tool inputs/outputs.
-        </p>
+        <div className="af-panel p-4 text-sm space-y-2">
+          <div className="font-medium">What does NOT leave your machine</div>
+          <ul className="list-disc list-inside text-gray-600 space-y-1">
+            <li>Session transcripts, prompts, or assistant responses</li>
+            <li>Absolute paths, file contents, or tool-call payloads</li>
+            <li>Anything from projects you exclude above</li>
+            <li>Anything from sessions older than the start-of-day rollup window</li>
+          </ul>
+        </div>
       </section>
 
-      <section className="border rounded-lg p-5 space-y-3">
+      <section className="af-card space-y-3">
         <h2 className="text-lg font-medium">Disconnect</h2>
         <p className="text-sm text-gray-600">
           To leave the team and stop all syncing, run:

package/app/apps/web/app/{settings/team-connection-section.tsx → team/sync-activity-section.tsx}

@@ -8,17 +8,17 @@ const HEALTH_COLORS = {
   red: "var(--af-error, #ef4444)",
 } as const;
 
-export function TeamConnectionSection() {
+export function SyncActivitySection() {
   const conn = readTeamConnection();
   if (!conn.paired) return null;
 
-  const { team, member, lastPush, health } = conn;
+  const { lastPush, health } = conn;
   const cliAvailable = Boolean(process.env.FLEETLENS_CLI_BIN);
 
   return (
     <section id="team" className="space-y-4">
       <div className="flex items-baseline gap-3">
-        <h2 className="text-lg font-medium">Team connection</h2>
+        <h2 className="text-lg font-medium">Sync activity</h2>
         <span
           aria-hidden
           style={{
@@ -29,12 +29,9 @@ export function TeamConnectionSection() {
             display: "inline-block",
           }}
         />
-        <span className="text-sm text-gray-500">{team.name}</span>
       </div>
 
       <dl className="grid grid-cols-[8rem_1fr] gap-y-1 text-sm text-gray-600">
-        <dt>Server</dt><dd className="font-mono text-xs">{team.serverUrl}</dd>
-        <dt>Paired</dt><dd>{new Date(member.pairedAt).toLocaleString()}</dd>
         <dt>Last sync</dt>
         <dd suppressHydrationWarning>
           {lastPush.kind === "none"
@@ -44,7 +41,7 @@ export function TeamConnectionSection() {
       </dl>
 
       {lastPush.kind === "ok" && (
-        <div className="rounded border border-gray-200 p-4 space-y-3 text-sm">
+        <div className="af-panel p-4 space-y-3 text-sm">
           <div className="text-xs uppercase tracking-wide text-gray-500">
             Last push
             {lastPush.payload.dailyRollup ? ` — ${lastPush.payload.dailyRollup.day}` : ""}
@@ -93,7 +90,7 @@ export function TeamConnectionSection() {
             <summary className="cursor-pointer text-gray-500 hover:text-gray-700">
               Show raw JSON payload
             </summary>
-            <pre className="mt-2 rounded border border-gray-200 bg-gray-50 p-3 font-mono text-[11px] whitespace-pre-wrap overflow-x-auto">
+            <pre className="af-panel mt-2 p-3 font-mono text-[11px] whitespace-pre-wrap overflow-x-auto">
               {JSON.stringify(lastPush.payload, null, 2)}
             </pre>
           </details>
@@ -101,27 +98,13 @@ export function TeamConnectionSection() {
       )}
 
       {lastPush.kind === "error" && (
-        <div className="rounded border border-red-300 bg-red-50 p-4 text-sm text-red-700">
+        <div className="af-panel-danger p-4 text-sm">
           <div className="font-medium">Last sync failed</div>
           <div>{lastPush.error}</div>
         </div>
       )}
 
       <ForceSyncButton cliAvailable={cliAvailable} />
-
-      <div className="rounded border border-gray-200 p-4 text-sm space-y-2">
-        <div className="font-medium">What does NOT leave your machine</div>
-        <ul className="list-disc list-inside text-gray-600 space-y-1">
-          <li>Session transcripts, prompts, or assistant responses</li>
-          <li>Project names, paths, or repo information</li>
-          <li>File contents or tool-call payloads</li>
-          <li>Anything from sessions older than the start-of-day rollup window</li>
-        </ul>
-      </div>
-
-      <p className="text-xs text-gray-500">
-        To disconnect from this team, run <code>fleetlens team leave</code> in your terminal.
-      </p>
     </section>
   );
 }

package/app/apps/web/app/team/synced-projects-form.tsx

@@ -0,0 +1,201 @@
+"use client";
+import { useEffect, useRef, useState } from "react";
+import { ProjectSyncPicker } from "@/components/project-sync-picker";
+import type { SyncProjectRow } from "@/lib/sync-projects-data";
+import type { SyncProjects } from "@/lib/team-config";
+
+const ts = () => new Date().toTimeString().slice(0, 8);
+
+export function SyncedProjectsForm({
+  projects,
+  initial,
+}: {
+  projects: SyncProjectRow[];
+  initial: SyncProjects;
+}) {
+  const [value, setValue] = useState<SyncProjects>(initial);
+  // Last-persisted selection — the read-only summary renders from this, so a
+  // cancelled edit or in-flight change never lies about what's syncing.
+  const [saved, setSaved] = useState<SyncProjects>(initial);
+  const [editing, setEditing] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [savedMsg, setSavedMsg] = useState<string | null>(null);
+  const [log, setLog] = useState<{ text: string; tone: "default" | "warn" | "error" }[] | null>(null);
+  const logRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    logRef.current?.scrollTo({ top: logRef.current.scrollHeight });
+  }, [log]);
+
+  const append = (text: string, tone: "default" | "warn" | "error" = "default") =>
+    setLog((prev) => [...(prev ?? []), { text: `${ts()}  ${text}`, tone }]);
+
+  // Same NDJSON→SSE stream the onboarding wizard consumes; a changed
+  // selection re-pushes FULL history so the server matches it.
+  async function streamResync() {
+    setLog([]);
+    append("re-pushing your full history under the new selection…");
+    try {
+      const res = await fetch("/api/team/onboarding/start", {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify(value),
+      });
+      if (!res.ok || !res.body) {
+        const body = await res.json().catch(() => null);
+        append(body?.error ?? `Error ${res.status}`, "error");
+        return;
+      }
+      const reader = res.body.getReader();
+      const decoder = new TextDecoder();
+      let buf = "";
+      for (;;) {
+        const { done, value: chunk } = await reader.read();
+        if (done) break;
+        buf += decoder.decode(chunk, { stream: true });
+        const frames = buf.split("\n\n");
+        buf = frames.pop() ?? "";
+        for (const frame of frames) {
+          const data = frame.split("\n").find((l) => l.startsWith("data: "))?.slice(6);
+          if (!data) continue;
+          let ev;
+          try {
+            ev = JSON.parse(data);
+          } catch {
+            continue;
+          }
+          if (ev.type === "phase" && ev.phase === "activity") append(`pushing ${ev.totalDays} day(s), newest first…`);
+          else if (ev.type === "day")
+            append(
+              ev.outcome === "pushed"
+                ? `✓ ${ev.day} pushed (${ev.index}/${ev.total})`
+                : `${ev.outcome === "queued" ? "⚠" : "✗"} ${ev.day} ${ev.outcome} (${ev.index}/${ev.total})`,
+              ev.outcome === "pushed" ? "default" : ev.outcome === "queued" ? "warn" : "error",
+            );
+          else if (ev.type === "done") append(`done — ${ev.pushed} day(s) pushed`);
+          else if (ev.type === "error") append(ev.message ?? "sync error", "error");
+        }
+      }
+      append("server now matches your selection");
+    } catch (err) {
+      append(`stream failed: ${(err as Error).message} — the daemon finishes the re-push within ~5 min`, "warn");
+    }
+  }
+
+  async function handleSave() {
+    setSaving(true);
+    setSavedMsg(null);
+    setLog(null);
+    const res = await fetch("/api/team/sync-projects", {
+      method: "PUT",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify(value),
+    });
+    const body = await res.json().catch(() => null);
+    setSaving(false);
+    setSavedMsg(
+      res.ok ? (body?.resync ? "Saved — selection changed." : "Saved.") : (body?.error ?? `Error: ${res.status}`),
+    );
+    if (res.ok) {
+      setSaved(value);
+      setEditing(false);
+    }
+    if (body?.resync) void streamResync();
+  }
+
+  const isSynced = (name: string) =>
+    saved.excluded.includes(name) ? false : saved.included.includes(name) ? true : saved.autoIncludeNew;
+  const synced = projects.filter((p) => isSynced(p.name));
+  const privateCount = projects.length - synced.length;
+
+  return (
+    <div className="space-y-4">
+      {!editing && (
+        <div className="space-y-3">
+          <p className="text-sm">
+            Syncing <strong>{synced.length}</strong> of {projects.length} projects
+            {saved.autoIncludeNew ? " — new projects sync automatically." : " — new projects stay private."}
+          </p>
+          <div className="flex flex-wrap gap-1.5">
+            {synced.slice(0, 8).map((p) => (
+              <a
+                key={p.name}
+                href={`/projects/${encodeURIComponent(p.projectDir)}`}
+                className="af-chip"
+              >
+                {p.name}
+              </a>
+            ))}
+            {synced.length > 8 && (
+              <span className="px-2 py-0.5 text-xs text-gray-500">+{synced.length - 8} more</span>
+            )}
+          </div>
+          {privateCount > 0 && (
+            <p className="text-xs text-gray-500">
+              {privateCount} project{privateCount === 1 ? " stays" : "s stay"} private on this machine.
+            </p>
+          )}
+          <div className="flex items-center gap-3">
+            <button
+              type="button"
+              onClick={() => {
+                setValue(saved);
+                setSavedMsg(null);
+                setEditing(true);
+              }}
+              className="af-btn"
+            >
+              Edit selection
+            </button>
+            {savedMsg && <p className="text-sm">{savedMsg}</p>}
+          </div>
+        </div>
+      )}
+      {editing && (
+        <>
+          <ProjectSyncPicker projects={projects} value={value} onChange={setValue} />
+          <div className="flex items-center gap-3">
+            <button
+              type="button"
+              onClick={handleSave}
+              disabled={saving}
+              className="af-btn-primary"
+            >
+              {saving ? "Saving…" : "Save"}
+            </button>
+            <button
+              type="button"
+              onClick={() => {
+                setValue(saved);
+                setEditing(false);
+                setSavedMsg(null);
+              }}
+              disabled={saving}
+              className="af-btn"
+            >
+              Cancel
+            </button>
+            {savedMsg && <p className="text-sm">{savedMsg}</p>}
+          </div>
+        </>
+      )}
+      {log && (
+        <div
+          ref={logRef}
+          className="max-h-60 overflow-y-auto rounded-lg bg-gray-950 p-3 font-mono text-xs text-gray-200"
+        >
+          {log.map((line, i) => (
+            <div
+              key={i}
+              className={
+                line.tone === "error" ? "text-red-400" : line.tone === "warn" ? "text-amber-400" : undefined
+              }
+            >
+              {line.text}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/app/apps/web/app/team/synced-projects-section.tsx

@@ -0,0 +1,37 @@
+import { readTeamConfig } from "@/lib/team-config";
+import { listSyncProjectRows } from "@/lib/sync-projects-data";
+import { SyncedProjectsForm } from "./synced-projects-form";
+
+export async function SyncedProjectsSection() {
+  const config = readTeamConfig();
+  if (!config) return null;
+
+  if (config.setupPending) {
+    return (
+      <section className="space-y-2">
+        <h2 className="text-lg font-medium">Synced projects</h2>
+        <p className="text-sm text-gray-500">
+          Setup isn&rsquo;t finished yet — finish the{" "}
+          <a className="underline" href="/team/onboarding">onboarding wizard</a>{" "}
+          to choose which projects sync to your team.
+        </p>
+      </section>
+    );
+  }
+
+  const projects = await listSyncProjectRows();
+  return (
+    <section className="space-y-3">
+      <h2 className="text-lg font-medium">Synced projects</h2>
+      <p className="text-sm text-gray-500">
+        Choose which projects share metrics with your team. Saving a changed
+        selection re-pushes your full history so the server matches it —
+        excluded projects disappear, newly included ones backfill.
+      </p>
+      <SyncedProjectsForm
+        projects={projects}
+        initial={config.syncProjects ?? { autoIncludeNew: true, included: [], excluded: [] }}
+      />
+    </section>
+  );
+}

package/app/apps/web/components/autostart-toggle.tsx

@@ -0,0 +1,59 @@
+"use client";
+import { useState } from "react";
+import type { AutostartState } from "@/lib/autostart-data";
+
+export function AutostartToggle({ initial }: { initial: AutostartState }) {
+  const [state, setState] = useState(initial);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  if (!state.supported) {
+    return (
+      <p className="text-sm text-gray-500">
+        Auto-start uses a macOS LaunchAgent and is macOS-only for now. Add{" "}
+        <code className="font-mono text-xs">fleetlens daemon start</code> to your login items manually.
+      </p>
+    );
+  }
+
+  async function toggle(enabled: boolean) {
+    setBusy(true);
+    setError(null);
+    const res = await fetch("/api/team/autostart", {
+      method: "PUT",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ enabled }),
+    });
+    const body = await res.json().catch(() => null);
+    setBusy(false);
+    if (!res.ok) {
+      setError(body?.error ?? `Error ${res.status}`);
+      return;
+    }
+    setState(body);
+  }
+
+  return (
+    <div className="space-y-2">
+      <label className="flex cursor-pointer items-start gap-2 text-sm">
+        <input
+          type="checkbox"
+          checked={state.installed}
+          disabled={busy}
+          onChange={(e) => void toggle(e.target.checked)}
+        />
+        <span>
+          Start Fleetlens at login (dashboard + usage daemon)
+          <span className="mt-0.5 block text-xs text-gray-500">
+            {state.installed
+              ? "Enabled — the dashboard and reporting come back after a reboot."
+              : state.optedOut
+                ? "Disabled — you opted out; joining a team won't re-enable it."
+                : "Disabled — pairing with a team enables this automatically."}
+          </span>
+        </span>
+      </label>
+      {error && <p className="text-sm text-red-600">{error}</p>}
+    </div>
+  );
+}

package/app/apps/web/components/previous-cycles-trend.tsx

@@ -74,7 +74,10 @@ function CycleBar({
   cycle: CyclePeak;
   windowLabel: "5h" | "7d";
 }) {
+  // Bar height / tone stay clamped to 100; the LABEL shows the true value so
+  // an overage cycle reads "247%", not a misleading "100%".
   const pct = Math.max(0, Math.min(100, cycle.peakPct));
+  const labelPct = Math.max(0, cycle.peakPct);
   const tone = cycle.current
     ? paceToneForCycle(pct, new Date(cycle.endsAt).getTime(), WINDOW_MS[windowLabel])
     : utilizationTone(pct);
@@ -104,7 +107,7 @@ function CycleBar({
           fontVariantNumeric: "tabular-nums",
         }}
       >
-        {pct.toFixed(0)}%
+        {labelPct.toFixed(0)}%
       </div>
       <div
         style={{