<script lang="ts">
import { onMount } from "svelte";
import { overview as overviewStore } from "../../stores/overview.svelte.js";
import { workbench } from "../../stores/workbench.svelte.js";
import { settings as settingsStore } from "../../stores/settings.svelte.js";
import { sync } from "../../stores/sync.svelte.js";
import AppIcon from "../layout/AppIcon.svelte";
import { placeLabel } from "../../utils/places.js";
import LoadingSpinner from "../layout/LoadingSpinner.svelte";
import { scoped } from "../../stores/worktree-scope.svelte.js";
const overview = scoped(overviewStore);
const settings = scoped(settingsStore);
const pageTitle = $derived(
settings.repo?.settings.name.trim() || "Overview",
);
const worktreeVersion = $derived(
sync.serverVersion?.worktree_version ?? null,
);
/** Page is ready once we have the project name and version (or they failed). */
const ready = $derived(!settings.loading && sync.serverVersion !== null);
interface StatCard {
label: string;
/** Null when there is nothing to count: sessions outside `$PRJ`. */
value: () => number | null;
}
const statCards: StatCard[] = [
{ label: "Sessions", value: () => overview.sessionCount },
{ label: "Messages", value: () => overview.messageCount },
{ label: "Fleet Repos", value: () => overview.repoCount },
{ label: "Open Issues", value: () => overview.openIssueCount },
];
// Read live: the counts are computed when asked, so there is no cached
// answer to show first and nothing older to refresh.
onMount(() => {
void overview.fetchAll();
});
</script>
{#if !ready}
<!-- Skeleton wireframe while settings + version load -->
<div class="overview">
<div class="overview-header">
<div class="overview-heading">
<div class="skel skel-title"></div>
<div class="skel skel-subtitle"></div>
</div>
<div class="overview-actions">
<div class="skel skel-btn"></div>
<div class="skel skel-btn-icon"></div>
<div class="skel skel-btn"></div>
<div class="skel skel-btn"></div>
</div>
</div>
<section class="worktree-summary">
{#each { length: 4 } as _}
<div class="summary-card">
<div class="skel skel-label"></div>
<div class="skel skel-value"></div>
</div>
{/each}
</section>
<section class="overview-grid">
<div class="overview-panel">
<div class="skel skel-panel-title"></div>
<div class="skel skel-line"></div>
<div class="skel skel-line skel-line--short"></div>
<div class="skel skel-line"></div>
<div class="skel skel-line skel-line--short"></div>
</div>
<div class="overview-panel">
<div class="skel skel-panel-title"></div>
<div class="skel skel-line"></div>
<div class="skel skel-line skel-line--short"></div>
<div class="skel skel-line"></div>
<div class="skel skel-line skel-line--short"></div>
</div>
</section>
</div>
{:else}
<div class="overview">
<div class="overview-header">
<div class="overview-heading">
<h1 class="overview-title">
{pageTitle}
{#if worktreeVersion}
<span class="overview-version">{worktreeVersion}</span>
{/if}
</h1>
<p class="overview-subtitle">
{settings.root}
</p>
</div>
<!--
The date range, the analytics refresh and the CSV export went with the
charts to Session statistics: they steer analytics, and there are none
here now. What is left refreshes what IS here.
-->
<div class="overview-actions">
<button
class="text-btn"
onclick={() => void overview.fetchAll()}
disabled={overview.loading || overview.statsLoading}
>
<AppIcon name="refresh" size={12} />
Refresh
</button>
</div>
</div>
{#if overview.error}
<div class="overview-error">{overview.error}</div>
{/if}
<section class="worktree-summary">
{#each statCards as card}
<div class="summary-card">
<div class="summary-label">{card.label}</div>
{#if !overview.statsLoaded}
<LoadingSpinner label="Loading" compact={true} />
{:else}
{@const value = card.value()}
{#if value === null}
<div class="summary-value" title="No session is placed in a worktree outside $PRJ">—</div>
{:else}
<div class="summary-value">{value.toLocaleString()}</div>
{/if}
{/if}
</div>
{/each}
</section>
<section class="overview-grid">
<div class="overview-panel" id="overview-fleet">
<h2 class="panel-title">Fleet Status</h2>
{#if !overview.fleetLoaded}
<LoadingSpinner label="Loading fleet status" />
{:else if overview.fleetError}
<div class="panel-error">{overview.fleetError}</div>
{:else if overview.fleetStatus && overview.fleetStatus.length === 0}
<div class="panel-empty">No fleet repos found</div>
{:else}
<div class="fleet-list">
{#each overview.fleetStatus ?? [] as repo}
<!-- Indented by nesting depth: a submodule of a submodule reads
as one, rather than as a sibling of the superproject. -->
<div class="fleet-item" style:--fleet-depth={repo.depth} title={repo.path}>
<span class="fleet-name">{repo.name}</span>
<span class="fleet-branch">{repo.is_detached ? "detached" : (repo.branch ?? "—")}</span>
<span class="fleet-status" class:clean={repo.is_clean} class:dirty={!repo.is_clean}>
{repo.is_clean ? "clean" : "dirty"}
</span>
{#if repo.ahead > 0}
<span class="fleet-ahead">+{repo.ahead}</span>
{/if}
{#if repo.behind > 0}
<span class="fleet-behind">-{repo.behind}</span>
{/if}
</div>
{/each}
</div>
{/if}
</div>
<div class="overview-panel" id="overview-recent">
<h2 class="panel-title">
Recent Sessions
<button class="panel-link" onclick={() => workbench.showView("worktree", "sessions")}>View all</button>
</h2>
{#if !overview.recentLoaded}
<LoadingSpinner label="Loading recent sessions" />
{:else if overview.recentSessions && overview.recentSessions.length === 0}
<div class="panel-empty">No sessions yet</div>
{:else}
<div class="recent-list">
{#each overview.recentSessions ?? [] as session}
<button
class="recent-item"
onclick={() => workbench.openSession(session, false)}
>
<div class="recent-project">{placeLabel(session)}</div>
<div class="recent-preview">{session.first_message ?? "No message"}</div>
<div class="recent-meta">
<span>{session.message_count} messages</span>
<span>{session.agent}</span>
</div>
</button>
{/each}
</div>
{/if}
</div>
</section>
<!--
The analytics moved to Session statistics, reachable from the Sessions
panel. Welcome answers "what is the state of things" at a glance; four
charts, a heatmap and a filter bar made the first thing anyone saw a
study instead. Nothing was dropped — it is one click away, and now only
fetched when someone asks for it.
-->
</div>
{/if}
<style>
.overview {
max-width: 1200px;
margin: 0 auto;
padding: var(--wb-spacing-24) var(--wb-spacing-20);
}
.overview-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--wb-spacing-16);
margin-bottom: var(--wb-spacing-18);
}
.overview-heading {
min-width: 0;
}
.overview-title {
font-size: var(--wb-font-size-18);
font-weight: 600;
color: var(--vscode-editor-foreground);
margin: 0;
display: flex;
align-items: baseline;
gap: var(--wb-spacing-8);
}
.overview-version {
font-size: var(--wb-font-size-13);
font-weight: 400;
color: var(--vscode-disabledForeground);
}
.overview-subtitle {
margin: var(--wb-spacing-4) 0 0;
font-size: var(--wb-font-size-12);
color: var(--vscode-disabledForeground);
min-height: var(--wb-control-size-18);
}
.overview-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--wb-spacing-12);
flex-wrap: wrap;
}
.text-btn,
.text-btn {
height: var(--wb-control-size-28);
padding: 0 var(--wb-spacing-10);
font-size: var(--wb-font-size-11);
font-weight: 500;
}
.text-btn:hover,
.overview-error {
padding: var(--wb-spacing-10) var(--wb-spacing-14);
margin-bottom: var(--wb-spacing-16);
background: color-mix(in srgb, var(--vscode-errorForeground) 8%, transparent);
border: 1px solid color-mix(in srgb, var(--vscode-errorForeground) 20%, transparent);
border-radius: var(--wsb-radius-md);
color: var(--vscode-errorForeground);
font-size: var(--wb-font-size-12);
}
.worktree-summary {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--wb-spacing-12);
margin-bottom: var(--wb-spacing-16);
}
.summary-card {
min-height: var(--wb-control-size-84);
padding: var(--wb-spacing-14) var(--wb-spacing-16);
background: var(--vscode-sideBar-background);
border: 1px solid var(--vscode-panel-border);
border-radius: var(--wsb-radius-md);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.summary-label {
margin-bottom: var(--wb-spacing-8);
font-size: var(--wb-font-size-11);
color: var(--vscode-disabledForeground);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.summary-value {
font-size: var(--wb-font-size-28);
line-height: 1;
font-weight: 700;
color: var(--vscode-editor-foreground);
font-variant-numeric: tabular-nums;
}
.overview-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--wb-spacing-12);
margin-bottom: var(--wb-spacing-18);
}
.overview-panel {
background: var(--vscode-sideBar-background);
border: 1px solid var(--vscode-panel-border);
border-radius: var(--wsb-radius-md);
padding: var(--wb-spacing-14) var(--wb-spacing-16);
min-height: 160px;
}
.panel-title {
font-size: var(--wb-font-size-12);
font-weight: 600;
color: var(--vscode-foreground);
margin: 0 0 var(--wb-spacing-12);
display: flex;
align-items: center;
justify-content: space-between;
}
.panel-link {
font-size: var(--wb-font-size-11);
font-weight: 500;
color: var(--vscode-focusBorder);
cursor: pointer;
}
.panel-link:hover {
text-decoration: underline;
}
.panel-error {
padding: var(--wb-spacing-10) var(--wb-spacing-12);
background: color-mix(in srgb, var(--vscode-errorForeground) 8%, transparent);
border: 1px solid color-mix(in srgb, var(--vscode-errorForeground) 20%, transparent);
border-radius: var(--wsb-radius-sm);
color: var(--vscode-errorForeground);
font-size: var(--wb-font-size-12);
}
.panel-empty {
font-size: var(--wb-font-size-12);
color: var(--vscode-disabledForeground);
padding: var(--wb-spacing-8) 0;
}
.fleet-list {
display: flex;
flex-direction: column;
gap: var(--wb-spacing-4);
max-height: 280px;
overflow-y: auto;
padding-right: var(--wb-spacing-4);
}
.fleet-item {
display: flex;
align-items: center;
gap: var(--wb-spacing-8);
padding: var(--wb-spacing-4) var(--wb-spacing-8);
border-radius: var(--wsb-radius-sm);
font-size: var(--wb-font-size-12);
padding-left: calc(
var(--fleet-depth) * var(--wb-fleet-indent-step) +
var(--wb-spacing-8)
);
}
.fleet-item:hover {
background: var(--vscode-list-hoverBackground);
}
.fleet-name {
font-weight: 500;
color: var(--vscode-editor-foreground);
min-width: var(--wb-control-size-120);
}
.fleet-branch {
font-family: var(--wsb-font-mono);
font-size: var(--wb-font-size-11);
color: var(--vscode-disabledForeground);
flex: 1;
}
.fleet-status {
font-size: var(--wb-font-size-10);
font-weight: 600;
padding: var(--wb-spacing-1) var(--wb-spacing-6);
border-radius: var(--wb-corner-radius-10);
text-transform: uppercase;
letter-spacing: 0.02em;
}
.fleet-status.clean {
color: var(--vscode-testing-iconPassed);
background: color-mix(in srgb, var(--vscode-testing-iconPassed) 10%, transparent);
}
.fleet-status.dirty {
color: var(--vscode-editorWarning-foreground);
background: color-mix(in srgb, var(--vscode-editorWarning-foreground) 10%, transparent);
}
.fleet-ahead {
font-size: var(--wb-font-size-11);
color: var(--vscode-testing-iconPassed);
font-variant-numeric: tabular-nums;
}
.fleet-behind {
font-size: var(--wb-font-size-11);
color: var(--vscode-errorForeground);
font-variant-numeric: tabular-nums;
}
.recent-list {
display: flex;
flex-direction: column;
gap: var(--wb-spacing-2);
max-height: 280px;
overflow-y: auto;
padding-right: var(--wb-spacing-4);
}
.recent-item {
display: block;
width: 100%;
padding: var(--wb-spacing-8);
border-radius: var(--wsb-radius-sm);
text-align: left;
cursor: pointer;
}
.recent-item:hover {
background: var(--vscode-list-hoverBackground);
}
.recent-project {
font-size: var(--wb-font-size-12);
font-weight: 600;
color: var(--vscode-editor-foreground);
margin-bottom: var(--wb-spacing-2);
}
.recent-preview {
font-size: var(--wb-font-size-11);
color: var(--vscode-foreground);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.recent-meta {
display: flex;
gap: var(--wb-spacing-12);
margin-top: var(--wb-spacing-4);
font-size: var(--wb-font-size-10);
color: var(--vscode-disabledForeground);
}
/* ── Skeleton wireframes ── */
/* .skel base class is part of the global SCSS design system. */
.skel-title {
width: 180px;
height: var(--wb-control-size-20);
}
.skel-subtitle {
width: 260px;
height: var(--wb-control-size-14);
margin-top: var(--wb-spacing-6);
}
.skel-btn {
width: var(--wb-control-size-72);
height: var(--wb-control-size-28);
border-radius: var(--wsb-radius-sm);
}
.skel-btn-icon {
width: var(--wb-control-size-28);
height: var(--wb-control-size-28);
border-radius: var(--wsb-radius-sm);
}
.skel-label {
width: var(--wb-control-size-64);
height: var(--wb-control-size-12);
margin-bottom: var(--wb-spacing-12);
}
.skel-value {
width: var(--wb-control-size-48);
height: var(--wb-control-size-28);
}
.skel-panel-title {
width: var(--wb-control-size-120);
height: var(--wb-control-size-14);
margin-bottom: var(--wb-spacing-14);
}
.skel-line {
width: 100%;
height: var(--wb-control-size-12);
margin-bottom: var(--wb-spacing-8);
}
.skel-line--short {
width: 65%;
}
@media (max-width: 767px) {
.overview-header {
flex-direction: column;
}
.overview-actions {
width: 100%;
justify-content: flex-start;
}
.worktree-summary {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.overview-grid {
grid-template-columns: 1fr;
}
}
</style>