feat: add repository objective pages

This commit is contained in:
2026-06-22 02:21:51 +09:00
parent 0f7e78c164
commit ceb1ee3b56
8 changed files with 1227 additions and 141 deletions
@@ -56,10 +56,18 @@
<p class="section-state">No objectives found.</p>
{:else}
<ul class="nav-list" aria-label="Objectives">
<li>
<a class="nav-item active" href="#/objectives">
<span class="item-title">All objectives</span>
<span class="item-meta">read-only list</span>
</a>
</li>
{#each objectives as objective (objective.id)}
<li class="nav-item">
<span class="item-title">{objective.title}</span>
<span class="item-meta">{objective.state}</span>
<li>
<a class="nav-item" href={`#/objectives/${objective.id}`}>
<span class="item-title">{objective.title}</span>
<span class="item-meta">{objective.state}</span>
</a>
</li>
{/each}
</ul>
@@ -117,6 +125,8 @@
background: rgba(15, 23, 42, 0.64);
padding: 10px 12px;
min-width: 0;
color: inherit;
text-decoration: none;
}
.item-title,
@@ -15,15 +15,16 @@
</div>
<ul class="nav-list" aria-label="Repositories">
<li class="nav-item active">
<span class="item-title">{workspace?.display_name ?? 'local workspace'}</span>
<span class="item-meta">local project records</span>
<li>
<a class="nav-item active" href="#/repositories/local">
<span class="item-title">{workspace?.display_name ?? 'local workspace'}</span>
<span class="item-meta">local repository · read-only</span>
</a>
</li>
</ul>
<p class="section-note">
Repository API is not wired yet; this placeholder keeps the navigation seam
ready without adding repository authority.
Repository authority remains the current workspace root and canonical project records.
</p>
</section>
@@ -74,6 +75,8 @@
background: rgba(15, 23, 42, 0.64);
padding: 10px 12px;
min-width: 0;
color: inherit;
text-decoration: none;
}
.nav-item.active {
@@ -59,11 +59,87 @@ export type ListResponse<T> = {
diagnostics: Diagnostic[];
};
export type RepositorySummary = {
id: string;
display_name: string;
kind: string;
workspace_root: string;
record_authority: string;
git: GitRepositorySummary;
};
export type GitRepositorySummary = {
status: string;
root?: string | null;
branch?: string | null;
head?: string | null;
dirty?: boolean | null;
dirty_scope: string;
remote?: GitRemoteSummary | null;
diagnostics: Diagnostic[];
};
export type GitRemoteSummary = {
name: string;
url: string;
redacted: boolean;
};
export type GitCommitSummary = {
hash: string;
subject: string;
author_name: string;
author_email: string;
timestamp: string;
};
export type RepositoryDetailResponse = {
workspace_id: string;
item: RepositorySummary;
source: string;
};
export type RepositoryLogResponse = {
workspace_id: string;
repository_id: string;
limit: number;
items: GitCommitSummary[];
diagnostics: Diagnostic[];
};
export type TicketSummary = {
id: string;
title: string;
state: string;
priority?: string | null;
updated_at?: string | null;
queued_by?: string | null;
queued_at?: string | null;
record_source?: string;
};
export type TicketKanbanColumn = {
state: string;
items: TicketSummary[];
};
export type RepositoryTicketsResponse = {
workspace_id: string;
repository_id: string;
limit: number;
columns: TicketKanbanColumn[];
invalid_records: InvalidProjectRecord[];
record_authority: string;
source: string;
diagnostics: Diagnostic[];
};
export type ObjectiveSummary = {
id: string;
title: string;
state: string;
updated_at?: string | null;
summary: string;
linked_tickets?: string[];
record_source?: string;
};
+522 -127
View File
@@ -1,11 +1,32 @@
<script lang="ts">
import { onMount } from 'svelte';
import WorkspaceSidebar from '$lib/workspace-sidebar/WorkspaceSidebar.svelte';
import type { Diagnostic, Host, ListResponse, Worker, WorkspaceResponse } from '$lib/workspace-sidebar/types';
import type {
Diagnostic,
Host,
ListResponse,
ObjectiveListResponse,
ObjectiveSummary,
RepositoryDetailResponse,
RepositoryLogResponse,
RepositorySummary,
RepositoryTicketsResponse,
Worker,
WorkspaceResponse
} from '$lib/workspace-sidebar/types';
type RouteState =
| { page: 'overview'; objectiveId?: undefined }
| { page: 'repository'; objectiveId?: undefined }
| { page: 'objectives'; objectiveId?: string };
const endpoints = [
{ label: 'Workspace', path: '/api/workspace' },
{ label: 'Tickets', path: '/api/tickets' },
{ label: 'Objectives', path: '/api/objectives' },
{ label: 'Repositories', path: '/api/repositories' },
{ label: 'Repository log', path: '/api/repositories/local/log' },
{ label: 'Repository tickets', path: '/api/repositories/local/tickets' },
{ label: 'Runs', path: '/api/runs' },
{ label: 'Hosts', path: '/api/hosts' },
{ label: 'Workers', path: '/api/workers' }
@@ -14,9 +35,20 @@
let workspace = $state<WorkspaceResponse | null>(null);
let hosts = $state<ListResponse<Host> | null>(null);
let workers = $state<ListResponse<Worker> | null>(null);
let repository = $state<RepositorySummary | null>(null);
let repositoryLog = $state<RepositoryLogResponse | null>(null);
let repositoryTickets = $state<RepositoryTicketsResponse | null>(null);
let objectives = $state<ObjectiveListResponse | null>(null);
let workspaceError = $state<string | null>(null);
let hostsError = $state<string | null>(null);
let workersError = $state<string | null>(null);
let repositoryError = $state<string | null>(null);
let repositoryLogError = $state<string | null>(null);
let repositoryTicketsError = $state<string | null>(null);
let objectivesError = $state<string | null>(null);
let currentPath = $state('/');
let route = $derived(routeFromPath(currentPath));
async function getJson<T>(path: string): Promise<T> {
const response = await fetch(path);
@@ -56,14 +88,89 @@
}
}
async function loadRepository() {
repositoryError = null;
try {
const detail = await getJson<RepositoryDetailResponse>('/api/repositories/local');
repository = detail.item;
} catch (error) {
repositoryError = error instanceof Error ? error.message : String(error);
repository = null;
}
}
async function loadRepositoryLog() {
repositoryLogError = null;
try {
repositoryLog = await getJson<RepositoryLogResponse>('/api/repositories/local/log?limit=10');
} catch (error) {
repositoryLogError = error instanceof Error ? error.message : String(error);
repositoryLog = null;
}
}
async function loadRepositoryTickets() {
repositoryTicketsError = null;
try {
repositoryTickets = await getJson<RepositoryTicketsResponse>('/api/repositories/local/tickets');
} catch (error) {
repositoryTicketsError = error instanceof Error ? error.message : String(error);
repositoryTickets = null;
}
}
async function loadObjectives() {
objectivesError = null;
try {
objectives = await getJson<ObjectiveListResponse>('/api/objectives');
} catch (error) {
objectivesError = error instanceof Error ? error.message : String(error);
objectives = null;
}
}
function diagnosticsFor(...groups: Array<Diagnostic[] | undefined>): Diagnostic[] {
return groups.flatMap((group) => group ?? []);
}
function routeFromPath(path: string): RouteState {
if (path.startsWith('/repositories')) {
return { page: 'repository' };
}
if (path.startsWith('/objectives')) {
const [, , objectiveId] = path.split('/');
return { page: 'objectives', objectiveId: objectiveId || undefined };
}
return { page: 'overview' };
}
function updateRouteFromHash() {
const hashPath = window.location.hash.replace(/^#/, '') || '/';
currentPath = hashPath.startsWith('/') ? hashPath : `/${hashPath}`;
}
function formatDate(value: string | null | undefined): string {
return value ?? 'not recorded';
}
function shortHash(hash: string | null | undefined): string {
return hash ? hash.slice(0, 12) : 'unknown';
}
$effect(() => {
void loadWorkspace();
void loadHosts();
void loadWorkers();
void loadRepository();
void loadRepositoryLog();
void loadRepositoryTickets();
void loadObjectives();
});
onMount(() => {
updateRouteFromHash();
window.addEventListener('hashchange', updateRouteFromHash);
return () => window.removeEventListener('hashchange', updateRouteFromHash);
});
</script>
@@ -83,156 +190,170 @@
<p class="eyebrow">Local / single-workspace bootstrap</p>
<h1>Yoi Workspace Control Plane</h1>
<p>
Static SPA shell for reading canonical <code>.yoi</code> project records
and the local Host / Worker execution view through bounded backend APIs.
Ticket and Objective lifecycle authority stays in the existing local record
workflow.
Static SPA shell for reading canonical <code>.yoi</code> project records,
bounded local Repository summaries, and the local Host / Worker execution
view. Ticket and Objective lifecycle authority stays in the existing local
record workflow.
</p>
<p class="page-links" aria-label="Workspace page links">
<a href="#/">Overview</a>
<a href="#/repositories/local">Repository</a>
<a href="#/objectives">Objectives</a>
</p>
</section>
<section class="card">
<h2>Workspace</h2>
{#if workspace}
<dl>
<div>
<dt>ID</dt>
<dd>{workspace.workspace_id}</dd>
</div>
<div>
<dt>Name</dt>
<dd>{workspace.display_name}</dd>
</div>
<div>
<dt>Record authority</dt>
<dd>{workspace.record_authority}</dd>
</div>
<div>
<dt>Host / Worker bridge</dt>
<dd>{workspace.extension_points.host_worker_bridge.status}</dd>
</div>
</dl>
{:else if workspaceError}
<p class="error">{workspaceError}</p>
{:else}
<p>Waiting for <code>/api/workspace</code></p>
{/if}
</section>
<section class="grid">
<div class="card">
<h2>Read API surface</h2>
<ul>
{#each endpoints as endpoint}
<li><code>{endpoint.path}</code>{endpoint.label}</li>
{/each}
</ul>
</div>
<div class="card">
<h2>Reserved seams</h2>
<p>
Event streams remain represented as extension-point state in the backend
response. Hosts and Workers are read-only local observations; no
scheduler, lifecycle control, or hosted multi-tenant behavior is
implemented in this slice.
</p>
</div>
</section>
<section class="grid runtime">
<div class="card">
<h2>Hosts</h2>
{#if hosts}
{#if hosts.items.length === 0}
<p>No local Hosts are visible.</p>
{#if route.page === 'repository'}
<section class="grid runtime">
<div class="card">
<h2>Repository summary</h2>
{#if repository}
<dl>
<div>
<dt>ID</dt>
<dd><code>{repository.id}</code></dd>
</div>
<div>
<dt>Kind</dt>
<dd>{repository.kind}</dd>
</div>
<div>
<dt>Workspace root</dt>
<dd><code>{repository.workspace_root}</code></dd>
</div>
<div>
<dt>Record authority</dt>
<dd>{repository.record_authority}</dd>
</div>
<div>
<dt>Git</dt>
<dd>{repository.git.status}</dd>
</div>
</dl>
{:else if repositoryError}
<p class="error">{repositoryError}</p>
{:else}
<div class="stack">
{#each hosts.items as host}
<article class="runtime-card">
<div class="runtime-heading">
<strong>{host.label}</strong>
<span class:warn={host.status !== 'available'}>{host.status}</span>
</div>
<dl>
<div>
<dt>ID</dt>
<dd><code>{host.host_id}</code></dd>
</div>
<div>
<dt>Kind</dt>
<dd>{host.kind}</dd>
</div>
<div>
<dt>Local inspection</dt>
<dd>{host.capabilities.local_pod_inspection}</dd>
</div>
<div>
<dt>Platform</dt>
<dd>{host.capabilities.os} / {host.capabilities.arch}</dd>
</div>
</dl>
</article>
{/each}
</div>
<p>Waiting for <code>/api/repositories/local</code></p>
{/if}
{:else if hostsError}
<p class="error">{hostsError}</p>
{:else}
<p>Waiting for <code>/api/hosts</code></p>
{/if}
</div>
</div>
<div class="card">
<h2>Workers</h2>
{#if workers}
{#if workers.items.length === 0}
<p>No local Workers are visible.</p>
<div class="card">
<h2>Git summary</h2>
{#if repository}
{#if repository.git.status === 'available'}
<dl>
<div>
<dt>Root</dt>
<dd><code>{repository.git.root ?? 'unknown'}</code></dd>
</div>
<div>
<dt>Branch</dt>
<dd>{repository.git.branch ?? 'unknown'}</dd>
</div>
<div>
<dt>HEAD</dt>
<dd><code>{shortHash(repository.git.head)}</code></dd>
</div>
<div>
<dt>Dirty</dt>
<dd>{repository.git.dirty === null || repository.git.dirty === undefined ? 'unknown' : repository.git.dirty ? 'yes' : 'no'} <small>{repository.git.dirty_scope}</small></dd>
</div>
<div>
<dt>Remote</dt>
<dd>
{#if repository.git.remote}
<code>{repository.git.remote.name}</code> · {repository.git.remote.url}
{#if repository.git.remote.redacted}<small>credentials redacted</small>{/if}
{:else}
not configured
{/if}
</dd>
</div>
</dl>
{:else}
<p>Git metadata is unavailable for this local Repository.</p>
{/if}
{:else if repositoryError}
<p class="error">{repositoryError}</p>
{:else}
<p>Waiting for Git summary…</p>
{/if}
</div>
</section>
<section class="card">
<h2>Recent Git log</h2>
{#if repositoryLog}
{#if repositoryLog.items.length === 0}
<p>No recent commits are available from the bounded Git log API.</p>
{:else}
<div class="table-wrap">
<table>
<thead>
<tr>
<th>Worker</th>
<th>Host</th>
<th>State</th>
<th>Workspace</th>
<th>Implementation</th>
<th>Commit</th>
<th>Subject</th>
<th>Author</th>
<th>Timestamp</th>
</tr>
</thead>
<tbody>
{#each workers.items as worker}
{#each repositoryLog.items as commit (commit.hash)}
<tr>
<td>
<strong>{worker.label}</strong>
{#if worker.role || worker.profile}
<small>{worker.role ?? 'role unknown'} / {worker.profile ?? 'profile unknown'}</small>
{/if}
</td>
<td><code>{worker.host_id}</code></td>
<td>{worker.state} · {worker.status}</td>
<td>{worker.workspace_root ?? 'unknown'}</td>
<td>{worker.implementation.kind}</td>
<td><code>{shortHash(commit.hash)}</code></td>
<td>{commit.subject}</td>
<td>{commit.author_name} <small>{commit.author_email}</small></td>
<td>{commit.timestamp}</td>
</tr>
{/each}
</tbody>
</table>
</div>
{/if}
{:else if workersError}
<p class="error">{workersError}</p>
{:else if repositoryLogError}
<p class="error">{repositoryLogError}</p>
{:else}
<p>Waiting for <code>/api/workers</code></p>
<p>Waiting for <code>/api/repositories/local/log</code></p>
{/if}
</div>
</section>
</section>
{#if hosts || workers}
{@const diagnostics = diagnosticsFor(hosts?.diagnostics, workers?.diagnostics)}
{#if diagnostics.length > 0}
<section class="card">
<h2>Repository Ticket Kanban</h2>
<p class="section-note">
Read-only grouping of canonical Ticket records. No drag/drop or lifecycle mutation is exposed.
</p>
{#if repositoryTickets}
<div class="kanban">
{#each repositoryTickets.columns as column (column.state)}
<article class="kanban-column">
<h3>{column.state} <span>{column.items.length}</span></h3>
{#if column.items.length === 0}
<p class="muted">No tickets.</p>
{:else}
<ul>
{#each column.items as ticket (ticket.id)}
<li>
<strong>{ticket.title}</strong>
<small><code>{ticket.id}</code> · updated {formatDate(ticket.updated_at)}</small>
</li>
{/each}
</ul>
{/if}
</article>
{/each}
</div>
{:else if repositoryTicketsError}
<p class="error">{repositoryTicketsError}</p>
{:else}
<p>Waiting for <code>/api/repositories/local/tickets</code></p>
{/if}
</section>
{@const repositoryDiagnostics = diagnosticsFor(repository?.git.diagnostics, repositoryLog?.diagnostics, repositoryTickets?.diagnostics)}
{#if repositoryDiagnostics.length > 0}
<section class="card diagnostics">
<h2>Diagnostics</h2>
<h2>Repository diagnostics</h2>
<ul>
{#each diagnostics as diagnostic}
{#each repositoryDiagnostics as diagnostic}
<li>
<strong>{diagnostic.severity}</strong>
<code>{diagnostic.code}</code>
@@ -242,6 +363,216 @@
</ul>
</section>
{/if}
{:else if route.page === 'objectives'}
<section class="card">
<h2>Objectives</h2>
<p class="section-note">
Objectives are read from canonical filesystem records through <code>/api/objectives</code>.
</p>
{#if objectives}
{#if objectives.items.length === 0}
<p>No Objective records are present.</p>
{:else}
<div class="stack">
{#each objectives.items as objective (objective.id)}
<article class="runtime-card selected-card" class:selected={route.objectiveId === objective.id}>
<div class="runtime-heading">
<strong>{objective.title}</strong>
<span>{objective.state}</span>
</div>
<p>{objective.summary || 'No summary text is available.'}</p>
<dl>
<div>
<dt>ID</dt>
<dd><code>{objective.id}</code></dd>
</div>
<div>
<dt>Updated</dt>
<dd>{formatDate(objective.updated_at)}</dd>
</div>
<div>
<dt>Linked tickets</dt>
<dd>{objective.linked_tickets?.length ? objective.linked_tickets.join(', ') : 'none'}</dd>
</div>
</dl>
<p><a href={`#/objectives/${objective.id}`}>Detail placeholder</a></p>
</article>
{/each}
</div>
{/if}
{#if objectives.invalid_records.length > 0}
<p class="error">{objectives.invalid_records.length} invalid objective record(s) hidden.</p>
{/if}
{:else if objectivesError}
<p class="error">{objectivesError}</p>
{:else}
<p>Waiting for <code>/api/objectives</code></p>
{/if}
</section>
{#if route.objectiveId}
<section class="card detail-placeholder">
<h2>Objective detail</h2>
<p>
Selected Objective <code>{route.objectiveId}</code>. This slice keeps detail navigation as a
static SPA placeholder; canonical Objective content remains in the filesystem record.
</p>
</section>
{/if}
{:else}
<section class="card">
<h2>Workspace</h2>
{#if workspace}
<dl>
<div>
<dt>ID</dt>
<dd>{workspace.workspace_id}</dd>
</div>
<div>
<dt>Name</dt>
<dd>{workspace.display_name}</dd>
</div>
<div>
<dt>Record authority</dt>
<dd>{workspace.record_authority}</dd>
</div>
<div>
<dt>Host / Worker bridge</dt>
<dd>{workspace.extension_points.host_worker_bridge.status}</dd>
</div>
</dl>
{:else if workspaceError}
<p class="error">{workspaceError}</p>
{:else}
<p>Waiting for <code>/api/workspace</code></p>
{/if}
</section>
<section class="grid">
<div class="card">
<h2>Read API surface</h2>
<ul>
{#each endpoints as endpoint}
<li><code>{endpoint.path}</code>{endpoint.label}</li>
{/each}
</ul>
</div>
<div class="card">
<h2>Reserved seams</h2>
<p>
Event streams remain represented as extension-point state in the backend
response. Hosts and Workers are read-only local observations; no
scheduler, lifecycle control, or hosted multi-tenant behavior is
implemented in this slice.
</p>
</div>
</section>
<section class="grid runtime">
<div class="card">
<h2>Hosts</h2>
{#if hosts}
{#if hosts.items.length === 0}
<p>No local Hosts are visible.</p>
{:else}
<div class="stack">
{#each hosts.items as host}
<article class="runtime-card">
<div class="runtime-heading">
<strong>{host.label}</strong>
<span class:warn={host.status !== 'available'}>{host.status}</span>
</div>
<dl>
<div>
<dt>ID</dt>
<dd><code>{host.host_id}</code></dd>
</div>
<div>
<dt>Kind</dt>
<dd>{host.kind}</dd>
</div>
<div>
<dt>Local inspection</dt>
<dd>{host.capabilities.local_pod_inspection}</dd>
</div>
<div>
<dt>Platform</dt>
<dd>{host.capabilities.os} / {host.capabilities.arch}</dd>
</div>
</dl>
</article>
{/each}
</div>
{/if}
{:else if hostsError}
<p class="error">{hostsError}</p>
{:else}
<p>Waiting for <code>/api/hosts</code></p>
{/if}
</div>
<div class="card">
<h2>Workers</h2>
{#if workers}
{#if workers.items.length === 0}
<p>No local Workers are visible.</p>
{:else}
<div class="table-wrap">
<table>
<thead>
<tr>
<th>Worker</th>
<th>Host</th>
<th>State</th>
<th>Workspace</th>
<th>Implementation</th>
</tr>
</thead>
<tbody>
{#each workers.items as worker}
<tr>
<td>
<strong>{worker.label}</strong>
{#if worker.role || worker.profile}
<small>{worker.role ?? 'role unknown'} / {worker.profile ?? 'profile unknown'}</small>
{/if}
</td>
<td><code>{worker.host_id}</code></td>
<td>{worker.state} · {worker.status}</td>
<td>{worker.workspace_root ?? 'unknown'}</td>
<td>{worker.implementation.kind}</td>
</tr>
{/each}
</tbody>
</table>
</div>
{/if}
{:else if workersError}
<p class="error">{workersError}</p>
{:else}
<p>Waiting for <code>/api/workers</code></p>
{/if}
</div>
</section>
{#if hosts || workers}
{@const diagnostics = diagnosticsFor(hosts?.diagnostics, workers?.diagnostics)}
{#if diagnostics.length > 0}
<section class="card diagnostics">
<h2>Diagnostics</h2>
<ul>
{#each diagnostics as diagnostic}
<li>
<strong>{diagnostic.severity}</strong>
<code>{diagnostic.code}</code>
<span>{diagnostic.message}</span>
</li>
{/each}
</ul>
</section>
{/if}
{/if}
{/if}
</main>
</div>
@@ -283,6 +614,24 @@
max-width: 68ch;
}
.page-links {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.page-links a,
.card a {
color: #7dd3fc;
}
.page-links a {
border: 1px solid rgba(125, 211, 252, 0.28);
border-radius: 999px;
padding: 6px 12px;
text-decoration: none;
}
.eyebrow {
color: #38bdf8;
font-weight: 700;
@@ -297,7 +646,8 @@
overflow-wrap: anywhere;
}
h2 {
h2,
h3 {
margin-top: 0;
}
@@ -331,18 +681,29 @@
min-width: 0;
}
.section-note,
.muted {
color: #94a3b8;
}
.stack {
display: grid;
gap: 12px;
}
.runtime-card {
.runtime-card,
.kanban-column {
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 16px;
padding: 16px;
background: rgba(15, 23, 42, 0.55);
}
.selected-card.selected {
border-color: rgba(56, 189, 248, 0.5);
background: rgba(14, 165, 233, 0.1);
}
.runtime-heading {
display: flex;
justify-content: space-between;
@@ -403,6 +764,36 @@
margin-top: 4px;
}
.kanban {
display: grid;
gap: 14px;
grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
margin-top: 16px;
}
.kanban-column h3 {
display: flex;
justify-content: space-between;
gap: 10px;
color: #cbd5e1;
font-size: 0.95rem;
text-transform: uppercase;
}
.kanban-column ul {
display: grid;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.kanban-column li {
border-radius: 12px;
background: rgba(30, 41, 59, 0.72);
padding: 10px;
}
.diagnostics {
margin-top: 16px;
}
@@ -413,6 +804,10 @@
margin-bottom: 12px;
}
.detail-placeholder {
border-style: dashed;
}
.error {
color: #fca5a5;
}