From c662db2875f48b47b7b0bc6d2cb815c02288dee0 Mon Sep 17 00:00:00 2001 From: adlee-was-taken Date: Sun, 31 May 2026 21:33:21 -0400 Subject: [PATCH] feat(ext/vault): wire vault-status into sidebar footer (Plan C Phase 6) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Renders the status indicator into #vault-status-slot on sidebar mount and on a manual ↻ button. No timer polling — get_vault_status returns cached state and sync is user-initiated. Closes the relicario status CLI/extension parity gap. Co-Authored-By: Claude Opus 4.8 --- extension/src/shared/glyphs.ts | 1 + .../__tests__/vault-sidebar-status.test.ts | 62 +++++++++++++++++++ extension/src/vault/vault-sidebar.ts | 22 ++++++- extension/src/vault/vault.css | 28 ++++++++- 4 files changed, 108 insertions(+), 5 deletions(-) create mode 100644 extension/src/vault/__tests__/vault-sidebar-status.test.ts diff --git a/extension/src/shared/glyphs.ts b/extension/src/shared/glyphs.ts index 4766e4c..2b45f2e 100644 --- a/extension/src/shared/glyphs.ts +++ b/extension/src/shared/glyphs.ts @@ -19,6 +19,7 @@ export const GLYPH_LOCK = '⏻'; // sidebar lock nav export const GLYPH_NEXT = '▸'; // forward / next button (matches ▾/▸ disclosure family) export const GLYPH_COPY = '⎘'; // copy to clipboard export const GLYPH_SYNC = '⇅'; // sync / upload +export const GLYPH_REFRESH = '↻'; // manual refresh (vault status indicator); shares ↻ with GENERATE, distinct semantic export const GLYPH_SYNCED = '✓'; // vault status: in sync (no pending/ahead/behind) export const GLYPH_AHEAD = '↑'; // vault status: local commits ahead of remote export const GLYPH_BEHIND = '↓'; // vault status: remote commits not yet pulled diff --git a/extension/src/vault/__tests__/vault-sidebar-status.test.ts b/extension/src/vault/__tests__/vault-sidebar-status.test.ts new file mode 100644 index 0000000..bdc45f5 --- /dev/null +++ b/extension/src/vault/__tests__/vault-sidebar-status.test.ts @@ -0,0 +1,62 @@ +import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'; +import { renderSidebarShell, wireSidebar } from '../vault-sidebar'; +import type { VaultController } from '../vault-context'; + +const STATUS = { ahead: 0, behind: 0, lastSyncAt: 1700000000, pendingItems: 4 }; + +function makeCtx() { + return { + state: { searchQuery: '' }, + sendMessage: vi.fn(async (req: { type: string }) => + req.type === 'get_vault_status' + ? { ok: true, data: STATUS } + : { ok: true }), + render: vi.fn(), + renderPane: vi.fn(), + renderListPane: vi.fn(), + closeDrawer: vi.fn(), + openTypePanel: vi.fn(), + setHash: vi.fn(), + applyShellViewClass: vi.fn(), + } as unknown as VaultController; +} + +function statusCalls(ctx: VaultController): number { + return (ctx.sendMessage as ReturnType).mock.calls + .filter((c) => (c[0] as { type: string }).type === 'get_vault_status').length; +} + +describe('vault-sidebar status wiring', () => { + beforeEach(() => { document.body.innerHTML = renderSidebarShell(); }); + afterEach(() => { document.body.innerHTML = ''; }); + + it('fetches + renders the indicator on mount', async () => { + const ctx = makeCtx(); + wireSidebar(ctx); + await vi.waitFor(() => { + expect(document.getElementById('vault-status-slot')?.textContent).toMatch(/4 pending/i); + }); + expect(statusCalls(ctx)).toBe(1); + }); + + it('re-fetches on the manual refresh button', async () => { + const ctx = makeCtx(); + wireSidebar(ctx); + await vi.waitFor(() => expect(statusCalls(ctx)).toBe(1)); + document.getElementById('status-refresh-btn')?.dispatchEvent(new Event('click')); + await vi.waitFor(() => expect(statusCalls(ctx)).toBe(2)); + }); + + it('does NOT poll on a timer', async () => { + vi.useFakeTimers(); + try { + const ctx = makeCtx(); + wireSidebar(ctx); + await vi.advanceTimersByTimeAsync(60_000); + // Only the single mount fetch — no interval re-fetches. + expect(statusCalls(ctx)).toBe(1); + } finally { + vi.useRealTimers(); + } + }); +}); diff --git a/extension/src/vault/vault-sidebar.ts b/extension/src/vault/vault-sidebar.ts index b7db7b7..3004467 100644 --- a/extension/src/vault/vault-sidebar.ts +++ b/extension/src/vault/vault-sidebar.ts @@ -2,12 +2,14 @@ // nav-button wiring, and the (now debounced) search input. Each function // receives the VaultController (`ctx`) and reaches sibling concerns through it; // pure helpers come from vault-context. Imports only from shared/ and -// vault-context — never from vault-shell or vault.ts. +// vault-context, plus the leaf renderer vault-status — never from vault-shell +// or vault.ts. import type { ItemType } from '../shared/types'; import { - GLYPH_TRASH, GLYPH_DEVICES, GLYPH_SETTINGS, GLYPH_HISTORY, GLYPH_LOCK, + GLYPH_TRASH, GLYPH_DEVICES, GLYPH_SETTINGS, GLYPH_HISTORY, GLYPH_LOCK, GLYPH_REFRESH, } from '../shared/glyphs'; +import { renderStatusIndicator, type VaultStatus } from './vault-status'; import { type VaultController, typeIcon, typeLabel, getFilteredEntries, } from './vault-context'; @@ -38,8 +40,8 @@ export function renderSidebarShell(): string {
-
+
`; } @@ -109,6 +111,20 @@ export function wireSidebar(ctx: VaultController): void { ctx.renderListPane(); } }); + + // Vault status indicator — refresh on mount + on the manual button only. + // No timer polling: get_vault_status returns cached state and sync is + // user-initiated (spec 2026-05-04, Phase 6). + const refreshStatus = async (): Promise => { + const resp = await ctx.sendMessage({ type: 'get_vault_status' }); + if (!resp.ok) return; + const slot = document.getElementById('vault-status-slot'); + if (slot) renderStatusIndicator(slot, resp.data as VaultStatus); + }; + void refreshStatus(); + document.getElementById('status-refresh-btn')?.addEventListener('click', () => { + void refreshStatus(); + }); } function isEditableTarget(target: EventTarget | null): boolean { diff --git a/extension/src/vault/vault.css b/extension/src/vault/vault.css index 81bf140..ac3f975 100644 --- a/extension/src/vault/vault.css +++ b/extension/src/vault/vault.css @@ -2114,8 +2114,18 @@ textarea { .history-index-row__title { color: var(--text); } .history-index-row__meta { font-size: 11px; } -/* Sidebar-footer vault status indicator (Plan C Phase 6, vault-status.ts). - The footer slot + refresh button are wired by vault-sidebar.ts in Task 6.3. */ +/* Sidebar-footer vault status indicator (Plan C Phase 6, vault-status.ts + + vault-sidebar.ts). Indicator renders into #vault-status-slot; the ↻ button + triggers a manual refresh (no timer polling). */ +.vault-sidebar__footer { + display: flex; + align-items: center; + justify-content: space-between; + gap: 8px; + padding: 8px 12px; + border-top: 1px solid var(--border-subtle); +} +#vault-status-slot { flex: 1; min-width: 0; } .vault-status { display: flex; flex-direction: column; @@ -2125,3 +2135,17 @@ textarea { } .vault-status__state { color: var(--text-dim); } .vault-status__ts { color: var(--text-muted); } +.vault-status-refresh { + flex: none; + background: none; + border: none; + color: var(--text-dim); + cursor: pointer; + font-family: inherit; + font-size: 13px; + line-height: 1; + padding: 2px 6px; + border-radius: 4px; +} +.vault-status-refresh:hover { color: var(--text); background: var(--bg-input); } +.vault-status-refresh:focus-visible { outline: none; box-shadow: var(--focus-ring); }