= 0 ? `ade-lane-option-${highlightedIndex}` : undefined
+ }
className="ade-lane-popover ade-liquid-glass-menu"
style={popoverStyle}
onKeyDown={handleKeyDown}
+ // Height is content-driven under `maxHeight`, so `layout` is what
+ // makes filtering read as the list collapsing rather than snapping.
+ layout={reducedMotion ? false : "size"}
+ initial={reducedMotion ? false : { opacity: 0, scale: 0.96, y: placement?.openAbove ? 4 : -4 }}
+ animate={{ opacity: 1, scale: 1, y: 0 }}
+ transition={
+ reducedMotion
+ ? { duration: 0 }
+ : { type: "spring", stiffness: 520, damping: 34, mass: 0.7 }
+ }
>
{items.length === 0 ? (
-
+
No lanes found
) : (
@@ -593,119 +573,71 @@ export function LaneCombobox({
- {entry.label}
+ {entry.label}
);
}
const item = entry.item;
- const currentIndex = entry.index;
const isSelected = item.id === value;
- const isAutoCreate = isAutoCreateLaneOptionId(item.id);
+ const isHighlighted = entry.index === highlightedIndex;
- if (isAutoCreate) {
+ if (isAutoCreateLaneOptionId(item.id)) {
return (
selectItem(item.id)}
>
{item.name}
{isSelected ? (
-
);
}
- const titleRow = (
-
- {laneListIcon(item)}
-
- {item.name}
-
- {isSelected ? (
-
- );
return (
selectItem(item.id)}
- style={
- item.branchLabel
- ? {
- flexDirection: "column",
- alignItems: "stretch",
- gap: 0,
- paddingTop: 5,
- paddingBottom: 5,
- }
- : undefined
- }
>
+ {laneListIcon(item)}
+ {item.name}
{item.branchLabel ? (
- <>
- {titleRow}
-
-
- {item.branchLabel}
-
-
-
- ) : (
- titleRow
- )}
+ // Same priority rule as the trigger: branch gives way first.
+
+ {item.branchLabel}
+
+ ) : null}
+ {isSelected ? (
+
);
})
)}
-
,
+ ,
document.body,
)
: null}
diff --git a/apps/desktop/src/renderer/components/usage/ActivityHeatmap.tsx b/apps/desktop/src/renderer/components/usage/ActivityHeatmap.tsx
new file mode 100644
index 000000000..2b308e68d
--- /dev/null
+++ b/apps/desktop/src/renderer/components/usage/ActivityHeatmap.tsx
@@ -0,0 +1,128 @@
+import { useMemo } from "react";
+import type { AdeUsageDailyPoint } from "../../../shared/types";
+import {
+ type ActivityLevel,
+ bucketActivityIntensity,
+ dayActivityScore,
+ trimLeadingInactiveDays,
+} from "./activityIntensity";
+
+const HEATMAP_GAP = 3;
+const HEATMAP_MIN_CELL = 6;
+const HEATMAP_HUE = "#5B93F5";
+const HEATMAP_LEVEL_MIX = [0, 28, 47, 68, 92] as const;
+
+export type HeatmapLayout = {
+ rows: number;
+ cols: number;
+ cell: number;
+ width: number;
+ visible: number;
+};
+
+export function computeHeatmapLayout({
+ cellCount,
+ maxCell,
+ availableWidth,
+}: {
+ cellCount: number;
+ maxCell: number;
+ availableWidth: number;
+}): HeatmapLayout {
+ if (cellCount <= 0) return { rows: 1, cols: 0, cell: maxCell, width: 0, visible: 0 };
+
+ const rows = cellCount <= 7 ? 1 : 7;
+ const cols = Math.max(1, Math.ceil(cellCount / rows));
+ const spanOf = (columns: number, cell: number) => columns * cell + (columns - 1) * HEATMAP_GAP;
+
+ if (availableWidth <= 0) {
+ return { rows, cols, cell: maxCell, width: spanOf(cols, maxCell), visible: cellCount };
+ }
+
+ const fitted = Math.floor((availableWidth - (cols - 1) * HEATMAP_GAP) / cols);
+ const cell = Math.max(HEATMAP_MIN_CELL, Math.min(maxCell, fitted));
+ if (spanOf(cols, cell) <= availableWidth) {
+ return { rows, cols, cell, width: spanOf(cols, cell), visible: cellCount };
+ }
+
+ const visibleCols = Math.max(1, Math.floor((availableWidth + HEATMAP_GAP) / (cell + HEATMAP_GAP)));
+ return {
+ rows,
+ cols: visibleCols,
+ cell,
+ width: spanOf(visibleCols, cell),
+ visible: Math.min(cellCount, visibleCols * rows),
+ };
+}
+
+type HeatmapCell = { point: AdeUsageDailyPoint; level: ActivityLevel };
+
+export function useHeatmapCells(points: AdeUsageDailyPoint[]): HeatmapCell[] {
+ return useMemo(() => {
+ const ordered = trimLeadingInactiveDays(
+ [...points].sort((a, b) => a.date.localeCompare(b.date)),
+ );
+ const levels = bucketActivityIntensity(ordered.map(dayActivityScore));
+ return ordered.map((point, index) => ({ point, level: levels[index] ?? 0 }));
+ }, [points]);
+}
+
+type HeatmapTooltip = {
+ show: (point: AdeUsageDailyPoint, target: HTMLElement) => void;
+ hide: () => void;
+ toggle: (point: AdeUsageDailyPoint, target: HTMLElement) => void;
+};
+
+export function ActivityHeatmap({
+ cells,
+ layout,
+ reduced,
+ tooltip,
+}: {
+ cells: HeatmapCell[];
+ layout: HeatmapLayout;
+ reduced: boolean;
+ tooltip: HeatmapTooltip;
+}) {
+ const { rows, cell } = layout;
+ const shown = layout.visible >= cells.length ? cells : cells.slice(cells.length - layout.visible);
+
+ return (
+
+
+ {shown.map(({ point, level }) => (
+ tooltip.show(point, event.currentTarget)}
+ onPointerLeave={tooltip.hide}
+ onClick={(event) => tooltip.toggle(point, event.currentTarget)}
+ />
+ ))}
+
+
+ );
+}
diff --git a/apps/desktop/src/renderer/components/usage/ActivityModule.tsx b/apps/desktop/src/renderer/components/usage/ActivityModule.tsx
index ed6244f07..26e1a1dc6 100644
--- a/apps/desktop/src/renderer/components/usage/ActivityModule.tsx
+++ b/apps/desktop/src/renderer/components/usage/ActivityModule.tsx
@@ -15,6 +15,15 @@ import type {
} from "../../../shared/types";
import { formatTokens } from "../../lib/format";
import { useAppStore } from "../../state/appStore";
+import { usePrefersReducedMotion } from "../../hooks/usePrefersReducedMotion";
+import {
+ dayHasActivity,
+} from "./activityIntensity";
+import {
+ ActivityHeatmap,
+ computeHeatmapLayout,
+ useHeatmapCells,
+} from "./ActivityHeatmap";
// ---------------------------------------------------------------------------
// Persistence
@@ -89,25 +98,6 @@ function persistActivityPatch(patch: Partial
): void {
}
}
-// ---------------------------------------------------------------------------
-// Reduced-motion
-// ---------------------------------------------------------------------------
-
-function usePrefersReducedMotion(): boolean {
- const [reduced, setReduced] = useState(() => {
- if (typeof window === "undefined" || !window.matchMedia) return false;
- return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
- });
- useEffect(() => {
- if (typeof window === "undefined" || !window.matchMedia) return;
- const query = window.matchMedia("(prefers-reduced-motion: reduce)");
- const onChange = () => setReduced(query.matches);
- query.addEventListener?.("change", onChange);
- return () => query.removeEventListener?.("change", onChange);
- }, []);
- return reduced;
-}
-
// ---------------------------------------------------------------------------
// Formatting helpers
// ---------------------------------------------------------------------------
@@ -126,40 +116,6 @@ function formatDay(date: string): string {
return parsed.toLocaleDateString([], { month: "short", day: "numeric" });
}
-/**
- * Single source of truth for a day's activity magnitude. Both the heatmap
- * intensity (dayValue) and the has-activity predicate (dayHasActivity) derive
- * from this, so the two can never drift over which daily-point dimensions
- * count. Every activity dimension is covered: tokens, sessions, interactions,
- * local git commits/PRs/files/lines, and the GitHub-reported counterparts.
- * Counts (sessions, commits, PRs, files) carry heavier weights than raw line
- * counts, which are additive.
- */
-function dayActivityScore(point: AdeUsageDailyPoint): number {
- return (
- point.totalTokens
- + point.sessions * 4_000
- + (point.interactions ?? 0) * 1_500
- + point.commits * 3_000
- + point.prs * 5_000
- + point.filesChanged * 500
- + point.insertions
- + point.deletions
- + (point.githubCommits ?? 0) * 3_000
- + (point.githubPrs ?? 0) * 5_000
- + (point.githubAdditions ?? 0)
- + (point.githubDeletions ?? 0)
- );
-}
-
-function dayValue(point: AdeUsageDailyPoint): number {
- return dayActivityScore(point);
-}
-
-function dayHasActivity(point: AdeUsageDailyPoint): boolean {
- return dayActivityScore(point) > 0;
-}
-
function sessionsTotal(stats: AdeUsageStats): number {
return (stats.summary.chatSessions ?? 0) + (stats.summary.terminalSessions ?? 0);
}
@@ -170,7 +126,6 @@ function sessionsTotal(stats: AdeUsageStats): number {
const TOKEN_COLORS = { input: "#5B93F5", output: "#E0A82E", cache: "#8892A6" } as const;
const CODE_COLORS = { insertions: "#3FB950", deletions: "#E5595C", github: "#8892A6" } as const;
-const HEATMAP_HUE = "#5B93F5";
const CLIENT_COLORS: Record = {
desktop: "#5B93F5",
@@ -315,62 +270,28 @@ function ChartFrame({
);
}
-function ActivityHeatmap({
- points,
- height,
- reduced,
- tooltip,
-}: {
- points: AdeUsageDailyPoint[];
- height: number;
- reduced: boolean;
- tooltip: ReturnType;
-}) {
- const cells = useMemo(() => {
- const ordered = [...points].sort((a, b) => a.date.localeCompare(b.date));
- const max = Math.max(1, ...ordered.map(dayValue));
- return ordered.map((point) => ({ point, intensity: Math.max(0, Math.min(1, dayValue(point) / max)) }));
- }, [points]);
-
- // Fill the chart box instead of leaving it mostly blank: a short range lays out
- // as one tall row of large cells; longer ranges use a 7-row calendar-style grid
- // (columns = weeks) whose cells stretch to fill the available width and height.
- const rows = cells.length <= 7 ? 1 : 7;
- const cols = Math.max(1, Math.ceil(cells.length / rows));
-
- return (
-
- {cells.map(({ point, intensity }) => (
- tooltip.show(point, event.currentTarget)}
- onPointerLeave={tooltip.hide}
- onClick={(event) => tooltip.toggle(point, event.currentTarget)}
- />
- ))}
-
- );
+/** Horizontal padding of the card, per variant — subtracted from the measured
+ * slot to get the width the grid actually has, and added back to turn the
+ * grid's natural width into a card width. */
+const CARD_PADDING_X_COMPACT = 20;
+const CARD_PADDING_X_FULL = 24;
+/** Below this the tab row and the footer line start colliding, so a very short
+ * range widens the card past its grid rather than squeezing the chrome. */
+const MIN_CARD_WIDTH = 380;
+
+/** Tracks a container's width so the heatmap can be sized from it. */
+function useMeasuredWidth(ref: React.RefObject): number {
+ const [width, setWidth] = useState(0);
+ useEffect(() => {
+ const node = ref.current;
+ if (!node || typeof ResizeObserver === "undefined") return;
+ const observer = new ResizeObserver(([entry]) => {
+ setWidth(entry?.contentRect.width ?? 0);
+ });
+ observer.observe(node);
+ return () => observer.disconnect();
+ }, [ref]);
+ return width;
}
/** Muted, centered hint for a tab whose own series is empty while the module
@@ -601,7 +522,15 @@ function WarmEmpty({ height }: { height: number }) {
function TabRow({ tab, onTabChange }: { tab: ActivityTab; onTabChange: (tab: ActivityTab) => void }) {
return (
-
+ // A quiet segmented control: one recessed track, only the active segment
+ // lifted. Four equally prominent buttons read as a toolbar and pulled focus
+ // away from the composer this module sits under.
+
{TABS.map((value) => {
const active = value === tab;
return (
@@ -610,10 +539,10 @@ function TabRow({ tab, onTabChange }: { tab: ActivityTab; onTabChange: (tab: Act
type="button"
role="tab"
aria-selected={active}
- tabIndex={active ? 0 : -1}
+ tabIndex={0}
onClick={() => onTabChange(value)}
- className={`rounded-md px-2 py-1 text-[11px] font-medium transition-colors ${
- active ? "bg-white/[0.08] text-fg" : "text-muted-fg hover:text-fg/85"
+ className={`rounded-[5px] px-1.5 py-[3px] text-[10px] font-medium transition-colors ${
+ active ? "bg-white/[0.07] text-fg/90" : "text-muted-fg/70 hover:text-fg/75"
}`}
>
{TAB_LABELS[value]}
@@ -641,7 +570,7 @@ function RangeControl({
value={preset}
onChange={(event) => onPresetChange(event.target.value as AdeUsageRangePreset)}
aria-label="Time range"
- className="cursor-pointer appearance-none rounded-md border border-white/[0.08] bg-white/[0.03] py-1 pl-2 pr-6 text-[11px] font-medium text-fg/85 outline-none hover:bg-white/[0.06] focus-visible:ring-1 focus-visible:ring-white/20"
+ className="cursor-pointer appearance-none rounded-md border border-white/[0.06] bg-transparent py-[3px] pl-1.5 pr-5 text-[10px] font-medium text-muted-fg/80 outline-none hover:bg-white/[0.05] hover:text-fg/80 focus-visible:ring-1 focus-visible:ring-white/20"
>
{RANGE_OPTIONS.map((option) => (
@@ -649,7 +578,7 @@ function RangeControl({
))}
-
▾
+
▾
);
}
@@ -721,14 +650,14 @@ function FooterChip({
return (
- {chip.icon === "trophy" ?
);
@@ -763,16 +692,39 @@ export function ActivityModule({
}) {
const reduced = usePrefersReducedMotion();
const [tab, setTab] = useState
(() => readActivityPersisted().tab);
+ const slotRef = useRef(null);
const cardRef = useRef(null);
const tooltip = useDayTooltip(cardRef);
const chip = useFooterChip(stats);
const compactMode = variant === "compact";
- const chartHeight = compactMode ? 84 : 132;
+ const chartHeight = compactMode ? 76 : 124;
+ const heatmapMaxCell = compactMode ? 13 : 16;
const maxBars = compactMode ? 40 : 64;
const chartPoints = useChartPoints(stats?.daily ?? [], maxBars);
const hasActivity = (stats?.daily ?? []).some(dayHasActivity);
+ // The card is sized to the heatmap rather than stretched to the slot: a
+ // ~53-column grid of 13px cells simply does not fill 820px, and the leftover
+ // was showing up as dead space along the card's right edge. Measuring the
+ // slot (always full width) instead of the card keeps this off a resize loop.
+ const cardPaddingX = compactMode ? CARD_PADDING_X_COMPACT : CARD_PADDING_X_FULL;
+ const slotWidth = useMeasuredWidth(slotRef);
+ const heatmapCells = useHeatmapCells(stats?.daily ?? []);
+ const heatmapLayout = useMemo(
+ () => computeHeatmapLayout({
+ cellCount: heatmapCells.length,
+ maxCell: heatmapMaxCell,
+ availableWidth: slotWidth > 0 ? Math.max(0, slotWidth - cardPaddingX) : 0,
+ }),
+ [heatmapCells.length, heatmapMaxCell, slotWidth, cardPaddingX],
+ );
+ // Held across tabs so switching to Tokens does not resize the card underneath
+ // the pointer; the bar charts just fill whatever width the heatmap earned.
+ const cardWidth = slotWidth > 0 && heatmapLayout.width > 0
+ ? Math.min(slotWidth, Math.max(MIN_CARD_WIDTH, heatmapLayout.width + cardPaddingX))
+ : undefined;
+
const changeTab = useCallback((next: ActivityTab) => {
setTab(next);
tooltip.hide();
@@ -782,6 +734,10 @@ export function ActivityModule({
const summary = stats?.summary;
const activeDays = summary?.activeDays;
+ // The heatmap is the one view whose height is content-derived, so it opts out
+ // of the reserved chart band the fixed-height bar charts still need.
+ const heatmapView = tab === "activity" && stats != null && hasActivity;
+
let chart: React.ReactNode;
if (loading && !stats) {
chart =
-
-
-
-
+
- {chart}
- {tooltip.tip ?
-
-
-
- {stats ? (
- <>
- {formatTokens(stats.summary.totalTokens)} tokens
- {" · "}
- {compact(sessionsTotal(stats))} sessions
- {activeDays != null ? (
- <>
- {" · "}
- {activeDays} active {activeDays === 1 ? "day" : "days"}
-
- ) : null}
-
- ) : loading ? (
- "Loading activity…"
- ) : (
- "No activity yet"
- )}
-
- {chip ?
-
+
+
+
+
+ {chart}
+ {tooltip.tip ?
+
+
+
+ {stats ? (
+ <>
+ {formatTokens(stats.summary.totalTokens)} tokens
+ {" · "}
+ {compact(sessionsTotal(stats))} sessions
+ {activeDays != null ? (
+ <>
+ {" · "}
+ {activeDays} active {activeDays === 1 ? "day" : "days"}
+
+ ) : null}
+
+ ) : loading ? (
+ "Loading activity…"
+ ) : (
+ "No activity yet"
+ )}
+
+ {chip ?
+
+
);
}
@@ -905,6 +866,9 @@ export function WorkActivityModule() {
persistActivityPatch({ preset: next });
}, []);
+ // max-w bounds the module to the composer's column; the card itself is sized
+ // to its own content inside that. mt- settles it further from the composer so
+ // it reads as an ambient footer rather than a second panel stacked on it.
return (
);
}
diff --git a/apps/desktop/src/renderer/components/usage/activityIntensity.ts b/apps/desktop/src/renderer/components/usage/activityIntensity.ts
new file mode 100644
index 000000000..adaf1023e
--- /dev/null
+++ b/apps/desktop/src/renderer/components/usage/activityIntensity.ts
@@ -0,0 +1,78 @@
+import type { AdeUsageDailyPoint } from "../../../shared/types";
+
+/**
+ * Single source of truth for a day's activity magnitude. Both the heatmap
+ * intensity and the has-activity predicate (dayHasActivity) derive from this,
+ * so the two can never drift over which daily-point dimensions count. Every
+ * activity dimension is covered: tokens, sessions, interactions, local git
+ * commits/PRs/files/lines, and the GitHub-reported counterparts. Counts
+ * (sessions, commits, PRs, files) carry heavier weights than raw line counts,
+ * which are additive.
+ */
+export function dayActivityScore(point: AdeUsageDailyPoint): number {
+ return (
+ point.totalTokens
+ + point.sessions * 4_000
+ + (point.interactions ?? 0) * 1_500
+ + point.commits * 3_000
+ + point.prs * 5_000
+ + point.filesChanged * 500
+ + point.insertions
+ + point.deletions
+ + (point.githubCommits ?? 0) * 3_000
+ + (point.githubPrs ?? 0) * 5_000
+ + (point.githubAdditions ?? 0)
+ + (point.githubDeletions ?? 0)
+ );
+}
+
+export function dayHasActivity(point: AdeUsageDailyPoint): boolean {
+ return dayActivityScore(point) > 0;
+}
+
+/** 0 = no activity; 1-4 = quartile of the non-zero distribution. */
+export type ActivityLevel = 0 | 1 | 2 | 3 | 4;
+
+/** Nearest-rank percentile over an ascending-sorted, non-empty array. */
+function percentile(sorted: number[], fraction: number): number {
+ const index = Math.min(sorted.length - 1, Math.max(0, Math.ceil(fraction * sorted.length) - 1));
+ return sorted[index] as number;
+}
+
+/**
+ * Buckets daily activity scores into 5 discrete shades (GitHub's contribution
+ * graph approach). A linear value/max ramp is useless here because a single
+ * outlier day — one 35.9B-token session is entirely normal — pushes every other
+ * day into the same near-floor tone. Quartiles are computed over the NON-ZERO
+ * days only, so empty days never dilute the distribution, and the busiest day
+ * always lands at level 4 even when the range is flat or has a single spike.
+ */
+export function bucketActivityIntensity(values: number[]): ActivityLevel[] {
+ const active = values.filter((value) => value > 0).sort((a, b) => a - b);
+ if (active.length === 0) return values.map(() => 0);
+
+ const max = active[active.length - 1] as number;
+ const thresholds = [percentile(active, 0.25), percentile(active, 0.5), percentile(active, 0.75)];
+
+ return values.map((value) => {
+ if (value <= 0) return 0;
+ if (value >= max) return 4;
+ let level = 1;
+ for (const threshold of thresholds) {
+ if (value > threshold) level += 1;
+ }
+ return Math.min(4, level) as ActivityLevel;
+ });
+}
+
+/**
+ * Drops leading empty days so the grid sizes to the data instead of the preset.
+ * A project with 19 active days would otherwise render a full year of dead
+ * cells on the all-time range. Trailing and interior gaps are preserved: today
+ * must stay the last cell, and an idle week between two active weeks is signal.
+ * Expects date-ascending input; an all-empty series is returned untouched.
+ */
+export function trimLeadingInactiveDays(points: AdeUsageDailyPoint[]): AdeUsageDailyPoint[] {
+ const firstActive = points.findIndex(dayHasActivity);
+ return firstActive <= 0 ? points : points.slice(firstActive);
+}
diff --git a/apps/desktop/src/renderer/components/usage/usage.test.tsx b/apps/desktop/src/renderer/components/usage/usage.test.tsx
index 2b59b67ba..0a2787e72 100644
--- a/apps/desktop/src/renderer/components/usage/usage.test.tsx
+++ b/apps/desktop/src/renderer/components/usage/usage.test.tsx
@@ -13,9 +13,15 @@ import type {
UsageSnapshot,
} from "../../../shared/types";
import { HeaderUsageControl } from "./HeaderUsageControl";
-import { ActivityModule, WorkActivityModule, readActivityPersisted } from "./ActivityModule";
+import {
+ ActivityModule,
+ WorkActivityModule,
+ readActivityPersisted,
+} from "./ActivityModule";
+import { computeHeatmapLayout } from "./ActivityHeatmap";
import { AdeUsageSection } from "../settings/AdeUsageSection";
import { UsageQuotaPanel } from "./UsageQuotaPanel";
+import { bucketActivityIntensity, trimLeadingInactiveDays } from "./activityIntensity";
import {
ADE_BROWSER_VIEW_OCCLUSION_END_EVENT,
ADE_BROWSER_VIEW_OCCLUSION_START_EVENT,
@@ -30,6 +36,27 @@ type UsageComponentTestBridge = {
ai: Pick
;
};
+function makeActivityDay(
+ date: string,
+ overrides: Partial = {},
+): AdeUsageDailyPoint {
+ return {
+ date,
+ inputTokens: 0,
+ outputTokens: 0,
+ totalTokens: 0,
+ cachedTokens: 0,
+ commits: 0,
+ prs: 0,
+ insertions: 0,
+ deletions: 0,
+ filesChanged: 0,
+ sessions: 0,
+ interactions: 0,
+ ...overrides,
+ };
+}
+
function makeEmptySnapshot(): UsageSnapshot {
return {
windows: [],
@@ -864,7 +891,7 @@ describe("usage components", () => {
expect(screen.queryByText("Your activity will appear here after your first chat.")).toBeNull();
const cell = container.querySelector('[aria-label="Daily activity heatmap"]')!.children[0] as HTMLElement;
- expect(Number(cell.getAttribute("data-intensity"))).toBeGreaterThan(0);
+ expect(Number(cell.getAttribute("data-level"))).toBeGreaterThan(0);
unmount();
}
});
@@ -916,12 +943,15 @@ describe("usage components", () => {
expect(screen.getByRole("button", { name: "30d" })).toBeTruthy();
});
- it("scales the heatmap to fill the box: one row for short ranges, seven for long", () => {
+ it("lays the heatmap out as square cells: one row for short ranges, seven for long", () => {
const short = makeActivityStats();
const { rerender, container } = render();
rerender()} preset="30d" onPresetChange={vi.fn()} />,
+ );
+
+ const grid = container.querySelector('[aria-label="Daily activity heatmap"]')!;
+ expect(grid.children.length).toBe(5);
+ expect(Array.from(grid.children, (cell) => cell.getAttribute("data-level"))).toEqual(["1", "0", "0", "0", "4"]);
+ });
+
+ it("computes a content-sized heatmap layout, shrinking cells when the natural width does not fit", () => {
+ // Unmeasured: natural size at the max cell, nothing dropped.
+ expect(computeHeatmapLayout({ cellCount: 30, maxCell: 13, availableWidth: 0 })).toEqual({
+ rows: 7, cols: 5, cell: 13, width: 5 * 13 + 4 * 3, visible: 30,
+ });
+
+ // Fits with room to spare: cells stay at max and the grid stops short of
+ // the available width — the card is what shrinks, not the cells.
+ const roomy = computeHeatmapLayout({ cellCount: 30, maxCell: 13, availableWidth: 800 });
+ expect(roomy).toMatchObject({ cell: 13, cols: 5, visible: 30 });
+ expect(roomy.width).toBeLessThan(800);
+
+ // Natural width exceeds available: cells shrink toward the floor, every
+ // day still renders, and the grid fits.
+ const tight = computeHeatmapLayout({ cellCount: 371, maxCell: 13, availableWidth: 800 });
+ expect(tight.cell).toBeLessThan(13);
+ expect(tight.cell).toBeGreaterThanOrEqual(6);
+ expect(tight.visible).toBe(371);
+ expect(tight.width).toBeLessThanOrEqual(800);
+
+ // Past the floor: oldest columns are dropped rather than overflowing.
+ const overflowing = computeHeatmapLayout({ cellCount: 900, maxCell: 13, availableWidth: 800 });
+ expect(overflowing.cell).toBe(6);
+ expect(overflowing.visible).toBeLessThan(900);
+ expect(overflowing.visible % 7).toBe(0);
+ expect(overflowing.width).toBeLessThanOrEqual(800);
+ });
+
+ it("sizes the card to the heatmap grid instead of stretching it across the slot", () => {
+ const observers: Array<{ callback: ResizeObserverCallback; targets: Element[] }> = [];
+ class TestResizeObserver implements ResizeObserver {
+ private readonly entry: { callback: ResizeObserverCallback; targets: Element[] };
+ constructor(callback: ResizeObserverCallback) {
+ this.entry = { callback, targets: [] };
+ observers.push(this.entry);
+ }
+ observe(target: Element): void { this.entry.targets.push(target); }
+ unobserve(): void {}
+ disconnect(): void {}
+ }
+ const original = globalThis.ResizeObserver;
+ Object.assign(globalThis, { ResizeObserver: TestResizeObserver });
+ const emit = (width: number) => {
+ for (const observer of observers) {
+ observer.callback(
+ observer.targets.map((target) => ({ target, contentRect: { width } }) as unknown as ResizeObserverEntry),
+ {} as ResizeObserver,
+ );
+ }
+ };
+ const dailyFrom = (days: number) =>
+ Array.from({ length: days }, (_, index) => {
+ const date = new Date(Date.UTC(2024, 0, 1 + index)).toISOString().slice(0, 10);
+ return makeActivityDay(date, {
+ inputTokens: 100,
+ outputTokens: 50,
+ totalTokens: 150,
+ sessions: 1,
+ interactions: 1,
+ });
+ });
+
+ try {
+ const { container, rerender } = render(
+ )}
+ variant="compact"
+ preset="all"
+ onPresetChange={vi.fn()}
+ className="w-full max-w-[820px]"
+ />,
+ );
+ act(() => emit(820));
+
+ const card = container.querySelector("[data-activity-module]") as HTMLElement;
+ const grid = container.querySelector('[aria-label="Daily activity heatmap"]') as HTMLElement;
+ const cardWidth = Number.parseFloat(card.style.width);
+ const gridWidth = Number.parseFloat(grid.style.width);
+ // Card = grid + its own padding, and it stops short of the 820px slot:
+ // the leftover becomes centring margin, not dead space inside the card.
+ expect(gridWidth).toBeGreaterThan(0);
+ expect(cardWidth).toBe(gridWidth + 20);
+ expect(cardWidth).toBeLessThan(820);
+ expect(Number(grid.getAttribute("data-heatmap-cell"))).toBeLessThanOrEqual(13);
+ expect(grid.children.length).toBe(400);
+
+ // Far past the natural fit: cells bottom out at the floor, the grid
+ // still fits the slot, and the oldest columns are dropped.
+ rerender(
+ )}
+ variant="compact"
+ preset="all"
+ onPresetChange={vi.fn()}
+ className="w-full max-w-[820px]"
+ />,
+ );
+ const wide = container.querySelector('[aria-label="Daily activity heatmap"]') as HTMLElement;
+ expect(wide.getAttribute("data-heatmap-cell")).toBe("6");
+ expect(Number.parseFloat(wide.style.width)).toBeLessThanOrEqual(800);
+ expect(wide.children.length).toBeLessThan(900);
+ } finally {
+ if (original) Object.assign(globalThis, { ResizeObserver: original });
+ else Reflect.deleteProperty(globalThis, "ResizeObserver");
+ }
});
it("shows a per-tab hint when the active tab is empty but the module has data", () => {
@@ -1052,3 +1207,60 @@ describe("usage components", () => {
});
});
});
+
+describe("activity heatmap intensity", () => {
+ it("spreads an outlier-dominated distribution across all four levels", () => {
+ const levels = bucketActivityIntensity([
+ 1_000, 4_000, 9_000, 20_000, 60_000, 150_000, 400_000, 35_900_000_000,
+ ]);
+
+ expect(levels).toEqual([1, 1, 2, 2, 3, 3, 4, 4]);
+ expect(new Set(levels).size).toBe(4);
+ });
+
+ it.each([
+ [[500, 500, 500, 500], [4, 4, 4, 4]],
+ [[0, 0, 7, 0], [0, 0, 4, 0]],
+ [[0, 0, 0], [0, 0, 0]],
+ [[], []],
+ ])("maps $0 to $1", (values, expected) => {
+ expect(bucketActivityIntensity(values)).toEqual(expected);
+ });
+
+ it("ignores empty days when computing quartiles and keeps the busiest day at level 4", () => {
+ const dense = bucketActivityIntensity([10, 20, 30, 40]);
+ const sparse = bucketActivityIntensity([0, 10, 0, 20, 0, 30, 0, 40, 0]);
+
+ expect(sparse.filter((level) => level > 0)).toEqual(dense);
+ expect(bucketActivityIntensity([1, 100]).at(-1)).toBe(4);
+ expect(bucketActivityIntensity([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]).at(-1)).toBe(4);
+ });
+
+ it("trims only leading inactive days and preserves interior and trailing gaps", () => {
+ const points = [
+ makeActivityDay("2026-01-01"),
+ makeActivityDay("2026-01-02"),
+ makeActivityDay("2026-01-03", { totalTokens: 1_000 }),
+ makeActivityDay("2026-01-04"),
+ makeActivityDay("2026-01-05", { commits: 2 }),
+ makeActivityDay("2026-01-06"),
+ ];
+
+ expect(trimLeadingInactiveDays(points).map((point) => point.date)).toEqual([
+ "2026-01-03",
+ "2026-01-04",
+ "2026-01-05",
+ "2026-01-06",
+ ]);
+ });
+
+ it("keeps empty/already-active series stable and counts GitHub-only activity", () => {
+ const empty = [makeActivityDay("2026-01-01"), makeActivityDay("2026-01-02")];
+ const active = [makeActivityDay("2026-01-01", { sessions: 1 }), makeActivityDay("2026-01-02")];
+ const github = [makeActivityDay("2026-01-01"), makeActivityDay("2026-01-02", { githubCommits: 3 })];
+
+ expect(trimLeadingInactiveDays(empty)).toEqual(empty);
+ expect(trimLeadingInactiveDays(active)).toBe(active);
+ expect(trimLeadingInactiveDays(github).map((point) => point.date)).toEqual(["2026-01-02"]);
+ });
+});
diff --git a/apps/desktop/src/renderer/hooks/usePrefersReducedMotion.ts b/apps/desktop/src/renderer/hooks/usePrefersReducedMotion.ts
new file mode 100644
index 000000000..00dec34b8
--- /dev/null
+++ b/apps/desktop/src/renderer/hooks/usePrefersReducedMotion.ts
@@ -0,0 +1,23 @@
+import { useEffect, useState } from "react";
+
+/**
+ * Lightweight matchMedia hook that does not depend on motion/react. Several
+ * renderer suites install partial motion mocks, so the shared hook stays
+ * usable by controls outside animation-library boundaries.
+ */
+export function usePrefersReducedMotion(): boolean {
+ const [reduced, setReduced] = useState(() =>
+ typeof window !== "undefined"
+ && typeof window.matchMedia === "function"
+ && window.matchMedia("(prefers-reduced-motion: reduce)").matches);
+
+ useEffect(() => {
+ if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+ const query = window.matchMedia("(prefers-reduced-motion: reduce)");
+ const onChange = () => setReduced(query.matches);
+ query.addEventListener?.("change", onChange);
+ return () => query.removeEventListener?.("change", onChange);
+ }, []);
+
+ return reduced;
+}
diff --git a/apps/desktop/src/renderer/index.css b/apps/desktop/src/renderer/index.css
index 742451035..e1ae73eb1 100644
--- a/apps/desktop/src/renderer/index.css
+++ b/apps/desktop/src/renderer/index.css
@@ -2503,6 +2503,34 @@ button:active, [role="button"]:active {
box-shadow: var(--shadow-card-hover);
}
+/*
+ * Launch shelf beneath the new-chat composer.
+ *
+ * The parent stack contributes a 12px gap and the composer wrapper contributes
+ * another 12px bottom margin. Cancel both and overlap the painted composer by
+ * one pixel so there is no background-colored seam at any scale factor.
+ * The shelf has no top border: the composer's bottom edge is the shared edge,
+ * while the shelf supplies only the continuing sides and bottom.
+ *
+ * Keep this geometry in CSS rather than Tailwind arbitrary values carrying
+ * variables; those can disappear from the generated stylesheet silently.
+ */
+.ade-chat-launch-shelf {
+ position: relative;
+ margin-top: -25px;
+ padding: 5px 12px 8px;
+ border: 1px solid var(--chat-glass-border);
+ border-top: 0;
+ border-radius: 0 0 var(--chat-radius-shell) var(--chat-radius-shell);
+ background:
+ linear-gradient(
+ to bottom,
+ color-mix(in srgb, var(--chat-glass-bg) 78%, transparent) 0%,
+ color-mix(in srgb, var(--chat-panel-bg) 42%, transparent) 100%
+ );
+ box-shadow: 0 14px 32px -18px rgb(0 0 0 / 75%);
+}
+
.ade-liquid-glass {
position: relative;
isolation: isolate;
@@ -2554,6 +2582,15 @@ button:active, [role="button"]:active {
0 18px 44px -30px rgba(0, 0, 0, 0.72);
}
+/*
+ * The empty-state launch shelf sits immediately behind the composer. Its
+ * shared edge must stay visible; the normal downward composer shadow otherwise
+ * paints a black band over the shelf and looks exactly like layout spacing.
+ */
+[data-chat-composer-wrapper]:has(+ .ade-chat-launch-shelf) [data-chat-composer-mode] {
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
+}
+
/* Rich composer chips are contentEditable="false", so browsers skip them when
painting the native selection and a drag across a chip looks like it breaks
in half. AgentChatComposer marks the chips the selection intersects with
@@ -3369,6 +3406,86 @@ button:active, [role="button"]:active {
container-name: chat-composer;
}
+/*
+ * Composer selectors share the composer surface instead of nesting individual
+ * bordered pills inside it. The popovers retain their normal menu chrome.
+ */
+.ade-chat-composer-footer :is(
+ [data-model-picker-trigger],
+ [data-reasoning-effort-picker-trigger],
+ .ade-chat-composer-permission-trigger
+) {
+ height: 28px;
+ font-size: 11px;
+ line-height: 1;
+ border-color: transparent;
+ border-radius: 6px;
+ background: transparent;
+ box-shadow: none;
+ padding-inline: 6px;
+}
+
+.ade-chat-composer-footer [data-reasoning-chip] {
+ font-size: 11px;
+ line-height: 1;
+}
+
+.ade-chat-composer-footer :is(
+ [data-model-picker-trigger],
+ [data-reasoning-effort-picker-trigger],
+ .ade-chat-composer-permission-trigger
+):hover:not(:disabled),
+.ade-chat-composer-footer :is(
+ [data-model-picker-trigger],
+ [data-reasoning-effort-picker-trigger],
+ .ade-chat-composer-permission-trigger
+)[data-state="open"] {
+ border-color: transparent;
+ background: rgb(255 255 255 / 5%);
+ box-shadow: none;
+}
+
+.ade-chat-composer-footer .ade-chat-composer-permission-trigger > span:first-child {
+ width: 13px;
+ height: 13px;
+ border-color: transparent;
+ border-radius: 0;
+ background: transparent;
+}
+
+.ade-chat-composer-footer .ade-chat-composer-permission-trigger > span:first-child svg {
+ width: 11px;
+ height: 11px;
+}
+
+.ade-chat-composer-footer .ade-chat-composer-permission-label {
+ font-size: 11px;
+ line-height: 1;
+}
+
+/* The launch shelf is already the containing surface, so machine and lane are
+ inline selectors rather than pills nested inside another drawer. */
+.ade-chat-launch-shelf :is([data-draft-machine-picker], .ade-lane-trigger) {
+ font-size: 9px;
+ line-height: 1;
+ border-color: transparent;
+ border-radius: 6px;
+ background: transparent;
+ box-shadow: none;
+}
+
+.ade-chat-launch-shelf :is([data-draft-open-shell], [data-draft-import-session]) {
+ font-size: 9px;
+ line-height: 1;
+}
+
+.ade-chat-launch-shelf :is([data-draft-machine-picker], .ade-lane-trigger):hover:not(:disabled),
+.ade-chat-launch-shelf :is([data-draft-machine-picker], .ade-lane-trigger)[data-open="true"],
+.ade-chat-launch-shelf [data-draft-machine-picker][aria-expanded="true"] {
+ border-color: transparent;
+ background: rgb(255 255 255 / 5%);
+}
+
@container chat-composer (max-width: 560px) {
.ade-chat-composer-permission-trigger {
min-width: 1.5rem;
diff --git a/docs/features/chat/README.md b/docs/features/chat/README.md
index b729d3ae4..ca97ce7f9 100644
--- a/docs/features/chat/README.md
+++ b/docs/features/chat/README.md
@@ -106,9 +106,9 @@ for its separate RPC, sync, storage, and UI contracts.
| `apps/desktop/src/renderer/components/chat/chatTurnState.ts` | Shared renderer turn-state invariant used by cache hydration, history snapshots, live event flushes, and locked-session summary refreshes. A terminal `status`/`done` at the end of the transcript outranks an eventually consistent `status: "active"` session summary, so failed/interrupted turns restore an idle composer. Also resolves the user message associated with a failed turn, including Codex optimistic user rows that predate assignment of a provider `turnId`. |
| `apps/desktop/src/renderer/lib/claudeAuthPrompt.ts` | Renderer-side classifier for Claude logged-out / `/login`-required error text. Drives the header and sticky login CTAs; matches both Claude-first wording and ADE's own "Authentication failed for <model>" classified message. |
| `apps/desktop/src/renderer/lib/openExternal.ts` | Renderer-side router for outbound URLs. Defines the `ADE_OPEN_BUILT_IN_BROWSER_EVENT` window event plus `openUrlInAdeBrowser(url)` and `openExternalUrl(url)`. `openUrlInAdeBrowser` dispatches the event (so any open `WorkSidebar` can flip to its Browser tab), then calls `window.ade.builtInBrowser.navigate({ url, newTab: true })`. Anything that is not a normal `http`/`https`/`about:blank` URL falls through to `window.ade.app.openExternal` (system browser). All in-renderer URL clicks (markdown links, lane-runtime open buttons, etc.) go through this helper so the user stays inside ADE. |
-| `apps/desktop/src/renderer/components/chat/AgentChatComposer.tsx` | Composer UI: single-session prompt entry, attachments, model/permission controls, slash commands, pending input answering, parallel launch slot configuration, and inline smart-link chips. Completed GitHub, Linear, ADE, and generic web URLs become atomic violet chips while their literal URL remains the serialized prompt text; click/keyboard actions offer Copy link and Remove link, hover exposes the canonical URL, and Backspace/Delete removes the whole token. During an active Claude turn, the split Send caret selects inline, after-turn, or interrupt delivery without sending; the primary button and Enter execute the chosen mode. Staged messages expose send-during-turn, interrupt, cancel, and Edit-back-to-composer actions. Permission popover rows keep only the mode title in the visible row (the explanation remains in the tooltip/title) for every provider-backed picker. Codex MCP elicitations show Allow once / Deny, conditionally show Always allow, and expose safe URL authorization through ADE's browser. Pasted, dropped, and native-path attachments are copied through `ade.agentChat.saveTempAttachment` on the draft's selected runtime, so a MacBook chat never receives a Studio-only path (and vice versa). The launch-prompt clipboard helper is gated separately from prompt copying: `launchPromptClipboardEnabled` controls copying and `launchPromptClipboardNoticeEnabled` controls whether composer reminder text is shown. Orchestration model-selection pending inputs decode the full agent briefing metadata (`workDescription`, `filesHint`, `dependsOn`) so the picker can show what the lead is spawning without preselecting a recommended model. The machine chip next to the lane selector picks which machine owns an auto-created lane and draft without rebinding the project tab. Attachment storage, model/auth discovery, slash commands, file search, parallel launch state, creation, rollback, and recovery all carry that captured `OpenProjectBinding`; unresolved or disconnected bindings fail closed instead of falling back to the tab's machine. Changing machines clears machine-owned attachments and tool context so paths cannot cross runtimes. The **This Mac** option resolves to *this repository's* local checkout through `thisMachineProjectRoot.ts` rather than to the first open local tab; when no matching local checkout exists, the composer shows an inline dismissible amber notice. |
+| `apps/desktop/src/renderer/components/chat/AgentChatComposer.tsx`, `DraftMachinePicker.tsx` | Composer UI: single-session prompt entry, attachments, model/permission controls, slash commands, pending input answering, parallel launch slot configuration, and inline smart-link chips. Completed GitHub, Linear, ADE, and generic web URLs become atomic violet chips while their literal URL remains the serialized prompt text; click/keyboard actions offer Copy link and Remove link, hover exposes the canonical URL, and Backspace/Delete removes the whole token. During an active Claude turn, the split Send caret selects inline, after-turn, or interrupt delivery without sending; the primary button and Enter execute the chosen mode. Staged messages expose send-during-turn, interrupt, cancel, and Edit-back-to-composer actions. Permission popover rows keep only the mode title in the visible row (the explanation remains in the tooltip/title) for every provider-backed picker. Codex MCP elicitations show Allow once / Deny, conditionally show Always allow, and expose safe URL authorization through ADE's browser. Pasted, dropped, and native-path attachments are copied through `ade.agentChat.saveTempAttachment` on the draft's selected runtime, so a MacBook chat never receives a Studio-only path (and vice versa). The launch-prompt clipboard helper is gated separately from prompt copying: `launchPromptClipboardEnabled` controls copying and `launchPromptClipboardNoticeEnabled` controls whether composer reminder text is shown. Orchestration model-selection pending inputs decode the full agent briefing metadata (`workDescription`, `filesHint`, `dependsOn`) so the picker can show what the lead is spawning without preselecting a recommended model. The empty-draft launch shelf separates machine selection (`DraftMachinePicker`) from the lane list, scopes lanes to the chosen machine, and keeps Shell and Import beside the resulting target. It hides the machine control when there is only one choice and preserves Auto-create across machine changes. Attachment storage, model/auth discovery, slash commands, file search, parallel launch state, creation, rollback, and recovery all carry that captured `OpenProjectBinding`; unresolved or disconnected bindings fail closed instead of falling back to the tab's machine. Changing machines clears machine-owned attachments and tool context so paths cannot cross runtimes. The **This Mac** option resolves to *this repository's* local checkout through `thisMachineProjectRoot.ts` rather than to the first open local tab; when no matching local checkout exists, the composer shows an inline dismissible amber notice. |
| `apps/desktop/src/renderer/components/chat/ComposerPromptStash.tsx` | Desktop prompt-stash control mounted immediately left of the context meter. Cmd/Ctrl+S and the bookmark share one path: non-empty text is persisted before the exact saved draft is cleared, while an empty draft opens the keyboard-navigable stash menu. Restore is a take operation, but it puts text into the composer before waiting for a remote delete so edits cannot be overwritten; delete failure intentionally favors a duplicate over lost text. Attachments and context items never enter the stash. |
-| `apps/desktop/src/renderer/components/shared/ModelPicker/ReasoningEffortPicker.tsx` | Shared reasoning slider. Supports pointer drag with nearest-tick snap, keyboard arrows/Home/End, a progressive filled gradient, and a directional roll transition for the active tier label, GPT-5.6 labels (Light, Medium, High, Extra High, Max, and Ultra where supported), and an Ultra multi-agent usage note. Choosing or dragging to a tier leaves the popover open; outside click or Escape closes it. |
+| `apps/desktop/src/renderer/components/shared/ModelPicker/ReasoningEffortPicker.tsx` | Shared reasoning slider. Supports pointer drag with nearest-tick snap, keyboard arrows/Home/End, a progressive filled gradient, and a directional roll transition for the active tier label, GPT-5.6 labels (Light, Medium, High, Extra High, Max, and Ultra where supported), and an Ultra multi-agent usage note. The collapsed trigger uses full tier names on desktop, keeps abbreviations for narrow/mobile layouts, and does not add a second border around the label. Choosing or dragging to a tier leaves the popover open; outside click or Escape closes it. |
| `apps/desktop/src/renderer/components/chat/ChatModelSelectionPendingCard.tsx` | Pending-input card used when ADE asks the user to choose a model for a new or rerouted agent. It renders the agent briefing, touched files, run-after dependencies, provider/model controls, cancel/confirm states, and leaves the model unset until the user chooses one. |
| `apps/desktop/src/renderer/components/chat/ChatCursorCloudPanel.tsx` | Side panel for Cursor Cloud (background agents): lists existing cloud agents and runs for the lane, lets the user open an existing cloud chat in ADE, archive/unarchive/cancel, and stream run output. Backed by `ade.ai.cursorCloud.*` IPC. |
| `apps/desktop/src/renderer/components/chat/CursorCloudInlineLaunch.tsx` | Inline composer affordance for "Send to Cursor Cloud": picks repo + branch + Cursor Cloud-eligible model, optionally targeting a detected PR, and dispatches the prompt to a fresh cloud agent. |
diff --git a/docs/features/chat/composer-and-ui.md b/docs/features/chat/composer-and-ui.md
index 2b7adf630..21b9b977e 100644
--- a/docs/features/chat/composer-and-ui.md
+++ b/docs/features/chat/composer-and-ui.md
@@ -12,7 +12,7 @@ subagents, computer use). The pane derives all visible state from the
| Path | Role |
|---|---|
| `AgentChatPane.tsx` | Top-level pane; IPC wiring, session state, presentation profile resolution, lane navigation, parallel launch orchestration, mounting of sub-panels and composer. It persists a per-session `ade.chat.lastViewed.v1:` timestamp in renderer `localStorage`; scheduled turns that fired since that timestamp produce a dismissible while-you-were-away strip above the composer, with the latest outcome preview and jump requests for up to three wake dividers. Visible Work grid tiles flush user/lifecycle/live events immediately and poll-recover active transcripts so inactive-but-visible tiles stay current. Draft chats preserve user-touched model/reasoning/permission controls across late lane-session hydration, and composer text is keyed by session id or lane draft key so switching draft lanes does not reuse another draft's text. Accepts an optional `draftContextTargetId` prop so the Work sidebar can target an unsaved draft composer for context insertions (attachments, iOS/App Control/browser selections, draft text) even before a chat session exists; window event handlers match on either `sessionId` or `draftTargetId`. When auto-creating a lane the draft resolves the primary lane for the `onLaneChange` callback so the sidebar lane context stays in sync. Composer draft state (text, model, reasoning, attachments, context items) is persisted to `localStorage` under the `ade.chat.composerDraft.v1` key family and restored on scope change through `ComposerDraftStorageSnapshot`. Pending-steer Edit uses `cancelSteer({ requireQueued: true })`, then merges the queued text, file attachments, and context attachments into the captured composer draft; if the message already left the queue, the cancel fails and the draft is left unchanged. Draft launches are tracked through **root**-store-backed `DraftLaunchJob` state machines with multi-step progress (`creating-lane` -> `starting-session` -> `sending-prompt` -> `ready` / `failed`; auto-create names the lane deterministically up front and renames to the AI name in the background, so there is no blocking `naming-lane` phase); jobs live in the root store (not the per-project store) so an in-flight launch survives a remote project switch that tears down the originating project surface. The detached launch chain captures the originating `OpenProjectBinding`, passes it as a `pin` to branch/lane/chat/orchestration/PTY calls so a mid-launch project switch keeps targeting the originating runtime, pins rollback to that binding, and caps each step at 90 s (`withDraftLaunchTimeout`). The composer is cleared optimistically at job start, stale active rows gain a hide-status escape hatch, failed jobs expose Restore in the job strip and matching error banner, and the `DraftLaunchSnapshot` captures the full control state so the async launch uses frozen settings. It also owns the transcript-resilience rules described in [Transcript and turns](transcript-and-turns.md#history-snapshots-scroll-back-and-misses): `resolveChatHistoryMissAction` (a history miss never blanks a rendered transcript), `resolveSnapshotHistoryCursor` (`hasOlderHistory` is authoritative over `tailStartOffset`), the bounded silent retry ladder `OLDER_HISTORY_RETRY_DELAYS_MS = [800, 2400]`, the `syncPendingBySession` flag that surfaces as `data-chat-sync-pending` + a 2 px catch-up hairline under the header (a fading static rule, never a continuous animation; the fade is `motion-safe:`), and a minimal static cold-chat skeleton (`data-chat-cold-skeleton`) so a chat with no cached view reads as loading rather than empty. `resolveRenderedChatSessionId` picks the session to paint from the incoming props rather than the effect-synced `selectedSessionId`, which otherwise paints the outgoing chat's transcript for one frame after the pane is pointed elsewhere. The module-level view cache holds 8 entries / 128 MB total (32 MB per session, matching the resident ceiling) and stores a reference to the array the pane already holds; a **detached** view — an older transcript prefix whose live tail was dropped to stay under the resident cap after paging back — is skipped rather than evicted, so a later restore can never render an old slice as if it were current. The active-turn recovery loop is a **stall detector**, not the transport: it re-reads the transcript on a jittered `ACTIVE_TURN_RECOVERY_INTERVAL_MS` (10 s) tick and skips entirely when the live subscription delivered anything inside that window. Subscription ownership is handed to `chatSessionRetention.ts` when the pane hides. Left/right floating-pane reserve is applied only while a selected session surface renders those panes; an empty draft never reserves a hidden PR or Chat Actions pane, so its hero composer remains centered. |
-| `apps/desktop/src/renderer/components/usage/ActivityModule.tsx` | Tabbed cross-client activity/tokens/code/clients module. `AgentChatPane` mounts the self-fetching `WorkActivityModule` (compact variant) beneath the empty Work draft composer when no app panel is open; the component persists the chosen tab and day/week/month/year range under `ade.activity.module.v1`. |
+| `apps/desktop/src/renderer/components/usage/ActivityModule.tsx`, `ActivityHeatmap.tsx`, `activityIntensity.ts` | Tabbed cross-client activity/tokens/code/clients module. `AgentChatPane` mounts the self-fetching `WorkActivityModule` (compact variant) beneath the empty Work draft composer when no app panel is open; the component persists the chosen tab and day/week/month/year range under `ade.activity.module.v1`. `ActivityHeatmap` owns the responsive seven-row grid and viewport fitting, while `activityIntensity` provides the shared daily activity score, non-zero quartile buckets, and leading-inactive-day trimming used by the grid and summary counts. |
| `apps/desktop/src/renderer/lib/draftLaunchJobs.ts` | Pure helper for Work draft-launch job DTOs, terminal/stale-state detection, and pruning. The list keeps active rows ahead of terminal rows, fills remaining retained slots with terminal rows, and keeps at least one terminal row alongside active jobs. Also owns the durability constants/helpers: `DRAFT_LAUNCH_TIMEOUT_MS` (90 s) + `withDraftLaunchTimeout` (fails a step whose runtime call never settles; the underlying IPC is not cancellable, so it keeps running detached and the timeout only unwedges the renderer-side job) and `LAUNCH_PROJECT_CHANGED_MESSAGE` (the legacy/unpinned abort error used only when no originating project binding is available and the active project drifts mid-launch). |
| `apps/desktop/src/renderer/lib/handoffLaunchJobs.ts` | Pure helper for handoff placeholder DTOs, scope keys, stable placeholder ids, status labels, and search matching. `AgentChatPane` writes these jobs into the root store while `TerminalsPage` passes matching jobs into the Work session sidebar. The local handoff surface offers a brief summarized handoff or a full-history fork whenever the source provider is fork-capable (`providerSupportsHandoffFork`: Claude, Codex, OpenCode, Droid); Cursor is brief-only. Fork keeps the new chat on the same provider and lane while allowing the target model to change; Claude forks the SDK session pointer, Codex the app-server thread (`thread/fork`), OpenCode `session.fork`, and Droid `forkSession()`. |
| `apps/desktop/src/renderer/lib/aiDiscoveryCache.ts` | Runtime-binding-scoped AI integration-status and provider-model cache shared across renderer surfaces. Local and remote checkouts with the same project identity cannot share model/auth state. `getAiStatusCached` uses a 10-second freshness window and deduplicates concurrent `ade.ai.getStatus` requests; cache update/invalidation events let open ModelPickers react without polling or mounting their own background refresh loops. |
@@ -66,7 +66,7 @@ subagents, computer use). The pane derives all visible state from the
| `apps/desktop/src/renderer/lib/visualContextFormatting.ts` | Prompt formatting for visual/tool context from attachments, iOS Simulator, App Control, and built-in browser selections. |
| `apps/desktop/src/shared/types/chat.ts` | Shared composer/session DTOs, including `PARALLEL_CHAT_MAX_ATTACHMENTS`, parallel launch state types, the `AgentChatModelCatalog*` set, `AgentChatModelCatalogRefreshProvider` (`opencode` / `cursor` / `droid` / `lmstudio` / `ollama`), and `AgentChatModelCatalogArgs` (`mode`, `refreshProvider`). |
| `apps/desktop/src/renderer/components/shared/ModelPicker/` | Modular ModelPicker (see [ModelPicker structure](#modelpicker-structure)): `ModelPicker.tsx`, `ModelPickerContent.tsx`, `ModelPickerRail.tsx`, `ModelListRow.tsx`, `ReasoningEffortPicker.tsx` (draggable/snapping gradient slider that stays open on selection), `modelCatalog.ts`, `modelOrdering.ts`, `modelPickerSearch.ts`, `providerEmptyState.tsx`, `runtimeCatalogCache.ts`, plus the `useProviderAuthStatus` / `useAuthOnlyFilter` / `useModelFavorites` / `useModelRecents` / `usePerSurfaceModelDefaults` / `useReasoningByFamily` hooks. |
-| `apps/desktop/src/renderer/components/shared/PermissionModePicker.tsx` | The permission-mode pill itself, shared by every surface that lets a user choose how a chat starts: the composer's per-provider controls, `SessionLaunchModelControls`, and the cross-machine handoff modal. Exports the generic `PermissionModePicker`, `PermissionModeGlyph`, the tone/icon enums the provider option tables map into, and `PERMISSION_TRIGGER_CLASS` — the one definition of the trigger chrome, previously hand-copied per surface. That class scales with `calc(var(--chat-font-size,14px)*9/14)`; the fallback is load-bearing, because `--chat-font-size` only exists on a chat appearance root and a bare token would leave the launch and handoff pills inheriting the ambient size. Anything offering permission modes renders this, not a lookalike. |
+| `apps/desktop/src/renderer/components/shared/PermissionModePicker.tsx` | The permission-mode pill itself, shared by every surface that lets a user choose how a chat starts: the composer's per-provider controls, `SessionLaunchModelControls`, and the cross-machine handoff modal. Exports the generic `PermissionModePicker`, `PermissionModeGlyph`, the tone/icon enums the provider option tables map into, and `PERMISSION_TRIGGER_CLASS` — the one definition of the trigger chrome, previously hand-copied per surface. That class scales with `calc(var(--chat-font-size,14px)*9/14)`; the fallback is load-bearing, because `--chat-font-size` only exists on a chat appearance root and a bare token would leave the launch and handoff pills inheriting the ambient size. Anything offering permission modes renders this, not a lookalike. Tone colour is deliberately asymmetric between the collapsed trigger and the open popover: only the `red` tone (bypassed permissions — the one mode here that can do damage) keeps colour on the resting trigger, and as a border/text tint rather than a filled pill. Every safe tone renders neutral trigger chrome and lets its tone read from the glyph alone. A toolbar where each control is a saturated pill has no way left to say "this one is different"; the full palette still applies to the popover rows, where there is room. |
| `apps/desktop/src/renderer/components/shared/BlockedAction.tsx` | The blocked-action primitive: `BlockedActionReason` (id, title, detail, and the optional fix that clears it), `BlockedReasons` to render them inline, `describeBlockedReasons` for tooltip/a11y text, and `BlockedActionButton`, which takes the reasons themselves rather than a `disabled` boolean so a caller cannot disable a control without handing over the explanation. Exists because ADE keeps regrowing the same bug — a surface computes blockers, disables the primary button, and renders none of them. |
Cross-machine Work drafts do not rebind the project tab. `AgentChatPane` freezes
@@ -109,6 +109,76 @@ to the selected-session branch that mounts those panes. The empty/draft branch
uses a zero reserve even when the lane's persisted PR-pane preference is open,
so a new-chat composer is centered rather than shifted for invisible chrome.
+### Empty draft surface
+
+The draft (new-chat) branch is three elements, not seven: the wordmark, the
+composer, and a **launch shelf** tucked under the composer, with the activity
+module below. There is no standing "Start a new conversation" caption — the
+wordmark already identifies the app, so the line was a band of vertical space
+spent restating what the user could see. Only a non-default mode still writes a
+line there (`isOrchestratorDraft` renders "Orchestrate a swarm of agents"),
+because that names something the surface does not otherwise show.
+
+The shelf holds everything that answers **where this runs**, as two adjacent
+dropdowns plus two labelled actions: `DraftMachinePicker`, then a `LaneCombobox`
+(mounted `compact`, so its 28px trigger matches the composer pills above it),
+then Shell and Import. The composer sits above it at `z-10`.
+
+Machine and lane are **separate controls on purpose**. Folding them into one
+list made that list carry two orthogonal choices: every lane row had to name its
+machine, and the list grew by machine count rather than staying the length of one
+machine's lanes. Choosing the machine first keeps the lane list flat, short, and
+scoped — `DraftMachinePicker` renders nothing below two machines, and
+`AgentChatPane` passes `draftShelfLanes` (bare lane ids for the selected machine)
+rather than the machine-qualified option ids the combined selector needed. This
+also retired the composer toolbar's machine chip, which only ever existed because
+machine had nowhere else to live.
+
+`handleMachineChange` in `useDraftMachineRouting.ts` re-points the lane to the
+target machine's primary **without touching `draftLaunchTargetId`**, so a draft
+sitting on "Auto-create lane" keeps that target and only its underlying machine
+moves — auto-create and primary are the two targets ADE guarantees on every
+machine running it, so neither needs the user to re-choose. A machine with no
+lanes at all falls back to `AUTO_CREATE_LANE_OPTION_ID` rather than erroring or
+leaving the picker blank.
+
+Shell and Import keep text labels. As icon-only buttons they were unreadable —
+that was a symptom of solving the wrong problem (compressing controls to fit a
+shelf that was simply too tall).
+
+`LaneCombobox` itself was reworked for this: a single-line trigger (lane dot,
+name, branch, caret) instead of a 40px two-line block, lane colour reduced to
+the dot so the control sits in the same neutral ghost family as its neighbours,
+and a search field. Branch text truncates before the lane name via flex shrink
+factors — the branch is context, the name is the label. Two invariants are pinned
+by tests: `fullWidth` emits no `max-w-*` and nothing inside establishes a
+min-content floor (the measured narrow-pane overflow this component regressed
+before), and `computeLanePopoverPlacement` clamps on both axes including the
+case where neither side fits. The popover has no exit animation on purpose — a
+body-portal node that outlives `open` by a frame leaks into whatever renders
+next, which is how its search field started colliding with unrelated
+`getByRole("textbox")` queries in the chat suites. Its machine-grouping support
+still exists for other callers; the shelf simply never triggers it.
+
+Its chrome is the `.ade-chat-launch-shelf` class in `renderer/index.css`. The
+shelf cancels both the parent stack's 12px gap and the composer's 12px wrapper
+margin, overlaps the painted composer by one pixel, and omits its top border.
+The composer's bottom edge is therefore the shared edge while the shelf
+supplies the continuing sides and lower corners; no background-colored seam
+sits between the two surfaces.
+
+**Keep the margin and padding in that CSS rule, not on the element.** They lived
+briefly as Tailwind arbitrary values carrying CSS variables
+(`-mt-[var(--chat-radius-shell)]`, `pt-[calc(var(--chat-radius-shell)+4px)]`) —
+exactly the kind of class that can fail to compile with no error. When the
+negative margin silently vanishes, the shelf detaches from the composer.
+Nothing in the type system or test suite catches that geometry.
+
+The nesting is also load-bearing: Shell and Import both act on whichever lane is
+selected in this shelf, so presenting them *inside* it encodes a dependency the
+earlier stacked layout inverted — lane selection used to sit below two buttons
+that could not work without it.
+
### Header
- Session title from `chatSessionTitle()`; falls back to "New chat".
@@ -335,6 +405,10 @@ so a new-chat composer is centered rather than shifted for invisible chrome.
progressive low-to-high gradient and the active tier keeps the existing
pulse/colour treatment. A tier choice does **not** close the popover — the
user can compare levels until clicking outside or pressing Escape.
+ The collapsed trigger uses the full tier label on normal-width composers
+ (for example, `Medium` rather than `MED`) and removes the nested label
+ outline because the trigger already supplies the interactive boundary.
+ Narrow/mobile layouts retain the abbreviated label to preserve space.
GPT-5.6 displays Light / Medium / High / Extra High / Ultra; ordinary Max
is hidden for that family, and Ultra explains that it can delegate to
multiple agents and use limits faster.
@@ -348,16 +422,78 @@ so a new-chat composer is centered rather than shifted for invisible chrome.
text to the clipboard as a recovery path. The composer pill and top
bar pill both observe the root-store dictation slice, so their timer
and waveform stay in sync.
-- **Fast mode.** A yellow Lightning chip next to the model selector
- toggles the legacy-named `codexFastMode` bit for the selected
- session. It renders whenever the selected descriptor advertises
- `serviceTiers: ["fast"]`, including dynamic Cursor SDK/CLI rows and
- GPT-5.6 and older fast-capable Codex entries. Codex state flows into the next
- `thread/start` / `turn/start` as `serviceTier: "fast"`; Cursor SDK
- state flows through the discovered model-parameter selection, and
+- **Fast mode.** Toggles the legacy-named `codexFastMode` bit for the
+ selected session. Fast mode is a property of a *model*, so the toggle
+ lives on the model row inside the shared `ModelPicker` rather than as a
+ separate composer chip — every surface that mounts the picker gets it,
+ and the composer toolbar keeps one control where it used to spend two.
+ The row chip renders whenever that descriptor advertises
+ `serviceTiers: ["fast"]` (dynamic Cursor SDK/CLI rows, GPT-5.6, and
+ older fast-capable Codex entries) *and* the caller supplied
+ `onFastModeChange`. Fast is one bit per surface but it belongs to the
+ model it was enabled for, so a chip reads as on only on the *selected*
+ row (`fastModeOn={fastMode && isActive}`) — never on every fast-capable
+ row at once. Clicking the selected row's chip is a plain on/off toggle
+ that neither closes the picker nor re-fires selection; clicking a
+ non-selected row's chip means "use this model, fast" — one press
+ commits the model selection and turns fast on. A plain row click onto a
+ different model clears the previous model's fast bit rather than
+ inheriting it. The chip's states are rest (muted outline, outline
+ lightning) → hover (darker fill, still off) → press (`active:scale`,
+ suppressed under `prefers-reduced-motion`) → on (violet fill, filled
+ lightning). The collapsed trigger names the state rather than showing a
+ separate indicator — `composeModelPickerTriggerLabel()` in
+ `ModelPicker.tsx` renders "GPT-5.6 Terra Fast", with a filled lightning
+ glyph rendered before the model name (`aria-hidden`, so the accessible
+ name stays text-only). Codex state flows into
+ the next `thread/start` / `turn/start` as `serviceTier: "fast"`; Cursor
+ SDK state flows through the discovered model-parameter selection, and
Work CLI launches resolve fast Cursor rows to the matching `*-fast`
- alias. The toggle is also exposed per-slot in parallel mode through
- `onParallelSlotCodexFastModeChange`.
+ alias. Parallel mode passes the per-slot setter through the slot's own
+ picker (`onParallelSlotCodexFastModeChange`).
+
+ Surfaces not yet migrated (`ModelSelector`, `ReviewLaunchModelControls`,
+ `CtoSettingsPanel`, `ChatModelSelectionPendingCard`, `ProjectlessComposer`)
+ still pass the deprecated `fastModeActive` / `onFastModeToggle` pair,
+ which keeps rendering the old sibling chip. Migrating them is a prop
+ rename with nothing else to unwind.
+- **Overflow control.** Issue context, orchestrator mode, parallel models,
+ and the iOS Simulator / App Control drawer toggles are folded behind one
+ `⋯` trigger (`ComposerOverflowMenu`). Each entry is gated by exactly the
+ condition that used to gate its standalone button, so a control that
+ would not have rendered does not become a row, and with no entries left
+ the trigger disappears entirely.
+
+ How many entries survive is **contextual**, not fixed — a Work CLI draft
+ hides the lane tool drawers (`hideLaneToolDrawers`) and has no
+ orchestrator, so it can be left with one. A `⋯` that opens onto a single
+ row is a menu pretending to be a button, so at `items.length === 1` the
+ control renders that entry directly as an icon button instead. Callers
+ must therefore not assume either form; tests reach it through a helper
+ that accepts both.
+
+ Because folding hides active state, the collapsed trigger carries an
+ accent dot whenever any entry is on, rows report `aria-checked`, and an
+ entry may carry a `badge` count (issue context uses it for attached
+ issues) which surfaces on the inline button too. Rows that open their
+ own portal — issue context — position against the `triggerRef` rather
+ than against the row, because the row unmounts with the menu while the
+ trigger stays mounted.
+
+ The menu itself **portals to `document.body`** via
+ `composerSplitMenuPosition`, like every other composer popover. The
+ composer shell clips its overflow, so an inline-absolute menu is cut off
+ at the prompt-box edge and simply cannot be read.
+- **Send options.** Background launch is the second row on Send's caret,
+ and Send is a **split control**: one `rounded-full` body, the arrow on
+ the left, a hairline divider, a caret sharing the same fill. This is
+ deliberately the same shape as `ActiveTurnSendButton`, so the composer
+ uses one send idiom whether or not a turn is running. The earlier
+ arrangement — a second filled circle beside Send, also carrying an arrow
+ — read as one control accidentally duplicated and overflowed the
+ composer's padding, clipping against its rounded edge. The split renders
+ only when `onSubmitInBackground` is supplied and the surface is neither
+ parallel nor Cursor-Cloud mode; otherwise Send stays a plain circle.
- **Attachments.** Allows the user to attach files and artifacts to
the next turn.
- **Permission controls.** Inline with the composer:
@@ -521,10 +657,10 @@ power the TUI picker (`apps/ade-cli/src/tuiClient/components/ModelPicker/`).
| Module | Role |
|---|---|
-| `ModelPicker.tsx` | Trigger + popover entry point. Owns runtime-catalog loading via `runtimeCatalogCache`, fast-mode chip, and the favorites/recents fan-out. |
+| `ModelPicker.tsx` | Trigger + popover entry point. Owns runtime-catalog loading via `runtimeCatalogCache`, fast mode, and the favorites/recents fan-out. Pass `fastMode` + `onFastModeChange` and the picker owns the affordance: a per-row Fast chip inside the popover plus a ` Fast` trigger suffix composed by the pure `composeModelPickerTriggerLabel` helper. Surfaces that pass neither render no fast affordance at all; the deprecated `fastModeActive` / `onFastModeToggle` / `fastModeSupported` props still render the old sibling chip for call sites that have not migrated. |
| `ModelPickerContent.tsx` | The popover body: search bar, rail, virtualized list (`@tanstack/react-virtual`), empty state. Props include `hidePermissionRail` (forward-compat hook for orchestrated surfaces that suppress permission-related affordances), `allowCliOnlyModels` (switch Cursor filtering from SDK chat models to CLI launch models), `allowRegistryExpansion` (when false, skip merging `MODEL_REGISTRY` entries into the runtime catalog), and `registryFilter` (restrict registry expansion by descriptor, used by fork handoffs to keep the provider fixed without freezing the picker to a stale concrete-id list). When the authenticated-only filter is active, authenticated CLI-backed providers (Claude, Codex, Droid) may expand from the static registry even if the last discovered model-id list is incomplete. Estimated row height `MODEL_ROW_ESTIMATED_HEIGHT = 44`. |
| `ModelPickerRail.tsx` | Left-rail tabs (Favorites / Recents / per-provider groups). Reads `AuthStatus` per family to render auth gates and the OpenCode "Install OpenCode" CTA from `providerEmptyState`. |
-| `ModelListRow.tsx` | A single model row (favorite star, brand logo, display name, sub-provider chip, availability tone). |
+| `ModelListRow.tsx` | A single model row (favorite star, brand logo, display name, sub-provider chip, availability tone). Also renders the muted Fast chip when the surface supplied `onFastModeChange` and `modelSupportsFastMode()` holds for that row's descriptor; toggling it changes neither the selection nor the popover's open state. |
| `ReasoningEffortPicker.tsx` | Standalone reasoning-effort dropdown, mounted next to the model trigger and inside per-slot parallel-launch controls. |
| `modelCatalog.ts` | `descriptorsFromAgentChatModelCatalog`, `mergeSelectorModels`, `resolveModelDescriptorWithRuntimeCatalog`, `createUnknownModelPlaceholder` — pure helpers that flatten the IPC catalog into a `ModelDescriptor[]` and reconcile it with the static registry while preserving runtime metadata such as `serviceTiers` and Cursor `cursorAvailability`. |
| `modelOrdering.ts` | `sortModelItems` — provider/group ordering and intra-group ranking (favorites first, then recents, then default registry order). |