feat(dashboard): project / session breadcrumb in the session toolbar

Prefix the session name in the action bar with its project as a breadcrumb —
"project / session" — so the toolbar says which project the session belongs to.
The project part is muted and gives up width first, so a long project name
truncates before the session name does. Threaded projectName from the page
(already computed there) down through RunView and RunActionBar to GitStatusBar.

Author: suleimansh

packages/framework-dashboard/components/GitStatusBar.tsx

@@ -25,6 +25,7 @@ export function GitStatusBar({
   runId,
   inline = false,
   label,
+  projectName,
   summary,
   expanded = false,
   onToggle,
@@ -36,6 +37,9 @@ export function GitStatusBar({
   /** The session's name (#1030). Given, it leads as the bold identity and the branch drops to
    * muted git context beside it; absent (the project home), the branch stays the identity. */
   label?: string | undefined
+  /** The project the session belongs to. Given alongside a label, it prefixes the name as a
+   * `project / session` breadcrumb; it gives up width first, so the session name truncates last. */
+  projectName?: string | null | undefined
   /** What the branch holds, in a phrase — rendered beside the branch's own status. */
   summary?: ReactNode
   expanded?: boolean
@@ -85,8 +89,22 @@ export function GitStatusBar({
           change under you, unlike the branch, which the agent renames near the end (#736). It is
           the one element that shrinks, so it truncates last and the identity never disappears. */}
       {label && (
-        <span className="min-w-0 truncate font-medium text-foreground" title={label}>
-          {label}
+        <span className="flex min-w-0 items-center gap-1.5 overflow-hidden">
+          {/* The project, as a breadcrumb parent: muted, and the first to give up width (shrink-999)
+              so a long project name truncates before the session name does. */}
+          {projectName && (
+            <span className="flex min-w-0 shrink-[999] items-center gap-1.5 overflow-hidden text-muted-foreground">
+              <span className="truncate" title={projectName}>
+                {projectName}
+              </span>
+              <span className="shrink-0 text-muted-foreground/60" aria-hidden>
+                /
+              </span>
+            </span>
+          )}
+          <span className="min-w-0 truncate font-medium text-foreground" title={label}>
+            {label}
+          </span>
         </span>
       )}
       {/* The branch: the identity when there is no session label (the project home), otherwise

packages/framework-dashboard/components/RunActionBar.tsx

@@ -17,6 +17,7 @@ export function RunActionBar({
   onWorktreeRemoved,
   onDeleted,
   label,
+  projectName,
   summary,
   expanded = false,
   onToggle,
@@ -28,6 +29,8 @@ export function RunActionBar({
   events: FrameworkEvent[]
   /** The session's name — leads the bar, so the branch is git context, not the identity (#1030). */
   label?: string | undefined
+  /** The session's project, shown as a `project / session` breadcrumb before the name. */
+  projectName?: string | null | undefined
   /** True when this finished run still has a worktree on disk, so it can be removed (#737). */
   retainedWorktree?: boolean
   /** Told after that worktree is removed, so the menu item goes. */
@@ -49,7 +52,7 @@ export function RunActionBar({
     <div className="@container flex items-center gap-2 overflow-hidden border-b border-border px-4 py-2">
       {/* Where this session is working (#798/#809): its branch, whether it holds uncommitted work,
           its size on disk, and the PR its branch has — read from this session's own worktree. */}
-      <GitStatusBar projectId={projectId} runId={runId} inline label={label} summary={summary} expanded={expanded} onToggle={onToggle} />
+      <GitStatusBar projectId={projectId} runId={runId} inline label={label} projectName={projectName} summary={summary} expanded={expanded} onToggle={onToggle} />
       {/* What the session IS sits at the start; what you can DO to it sits at the end. The spacer
           grows but never shrinks (#1030), so a tight row takes its width from the label. */}
       <div className="grow shrink-0" />

packages/framework-dashboard/components/RunView.tsx

@@ -32,6 +32,7 @@ export function RunView({
   events,
   live,
   label,
+  projectName,
   target,
   remoteLabel,
   files,
@@ -52,6 +53,8 @@ export function RunView({
    * the stable identity, so the branch renaming itself near the end of a run (#736) reads as a
    * detail changing rather than the whole view changing. */
   label?: string | undefined
+  /** The session's project, shown as a `project / session` breadcrumb in the action bar. */
+  projectName?: string | null | undefined
   /** Where the run executes (#1053): `actions` swaps the live feed for a burst-mode affordance; `remote` is relayed to a device (#1067). */
   target?: 'local' | 'actions' | 'remote' | undefined
   /** The device this run executes on (#1067), when it is relayed to a connected one. Set only for a
@@ -112,6 +115,7 @@ export function RunView({
         runId={runId}
         events={shown}
         label={label ?? progress.sessionName}
+        projectName={projectName}
         retainedWorktree={hasWorktree}
         onWorktreeRemoved={onWorktreeRemoved}
         onDeleted={onDeleted}

packages/framework-dashboard/pages/index/+Page.tsx

@@ -241,7 +241,7 @@ export default function Page() {
     if (runId === null) {
       // Just pressed Start on a project with no worktree: follow the live output until the poll
       // surfaces the run and the effect above adopts its id.
-      if (adopting) return <RunView projectId={projectId} runId={null} events={events} live label={runStart.intent || undefined} remoteLabel={runStart.runsOn} files={files} addContext={addContext} removeContext={removeContext} lost={lost} onRunStarted={onRunStarted} />
+      if (adopting) return <RunView projectId={projectId} runId={null} events={events} live label={runStart.intent || undefined} projectName={projectName} remoteLabel={runStart.runsOn} files={files} addContext={addContext} removeContext={removeContext} lost={lost} onRunStarted={onRunStarted} />
       return (
         <ProjectHome
           projectId={projectId}
@@ -260,7 +260,7 @@ export default function Page() {
       // list we have not read yet. Both are live views; only a session that is genuinely absent
       // from a list we did read is gone.
       if (runId === runStart.id || !runsLoaded)
-        return <RunView projectId={projectId} runId={runId} events={events} live label={runStart.intent || undefined} remoteLabel={runId === runStart.id ? runStart.runsOn : undefined} files={files} addContext={addContext} removeContext={removeContext} lost={lost} onRunStarted={onRunStarted} />
+        return <RunView projectId={projectId} runId={runId} events={events} live label={runStart.intent || undefined} projectName={projectName} remoteLabel={runId === runStart.id ? runStart.runsOn : undefined} files={files} addContext={addContext} removeContext={removeContext} lost={lost} onRunStarted={onRunStarted} />
       return (
         <NotFound
           title="This session is gone"
@@ -279,6 +279,7 @@ export default function Page() {
         events={events}
         live={selectedRun.status === 'running'}
         label={runLabel(selectedRun)}
+        projectName={projectName}
         files={files}
         addContext={addContext}
         removeContext={removeContext}