feat(ext/vault): wire vault-status into sidebar footer (Plan C Phase 6)
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 <noreply@anthropic.com>
This commit is contained in:
@@ -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
|
||||
|
||||
62
extension/src/vault/__tests__/vault-sidebar-status.test.ts
Normal file
62
extension/src/vault/__tests__/vault-sidebar-status.test.ts
Normal file
@@ -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<typeof vi.fn>).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();
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -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 {
|
||||
<button class="vault-sidebar__nav-item" data-nav="lock" title="Lock">${GLYPH_LOCK} <span class="vault-sidebar__nav-label">lock</span></button>
|
||||
</div>
|
||||
<div class="vault-sidebar__footer">
|
||||
<!-- Phase 6 (Dev-C Task 6.3) wires the sync-status indicator into this slot. -->
|
||||
<div id="vault-status-slot"></div>
|
||||
<button class="vault-status-refresh" id="status-refresh-btn" type="button" title="Refresh status" aria-label="Refresh status">${GLYPH_REFRESH}</button>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
@@ -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<void> => {
|
||||
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 {
|
||||
|
||||
@@ -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); }
|
||||
|
||||
Reference in New Issue
Block a user