feat: add workspace breadcrumbs

2026-07-31 23:48:46 +09:00
parent 06a98fe30c
commit 48556e1a2c
15 changed files with 281 additions and 30 deletions
@@ -2,6 +2,7 @@
  import { page } from '$app/state';
  import { setContext } from 'svelte';
  import WorkspaceAlerts from '$lib/workspace/alerts/WorkspaceAlerts.svelte';
+  import { provideHeaderController, type HeaderController } from '$lib/workspace/header/context';
  import GlobalSidebar from '$lib/workspace/sidebar/GlobalSidebar.svelte';
  import SidebarFrame from '$lib/workspace/sidebar/SidebarFrame.svelte';
  import { SIDEBAR_CONTEXT, type SidebarSnippet } from '$lib/workspace/sidebar/context';
@@ -10,7 +11,9 @@

  let { children }: LayoutProps = $props();
  let sidebar = $state<SidebarSnippet | null>(null);
+  const headerController = $state<HeaderController>({ content: null });

+  provideHeaderController(headerController);
  setContext(SIDEBAR_CONTEXT, {
    setSidebar(snippet: SidebarSnippet) {
      sidebar = snippet;
@@ -32,6 +35,9 @@
    {/if}
  </SidebarFrame>
  <header class="workspace-topbar">
+    <div class="workspace-topbar-location">
+      {#if headerController.content}{@render headerController.content()}{/if}
+    </div>
    <nav class="workspace-topbar-actions" aria-label="Global navigation">
      <a class="topbar-icon-button" href="/account" aria-label="Open Account" title="Account">
        <svg class="topbar-icon" aria-hidden="true" viewBox="0 0 24 24">
@@ -64,7 +70,8 @@
    grid-row: 1;
    display: flex;
    align-items: center;
-    justify-content: flex-end;
+    justify-content: space-between;
+    gap: var(--space-4);
    min-width: 0;
    min-height: 3.25rem;
    padding: 0 var(--space-5);
@@ -73,6 +80,11 @@
    backdrop-filter: blur(14px);
  }

+  .workspace-topbar-location {
+    min-width: 0;
+    overflow: hidden;
+  }
+
  .workspace-topbar-actions {
    display: inline-flex;
    align-items: center;
@@ -1,5 +1,7 @@
 <script lang="ts">
  import { page } from '$app/state';
+  import HeaderOverride from '$lib/workspace/header/HeaderOverride.svelte';
+  import WorkspaceBreadcrumbs from '$lib/workspace/header/WorkspaceBreadcrumbs.svelte';
  import SidebarOverride from '$lib/workspace/sidebar/SidebarOverride.svelte';
  import WorkspaceSidebar from '$lib/workspace/sidebar/WorkspaceSidebar.svelte';
  import '$lib/workspace/styles/workspace-pages.css';
@@ -10,6 +12,10 @@
  let { data, children }: LayoutProps = $props();
 </script>

+{#snippet workspaceHeader()}
+  <WorkspaceBreadcrumbs workspaceId={page.params.workspaceId ?? data.workspace?.workspace_id ?? ''} />
+{/snippet}
+
 {#snippet workspaceSidebar()}
  <WorkspaceSidebar
    workspace={data.workspace ?? null}
@@ -20,6 +26,7 @@
  />
 {/snippet}

+<HeaderOverride content={workspaceHeader} />
 <SidebarOverride sidebar={workspaceSidebar} />

 {@render children()}
@@ -42,7 +42,6 @@
    <div class="objective-title-row detail">
      <div>
        <h3>{data.objective.title}</h3>
-        <p><code>{data.objective.id}</code></p>
      </div>
      <span class="state-pill">{data.objective.state}</span>
    </div>
@@ -15,7 +15,6 @@
    <div class="repository-detail-heading">
      <div>
        <h3>{data.repository.item.display_name}</h3>
-        <p><code>{data.repository.item.id}</code></p>
      </div>
      <span class="status-pill" class:warn={data.repository.item.git?.status !== 'clean'}>{data.repository.item.git?.status ?? 'not observed'}</span>
    </div>
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { tick } from "svelte";
+    import { tick, untrack } from "svelte";
    import ConsoleLineItem from "$lib/workspace/console/ConsoleLineItem.svelte";
    import ConsoleTimeline from "$lib/workspace/console/ConsoleTimeline.svelte";
    import { chatSubmit } from "$lib/workspace/console/chat-submit";
@@ -35,6 +35,8 @@
            workspaceId: string;
            runtimeId: string;
            workerId: string;
+            worker: Worker | null;
+            workerError: string | null;
        };
    };

@@ -84,9 +86,11 @@
        client: number;
    };

-    let worker = $state<Worker | null>(null);
-    let liveWorkerState = $state<string | null>(null);
-    let workerError = $state<string | null>(null);
+    let worker = $state<Worker | null>(untrack(() => data.worker));
+    let liveWorkerState = $state<string | null>(
+        untrack(() => data.worker?.state ?? null),
+    );
+    let workerError = $state<string | null>(untrack(() => data.workerError));
    let draft = $state("");
    let completionEntries = $state<ComposerCompletionEntry[]>([]);
    let completionToken = $state<ComposerCompletionToken | null>(null);
@@ -193,7 +197,7 @@
    }

    async function loadConsoleData(target: ConsoleTarget) {
-        await loadWorker(target);
+        if (!worker) await loadWorker(target);
    }

    function advanceReloadToken(): number {
@@ -1101,10 +1105,7 @@
 </svelte:head>

 <div class="console-shell worker-console-shell">
-    <section class="console-header card">
-        <div>
-            <h2>{worker?.label ?? workerId}</h2>
-        </div>
+    <section class="console-header card" aria-label="Worker controls">
        <div class="console-header-actions">
            <div
                class="console-status-pill"
@@ -1413,7 +1414,7 @@
    .console-header {
        display: flex;
        align-items: flex-start;
-        justify-content: space-between;
+        justify-content: flex-end;
        gap: var(--space-4);
    }

@@ -1,11 +1,23 @@
-export function load(
-  { params }: {
-    params: { workspaceId: string; runtimeId: string; workerId: string };
-  },
-) {
+import { loadJson, workspaceApiPath } from "$lib/workspace/api/http";
+import type { Worker } from "$lib/workspace/sidebar/types";
+import type { PageLoad } from "./$types";
+
+export const load: PageLoad = async ({ fetch, params }) => {
+  const worker = await loadJson<Worker>(
+    fetch,
+    workspaceApiPath(
+      params.workspaceId,
+      `/runtimes/${encodeURIComponent(params.runtimeId)}/workers/${
+        encodeURIComponent(params.workerId)
+      }`,
+    ),
+  );
+
  return {
    workspaceId: params.workspaceId,
    runtimeId: params.runtimeId,
    workerId: params.workerId,
+    worker: worker.data,
+    workerError: worker.error,
  };
-}
+};
@@ -7,7 +7,7 @@
    fetchProfileTreeFile,
    writeProfileTreeFile,
  } from '$lib/workspace/settings/profile-api';
-  import { profileSettingsHref, virtualProfilePathForCreate } from '$lib/workspace/settings/profile-routes';
+  import { virtualProfilePathForCreate } from '$lib/workspace/settings/profile-routes';
  import type { Diagnostic } from '$lib/workspace/settings/model';
  import type {
    WorkspaceProfileSourceTreeFileResponse,
@@ -122,10 +122,8 @@
 <section class="card settings-section" aria-labelledby="profile-tree-title">
  <header class="settings-section-header">
    <div>
-      <p class="eyebrow">Profile source tree</p>
-      <h2 id="profile-tree-title">{sourceTreeId}</h2>
+      <h2 id="profile-tree-title">Profile source tree</h2>
    </div>
-    <a href={profileSettingsHref(workspaceId)}>Back to profiles</a>
  </header>

  {#if loading}
@@ -164,15 +164,10 @@
 <svelte:head><title>{ticket.title} · Yoi</title></svelte:head>

 <div class="workspace-page ticket-detail-page">
-  <a class="workspace-back-link" href={`/w/${encodeURIComponent(data.workspaceId)}/tickets`}>
-    ← Ticket board
-  </a>
-
  <header class="ticket-detail-header">
    <div>
      <div class="ticket-detail-kicker">
        <span class="workspace-status-pill" data-status={ticket.state}>{ticket.state}</span>
-        <code>{ticket.id}</code>
      </div>
      <h1>{ticket.title}</h1>
      <p>Updated {prettyDate(ticket.updated_at)}</p>
@@ -272,7 +272,6 @@
      <h1 id="new-worker-heading">New Worker</h1>
      <p>Create a Worker on a selected Runtime. Workdir-less conversation Workers are only available on embedded Runtime.</p>
    </div>
-    <a class="secondary-link" href={`/w/${workspaceId}`}>Back to workspace</a>
  </header>

  {#if ticketContext}