From 9a634146d05dc015e84330a1b15998f379b48e43 Mon Sep 17 00:00:00 2001
From: dotta <dotta@example.com>
Date: Sat, 28 Mar 2026 19:28:11 -0500
Subject: [PATCH] Improve workspace detail mobile layouts

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 ui/src/pages/ExecutionWorkspaceDetail.tsx | 784 +++++++++++-----------
 ui/src/pages/ProjectWorkspaceDetail.tsx   |  33 +-
 2 files changed, 414 insertions(+), 403 deletions(-)

diff --git a/ui/src/pages/ExecutionWorkspaceDetail.tsx b/ui/src/pages/ExecutionWorkspaceDetail.tsx
index 603b1906680..a68f6c38ad7 100644
--- a/ui/src/pages/ExecutionWorkspaceDetail.tsx
+++ b/ui/src/pages/ExecutionWorkspaceDetail.tsx
@@ -161,9 +161,9 @@ function Field({
 }) {
   return (
     <label className="space-y-1.5">
-      <div className="flex items-center justify-between gap-3">
+      <div className="flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between sm:gap-3">
         <span className="text-xs font-medium uppercase tracking-[0.16em] text-muted-foreground">{label}</span>
-        {hint ? <span className="text-[11px] text-muted-foreground">{hint}</span> : null}
+        {hint ? <span className="text-[11px] leading-relaxed text-muted-foreground sm:text-right">{hint}</span> : null}
       </div>
       {children}
     </label>
@@ -172,8 +172,8 @@ function Field({
 
 function DetailRow({ label, children }: { label: string; children: React.ReactNode }) {
   return (
-    <div className="flex items-start gap-3 py-1.5">
-      <div className="w-32 shrink-0 text-xs text-muted-foreground">{label}</div>
+    <div className="flex flex-col gap-1.5 py-1.5 sm:flex-row sm:items-start sm:gap-3">
+      <div className="shrink-0 text-xs text-muted-foreground sm:w-32">{label}</div>
       <div className="min-w-0 flex-1 text-sm">{children}</div>
     </div>
   );
@@ -189,7 +189,7 @@ function StatusPill({ children, className }: { children: React.ReactNode; classN
 
 function MonoValue({ value, copy }: { value: string; copy?: boolean }) {
   return (
-    <div className="inline-flex max-w-full items-center gap-2">
+    <div className="inline-flex max-w-full items-start gap-2">
       <span className="break-all font-mono text-xs">{value}</span>
       {copy ? (
         <CopyText text={value} className="shrink-0 text-muted-foreground hover:text-foreground" copiedLabel="Copied">
@@ -368,415 +368,421 @@ export function ExecutionWorkspaceDetail() {
     <>
       <div className="mx-auto max-w-5xl space-y-6">
         <div className="flex flex-wrap items-center gap-3">
-        <Button variant="ghost" size="sm" asChild>
-          <Link to={project ? `/projects/${projectRef}/workspaces` : "/projects"}>
-            <ArrowLeft className="mr-1 h-4 w-4" />
-            Back to all workspaces
-          </Link>
-        </Button>
-        <StatusPill>{workspace.mode}</StatusPill>
-        <StatusPill>{workspace.providerType}</StatusPill>
-        <StatusPill className={workspace.status === "active" ? "border-emerald-500/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300" : undefined}>
-          {workspace.status}
-        </StatusPill>
-      </div>
+          <Button variant="ghost" size="sm" asChild>
+            <Link to={project ? `/projects/${projectRef}/workspaces` : "/projects"}>
+              <ArrowLeft className="mr-1 h-4 w-4" />
+              Back to all workspaces
+            </Link>
+          </Button>
+          <StatusPill>{workspace.mode}</StatusPill>
+          <StatusPill>{workspace.providerType}</StatusPill>
+          <StatusPill className={workspace.status === "active" ? "border-emerald-500/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300" : undefined}>
+            {workspace.status}
+          </StatusPill>
+        </div>
 
         <div className="grid gap-6 lg:grid-cols-[minmax(0,1.4fr)_minmax(18rem,0.95fr)]">
           <div className="space-y-6">
             <div className="rounded-2xl border border-border bg-card p-5">
-            <div className="flex flex-wrap items-start justify-between gap-4">
-              <div className="space-y-2">
-                <div className="text-xs font-medium uppercase tracking-[0.16em] text-muted-foreground">
-                  Execution workspace
-                </div>
-                <h1 className="text-2xl font-semibold">{workspace.name}</h1>
-                <p className="max-w-2xl text-sm text-muted-foreground">
-                  Configure the concrete runtime workspace that Paperclip reuses for this issue flow. These settings stay
-                  attached to the execution workspace so future runs can keep local paths, repo refs, provisioning, teardown,
-                  and runtime-service behavior in sync with the actual workspace being reused.
-                </p>
-              </div>
-              <div className="flex shrink-0 items-center gap-2">
-                <Button
-                  variant="outline"
-                  onClick={() => setCloseDialogOpen(true)}
-                  disabled={workspace.status === "archived"}
-                >
-                  {workspace.status === "cleanup_failed" ? "Retry close" : "Close workspace"}
-                </Button>
-              </div>
-            </div>
-
-            <Separator className="my-5" />
-
-            <div className="grid gap-4 md:grid-cols-2">
-              <Field label="Workspace name">
-                <input
-                  className="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm outline-none"
-                  value={form.name}
-                  onChange={(event) => setForm((current) => current ? { ...current, name: event.target.value } : current)}
-                  placeholder="Execution workspace name"
-                />
-              </Field>
-              <Field label="Branch name" hint="Useful for isolated worktrees">
-                <input
-                  className="w-full rounded-lg border border-border bg-background px-3 py-2 font-mono text-sm outline-none"
-                  value={form.branchName}
-                  onChange={(event) => setForm((current) => current ? { ...current, branchName: event.target.value } : current)}
-                  placeholder="PAP-946-workspace"
-                />
-              </Field>
-            </div>
-
-            <div className="mt-4 grid gap-4 md:grid-cols-2">
-              <Field label="Working directory">
-                <input
-                  className="w-full rounded-lg border border-border bg-background px-3 py-2 font-mono text-sm outline-none"
-                  value={form.cwd}
-                  onChange={(event) => setForm((current) => current ? { ...current, cwd: event.target.value } : current)}
-                  placeholder="/absolute/path/to/workspace"
-                />
-              </Field>
-              <Field label="Provider path / ref">
-                <input
-                  className="w-full rounded-lg border border-border bg-background px-3 py-2 font-mono text-sm outline-none"
-                  value={form.providerRef}
-                  onChange={(event) => setForm((current) => current ? { ...current, providerRef: event.target.value } : current)}
-                  placeholder="/path/to/worktree or provider ref"
-                />
-              </Field>
-            </div>
-
-            <div className="mt-4 grid gap-4 md:grid-cols-2">
-              <Field label="Repo URL">
-                <input
-                  className="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm outline-none"
-                  value={form.repoUrl}
-                  onChange={(event) => setForm((current) => current ? { ...current, repoUrl: event.target.value } : current)}
-                  placeholder="https://github.com/org/repo"
-                />
-              </Field>
-              <Field label="Base ref">
-                <input
-                  className="w-full rounded-lg border border-border bg-background px-3 py-2 font-mono text-sm outline-none"
-                  value={form.baseRef}
-                  onChange={(event) => setForm((current) => current ? { ...current, baseRef: event.target.value } : current)}
-                  placeholder="origin/main"
-                />
-              </Field>
-            </div>
-
-            <div className="mt-4 grid gap-4 md:grid-cols-2">
-              <Field label="Provision command" hint="Runs when Paperclip prepares this execution workspace">
-                <textarea
-                  className="min-h-28 w-full rounded-lg border border-border bg-background px-3 py-2 font-mono text-sm outline-none"
-                  value={form.provisionCommand}
-                  onChange={(event) => setForm((current) => current ? { ...current, provisionCommand: event.target.value } : current)}
-                  placeholder="bash ./scripts/provision-worktree.sh"
-                />
-              </Field>
-              <Field label="Teardown command" hint="Runs when the execution workspace is archived or cleaned up">
-                <textarea
-                  className="min-h-28 w-full rounded-lg border border-border bg-background px-3 py-2 font-mono text-sm outline-none"
-                  value={form.teardownCommand}
-                  onChange={(event) => setForm((current) => current ? { ...current, teardownCommand: event.target.value } : current)}
-                  placeholder="bash ./scripts/teardown-worktree.sh"
-                />
-              </Field>
-            </div>
-
-            <div className="mt-4 grid gap-4">
-              <Field label="Cleanup command" hint="Workspace-specific cleanup before teardown">
-                <textarea
-                  className="min-h-24 w-full rounded-lg border border-border bg-background px-3 py-2 font-mono text-sm outline-none"
-                  value={form.cleanupCommand}
-                  onChange={(event) => setForm((current) => current ? { ...current, cleanupCommand: event.target.value } : current)}
-                  placeholder="pkill -f vite || true"
-                />
-              </Field>
-
-              <div className="rounded-xl border border-dashed border-border/70 bg-muted/20 px-3 py-3">
-                <div className="flex flex-wrap items-center justify-between gap-3">
-                  <div>
-                    <div className="text-xs font-medium uppercase tracking-[0.16em] text-muted-foreground">
-                      Runtime config source
-                    </div>
-                    <p className="mt-1 text-sm text-muted-foreground">
-                      {runtimeConfigSource === "execution_workspace"
-                        ? "This execution workspace currently overrides the project workspace runtime config."
-                        : runtimeConfigSource === "project_workspace"
-                          ? "This execution workspace is inheriting the project workspace runtime config."
-                          : "No runtime config is currently defined on this execution workspace or its project workspace."}
-                    </p>
+              <div className="flex flex-col gap-4 sm:flex-row sm:flex-wrap sm:items-start sm:justify-between">
+                <div className="space-y-2">
+                  <div className="text-xs font-medium uppercase tracking-[0.16em] text-muted-foreground">
+                    Execution workspace
                   </div>
+                  <h1 className="text-2xl font-semibold">{workspace.name}</h1>
+                  <p className="max-w-2xl text-sm text-muted-foreground">
+                    Configure the concrete runtime workspace that Paperclip reuses for this issue flow. These settings stay
+                    attached to the execution workspace so future runs can keep local paths, repo refs, provisioning, teardown,
+                    and runtime-service behavior in sync with the actual workspace being reused.
+                  </p>
+                </div>
+                <div className="flex w-full shrink-0 items-center gap-2 sm:w-auto">
                   <Button
                     variant="outline"
-                    size="sm"
-                    disabled={!linkedProjectWorkspace?.runtimeConfig?.workspaceRuntime}
-                    onClick={() =>
-                      setForm((current) => current ? {
-                        ...current,
-                        inheritRuntime: true,
-                        workspaceRuntime: "",
-                      } : current)
-                    }
+                    className="w-full sm:w-auto"
+                    onClick={() => setCloseDialogOpen(true)}
+                    disabled={workspace.status === "archived"}
                   >
-                    Reset to inherit
+                    {workspace.status === "cleanup_failed" ? "Retry close" : "Close workspace"}
                   </Button>
                 </div>
               </div>
 
-              <Field label="Runtime services JSON" hint="Concrete workspace runtime settings for this execution workspace. Leave this inheriting unless you need a one-off override. If you are missing the right commands, ask your CEO to set them up for you.">
-                <div className="mb-2 flex items-center gap-2 text-xs text-muted-foreground">
+              <Separator className="my-5" />
+
+              <div className="grid gap-4 md:grid-cols-2">
+                <Field label="Workspace name">
                   <input
-                    id="inherit-runtime-config"
-                    type="checkbox"
-                    checked={form.inheritRuntime}
-                    onChange={(event) =>
-                      setForm((current) => current ? { ...current, inheritRuntime: event.target.checked } : current)
-                    }
+                    className="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm outline-none"
+                    value={form.name}
+                    onChange={(event) => setForm((current) => current ? { ...current, name: event.target.value } : current)}
+                    placeholder="Execution workspace name"
                   />
-                  <label htmlFor="inherit-runtime-config">Inherit project workspace runtime config</label>
+                </Field>
+                <Field label="Branch name" hint="Useful for isolated worktrees">
+                  <input
+                    className="w-full rounded-lg border border-border bg-background px-3 py-2 font-mono text-sm outline-none"
+                    value={form.branchName}
+                    onChange={(event) => setForm((current) => current ? { ...current, branchName: event.target.value } : current)}
+                    placeholder="PAP-946-workspace"
+                  />
+                </Field>
+              </div>
+
+              <div className="mt-4 grid gap-4 md:grid-cols-2">
+                <Field label="Working directory">
+                  <input
+                    className="w-full rounded-lg border border-border bg-background px-3 py-2 font-mono text-sm outline-none"
+                    value={form.cwd}
+                    onChange={(event) => setForm((current) => current ? { ...current, cwd: event.target.value } : current)}
+                    placeholder="/absolute/path/to/workspace"
+                  />
+                </Field>
+                <Field label="Provider path / ref">
+                  <input
+                    className="w-full rounded-lg border border-border bg-background px-3 py-2 font-mono text-sm outline-none"
+                    value={form.providerRef}
+                    onChange={(event) => setForm((current) => current ? { ...current, providerRef: event.target.value } : current)}
+                    placeholder="/path/to/worktree or provider ref"
+                  />
+                </Field>
+              </div>
+
+              <div className="mt-4 grid gap-4 md:grid-cols-2">
+                <Field label="Repo URL">
+                  <input
+                    className="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm outline-none"
+                    value={form.repoUrl}
+                    onChange={(event) => setForm((current) => current ? { ...current, repoUrl: event.target.value } : current)}
+                    placeholder="https://github.com/org/repo"
+                  />
+                </Field>
+                <Field label="Base ref">
+                  <input
+                    className="w-full rounded-lg border border-border bg-background px-3 py-2 font-mono text-sm outline-none"
+                    value={form.baseRef}
+                    onChange={(event) => setForm((current) => current ? { ...current, baseRef: event.target.value } : current)}
+                    placeholder="origin/main"
+                  />
+                </Field>
+              </div>
+
+              <div className="mt-4 grid gap-4 md:grid-cols-2">
+                <Field label="Provision command" hint="Runs when Paperclip prepares this execution workspace">
+                  <textarea
+                    className="min-h-28 w-full rounded-lg border border-border bg-background px-3 py-2 font-mono text-sm outline-none"
+                    value={form.provisionCommand}
+                    onChange={(event) => setForm((current) => current ? { ...current, provisionCommand: event.target.value } : current)}
+                    placeholder="bash ./scripts/provision-worktree.sh"
+                  />
+                </Field>
+                <Field label="Teardown command" hint="Runs when the execution workspace is archived or cleaned up">
+                  <textarea
+                    className="min-h-28 w-full rounded-lg border border-border bg-background px-3 py-2 font-mono text-sm outline-none"
+                    value={form.teardownCommand}
+                    onChange={(event) => setForm((current) => current ? { ...current, teardownCommand: event.target.value } : current)}
+                    placeholder="bash ./scripts/teardown-worktree.sh"
+                  />
+                </Field>
+              </div>
+
+              <div className="mt-4 grid gap-4">
+                <Field label="Cleanup command" hint="Workspace-specific cleanup before teardown">
+                  <textarea
+                    className="min-h-24 w-full rounded-lg border border-border bg-background px-3 py-2 font-mono text-sm outline-none"
+                    value={form.cleanupCommand}
+                    onChange={(event) => setForm((current) => current ? { ...current, cleanupCommand: event.target.value } : current)}
+                    placeholder="pkill -f vite || true"
+                  />
+                </Field>
+
+                <div className="rounded-xl border border-dashed border-border/70 bg-muted/20 px-3 py-3">
+                  <div className="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center sm:justify-between">
+                    <div>
+                      <div className="text-xs font-medium uppercase tracking-[0.16em] text-muted-foreground">
+                        Runtime config source
+                      </div>
+                      <p className="mt-1 text-sm text-muted-foreground">
+                        {runtimeConfigSource === "execution_workspace"
+                          ? "This execution workspace currently overrides the project workspace runtime config."
+                          : runtimeConfigSource === "project_workspace"
+                            ? "This execution workspace is inheriting the project workspace runtime config."
+                            : "No runtime config is currently defined on this execution workspace or its project workspace."}
+                      </p>
+                    </div>
+                    <Button
+                      variant="outline"
+                      className="w-full sm:w-auto"
+                      size="sm"
+                      disabled={!linkedProjectWorkspace?.runtimeConfig?.workspaceRuntime}
+                      onClick={() =>
+                        setForm((current) => current ? {
+                          ...current,
+                          inheritRuntime: true,
+                          workspaceRuntime: "",
+                        } : current)
+                      }
+                    >
+                      Reset to inherit
+                    </Button>
+                  </div>
                 </div>
-                <textarea
-                  className="min-h-48 w-full rounded-lg border border-border bg-background px-3 py-2 font-mono text-sm outline-none disabled:cursor-not-allowed disabled:opacity-60"
-                  value={form.workspaceRuntime}
-                  onChange={(event) => setForm((current) => current ? { ...current, workspaceRuntime: event.target.value } : current)}
-                  disabled={form.inheritRuntime}
-                  placeholder={'{\n  "services": [\n    {\n      "name": "web",\n      "command": "pnpm dev",\n      "port": 3100\n    }\n  ]\n}'}
-                />
-              </Field>
-            </div>
 
-            <div className="mt-5 flex flex-wrap items-center gap-3">
-              <Button disabled={!isDirty || updateWorkspace.isPending} onClick={saveChanges}>
-                {updateWorkspace.isPending ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
-                Save changes
-              </Button>
-              <Button
-                variant="outline"
-                disabled={!isDirty || updateWorkspace.isPending}
-                onClick={() => {
-                  setForm(initialState);
-                  setErrorMessage(null);
-                  setRuntimeActionMessage(null);
-                }}
-              >
-                Reset
-              </Button>
-              {errorMessage ? <p className="text-sm text-destructive">{errorMessage}</p> : null}
-              {!errorMessage && runtimeActionMessage ? <p className="text-sm text-muted-foreground">{runtimeActionMessage}</p> : null}
-              {!errorMessage && !isDirty ? <p className="text-sm text-muted-foreground">No unsaved changes.</p> : null}
+                <Field label="Runtime services JSON" hint="Concrete workspace runtime settings for this execution workspace. Leave this inheriting unless you need a one-off override. If you are missing the right commands, ask your CEO to set them up for you.">
+                  <div className="mb-2 flex items-center gap-2 text-xs text-muted-foreground">
+                    <input
+                      id="inherit-runtime-config"
+                      type="checkbox"
+                      checked={form.inheritRuntime}
+                      onChange={(event) =>
+                        setForm((current) => current ? { ...current, inheritRuntime: event.target.checked } : current)
+                      }
+                    />
+                    <label htmlFor="inherit-runtime-config">Inherit project workspace runtime config</label>
+                  </div>
+                  <textarea
+                    className="min-h-48 w-full rounded-lg border border-border bg-background px-3 py-2 font-mono text-sm outline-none disabled:cursor-not-allowed disabled:opacity-60"
+                    value={form.workspaceRuntime}
+                    onChange={(event) => setForm((current) => current ? { ...current, workspaceRuntime: event.target.value } : current)}
+                    disabled={form.inheritRuntime}
+                    placeholder={'{\n  "services": [\n    {\n      "name": "web",\n      "command": "pnpm dev",\n      "port": 3100\n    }\n  ]\n}'}
+                  />
+                </Field>
+              </div>
+
+              <div className="mt-5 flex flex-col items-stretch gap-3 sm:flex-row sm:flex-wrap sm:items-center">
+                <Button className="w-full sm:w-auto" disabled={!isDirty || updateWorkspace.isPending} onClick={saveChanges}>
+                  {updateWorkspace.isPending ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
+                  Save changes
+                </Button>
+                <Button
+                  variant="outline"
+                  className="w-full sm:w-auto"
+                  disabled={!isDirty || updateWorkspace.isPending}
+                  onClick={() => {
+                    setForm(initialState);
+                    setErrorMessage(null);
+                    setRuntimeActionMessage(null);
+                  }}
+                >
+                  Reset
+                </Button>
+                {errorMessage ? <p className="text-sm text-destructive">{errorMessage}</p> : null}
+                {!errorMessage && runtimeActionMessage ? <p className="text-sm text-muted-foreground">{runtimeActionMessage}</p> : null}
+                {!errorMessage && !isDirty ? <p className="text-sm text-muted-foreground">No unsaved changes.</p> : null}
+              </div>
             </div>
           </div>
-        </div>
 
-        <div className="space-y-6">
+          <div className="space-y-6">
             <div className="rounded-2xl border border-border bg-card p-5">
-            <div className="space-y-1">
-              <div className="text-xs font-medium uppercase tracking-[0.16em] text-muted-foreground">Linked objects</div>
-              <h2 className="text-lg font-semibold">Workspace context</h2>
-            </div>
-            <Separator className="my-4" />
-            <DetailRow label="Project">
-              {project ? <Link to={`/projects/${projectRef}`} className="hover:underline">{project.name}</Link> : <MonoValue value={workspace.projectId} />}
-            </DetailRow>
-            <DetailRow label="Project workspace">
-              {project && linkedProjectWorkspace ? (
-                <WorkspaceLink project={project} workspace={linkedProjectWorkspace} />
-              ) : workspace.projectWorkspaceId ? (
-                <MonoValue value={workspace.projectWorkspaceId} />
-              ) : (
-                "None"
-              )}
-            </DetailRow>
-            <DetailRow label="Source issue">
-              {sourceIssue ? (
-                <Link to={issueUrl(sourceIssue)} className="hover:underline">
-                  {sourceIssue.identifier ?? sourceIssue.id} · {sourceIssue.title}
-                </Link>
-              ) : workspace.sourceIssueId ? (
-                <MonoValue value={workspace.sourceIssueId} />
-              ) : (
-                "None"
-              )}
-            </DetailRow>
-            <DetailRow label="Derived from">
-              {derivedWorkspace ? (
-                <Link to={`/execution-workspaces/${derivedWorkspace.id}`} className="hover:underline">
-                  {derivedWorkspace.name}
-                </Link>
-              ) : workspace.derivedFromExecutionWorkspaceId ? (
-                <MonoValue value={workspace.derivedFromExecutionWorkspaceId} />
-              ) : (
-                "None"
-              )}
-            </DetailRow>
-            <DetailRow label="Workspace ID">
-              <MonoValue value={workspace.id} />
-            </DetailRow>
-          </div>
-
-            <div className="rounded-2xl border border-border bg-card p-5">
-            <div className="space-y-1">
-              <div className="text-xs font-medium uppercase tracking-[0.16em] text-muted-foreground">Paths and refs</div>
-              <h2 className="text-lg font-semibold">Concrete location</h2>
-            </div>
-            <Separator className="my-4" />
-            <DetailRow label="Working dir">
-              {workspace.cwd ? <MonoValue value={workspace.cwd} copy /> : "None"}
-            </DetailRow>
-            <DetailRow label="Provider ref">
-              {workspace.providerRef ? <MonoValue value={workspace.providerRef} copy /> : "None"}
-            </DetailRow>
-            <DetailRow label="Repo URL">
-              {workspace.repoUrl && isSafeExternalUrl(workspace.repoUrl) ? (
-                <div className="inline-flex items-center gap-2">
-                  <a href={workspace.repoUrl} target="_blank" rel="noreferrer" className="inline-flex items-center gap-1 hover:underline">
-                    {workspace.repoUrl}
-                    <ExternalLink className="h-3.5 w-3.5" />
-                  </a>
-                  <CopyText text={workspace.repoUrl} className="text-muted-foreground hover:text-foreground" copiedLabel="Copied">
-                    <Copy className="h-3.5 w-3.5" />
-                  </CopyText>
-                </div>
-              ) : workspace.repoUrl ? (
-                <MonoValue value={workspace.repoUrl} copy />
-              ) : (
-                "None"
-              )}
-            </DetailRow>
-            <DetailRow label="Base ref">
-              {workspace.baseRef ? <MonoValue value={workspace.baseRef} copy /> : "None"}
-            </DetailRow>
-            <DetailRow label="Branch">
-              {workspace.branchName ? <MonoValue value={workspace.branchName} copy /> : "None"}
-            </DetailRow>
-            <DetailRow label="Opened">{formatDateTime(workspace.openedAt)}</DetailRow>
-            <DetailRow label="Last used">{formatDateTime(workspace.lastUsedAt)}</DetailRow>
-            <DetailRow label="Cleanup">
-              {workspace.cleanupEligibleAt
-                ? `${formatDateTime(workspace.cleanupEligibleAt)}${workspace.cleanupReason ? ` · ${workspace.cleanupReason}` : ""}`
-                : "Not scheduled"}
-            </DetailRow>
-          </div>
-
-            <div className="rounded-2xl border border-border bg-card p-5">
-            <div className="flex items-start justify-between gap-3">
               <div className="space-y-1">
-                <div className="text-xs font-medium uppercase tracking-[0.16em] text-muted-foreground">Runtime services</div>
-                <h2 className="text-lg font-semibold">Attached services</h2>
-                <p className="text-sm text-muted-foreground">
-                  Source: {runtimeConfigSource === "execution_workspace"
-                    ? "execution workspace override"
-                    : runtimeConfigSource === "project_workspace"
-                      ? "project workspace default"
-                      : "none"}
-                </p>
-              </div>
-              <div className="flex shrink-0 flex-wrap gap-2">
-                <Button
-                  variant="outline"
-                  size="sm"
-                  disabled={controlRuntimeServices.isPending || !effectiveRuntimeConfig || !workspace.cwd}
-                  onClick={() => controlRuntimeServices.mutate("start")}
-                >
-                  {controlRuntimeServices.isPending ? <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" /> : null}
-                  Start
-                </Button>
-                <Button
-                  variant="outline"
-                  size="sm"
-                  disabled={controlRuntimeServices.isPending || !effectiveRuntimeConfig || !workspace.cwd}
-                  onClick={() => controlRuntimeServices.mutate("restart")}
-                >
-                  Restart
-                </Button>
-                <Button
-                  variant="outline"
-                  size="sm"
-                  disabled={controlRuntimeServices.isPending || (workspace.runtimeServices?.length ?? 0) === 0}
-                  onClick={() => controlRuntimeServices.mutate("stop")}
-                >
-                  Stop
-                </Button>
+                <div className="text-xs font-medium uppercase tracking-[0.16em] text-muted-foreground">Linked objects</div>
+                <h2 className="text-lg font-semibold">Workspace context</h2>
               </div>
+              <Separator className="my-4" />
+              <DetailRow label="Project">
+                {project ? <Link to={`/projects/${projectRef}`} className="hover:underline">{project.name}</Link> : <MonoValue value={workspace.projectId} />}
+              </DetailRow>
+              <DetailRow label="Project workspace">
+                {project && linkedProjectWorkspace ? (
+                  <WorkspaceLink project={project} workspace={linkedProjectWorkspace} />
+                ) : workspace.projectWorkspaceId ? (
+                  <MonoValue value={workspace.projectWorkspaceId} />
+                ) : (
+                  "None"
+                )}
+              </DetailRow>
+              <DetailRow label="Source issue">
+                {sourceIssue ? (
+                  <Link to={issueUrl(sourceIssue)} className="hover:underline">
+                    {sourceIssue.identifier ?? sourceIssue.id} · {sourceIssue.title}
+                  </Link>
+                ) : workspace.sourceIssueId ? (
+                  <MonoValue value={workspace.sourceIssueId} />
+                ) : (
+                  "None"
+                )}
+              </DetailRow>
+              <DetailRow label="Derived from">
+                {derivedWorkspace ? (
+                  <Link to={`/execution-workspaces/${derivedWorkspace.id}`} className="hover:underline">
+                    {derivedWorkspace.name}
+                  </Link>
+                ) : workspace.derivedFromExecutionWorkspaceId ? (
+                  <MonoValue value={workspace.derivedFromExecutionWorkspaceId} />
+                ) : (
+                  "None"
+                )}
+              </DetailRow>
+              <DetailRow label="Workspace ID">
+                <MonoValue value={workspace.id} />
+              </DetailRow>
             </div>
-            <Separator className="my-4" />
-            {workspace.runtimeServices && workspace.runtimeServices.length > 0 ? (
-              <div className="space-y-3">
-                {workspace.runtimeServices.map((service) => (
-                  <div key={service.id} className="rounded-xl border border-border/80 bg-background px-3 py-2">
-                    <div className="flex items-start justify-between gap-3">
-                      <div className="space-y-1">
-                        <div className="text-sm font-medium">{service.serviceName}</div>
-                        <div className="text-xs text-muted-foreground">{service.status} · {service.lifecycle}</div>
-                        <div className="space-y-1 text-xs text-muted-foreground">
-                          {service.url ? (
-                            <a href={service.url} target="_blank" rel="noreferrer" className="inline-flex items-center gap-1 hover:underline">
-                              {service.url}
-                              <ExternalLink className="h-3.5 w-3.5" />
-                            </a>
-                          ) : null}
-                          {service.port ? <div>Port {service.port}</div> : null}
-                          {service.command ? <MonoValue value={service.command} copy /> : null}
-                          {service.cwd ? <MonoValue value={service.cwd} copy /> : null}
-                        </div>
-                      </div>
-                      <StatusPill>{service.healthStatus}</StatusPill>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            ) : (
-              <p className="text-sm text-muted-foreground">
-                {effectiveRuntimeConfig
-                  ? "No runtime services are currently running for this execution workspace."
-                  : "No runtime config is defined for this execution workspace yet."}
-              </p>
-            )}
-          </div>
 
-          <div className="rounded-2xl border border-border bg-card p-5">
-            <div className="space-y-1">
-              <div className="text-xs font-medium uppercase tracking-[0.16em] text-muted-foreground">Recent operations</div>
-              <h2 className="text-lg font-semibold">Runtime and cleanup logs</h2>
-            </div>
-            <Separator className="my-4" />
-            {workspaceOperationsQuery.isLoading ? (
-              <p className="text-sm text-muted-foreground">Loading workspace operations…</p>
-            ) : workspaceOperationsQuery.error ? (
-              <p className="text-sm text-destructive">
-                {workspaceOperationsQuery.error instanceof Error
-                  ? workspaceOperationsQuery.error.message
-                  : "Failed to load workspace operations."}
-              </p>
-            ) : workspaceOperationsQuery.data && workspaceOperationsQuery.data.length > 0 ? (
-              <div className="space-y-3">
-                {workspaceOperationsQuery.data.slice(0, 6).map((operation) => (
-                  <div key={operation.id} className="rounded-xl border border-border/80 bg-background px-3 py-2">
-                    <div className="flex items-start justify-between gap-3">
-                      <div className="space-y-1">
-                        <div className="text-sm font-medium">{operation.command ?? operation.phase}</div>
-                        <div className="text-xs text-muted-foreground">
-                          {formatDateTime(operation.startedAt)}
-                          {operation.finishedAt ? ` → ${formatDateTime(operation.finishedAt)}` : ""}
-                        </div>
-                        {operation.stderrExcerpt ? (
-                          <div className="whitespace-pre-wrap break-words text-xs text-destructive">{operation.stderrExcerpt}</div>
-                        ) : operation.stdoutExcerpt ? (
-                          <div className="whitespace-pre-wrap break-words text-xs text-muted-foreground">{operation.stdoutExcerpt}</div>
-                        ) : null}
-                      </div>
-                      <StatusPill>{operation.status}</StatusPill>
-                    </div>
-                  </div>
-                ))}
+            <div className="rounded-2xl border border-border bg-card p-5">
+              <div className="space-y-1">
+                <div className="text-xs font-medium uppercase tracking-[0.16em] text-muted-foreground">Paths and refs</div>
+                <h2 className="text-lg font-semibold">Concrete location</h2>
               </div>
-            ) : (
-              <p className="text-sm text-muted-foreground">No workspace operations have been recorded yet.</p>
-            )}
-          </div>
+              <Separator className="my-4" />
+              <DetailRow label="Working dir">
+                {workspace.cwd ? <MonoValue value={workspace.cwd} copy /> : "None"}
+              </DetailRow>
+              <DetailRow label="Provider ref">
+                {workspace.providerRef ? <MonoValue value={workspace.providerRef} copy /> : "None"}
+              </DetailRow>
+              <DetailRow label="Repo URL">
+                {workspace.repoUrl && isSafeExternalUrl(workspace.repoUrl) ? (
+                  <div className="inline-flex max-w-full items-start gap-2">
+                    <a href={workspace.repoUrl} target="_blank" rel="noreferrer" className="inline-flex min-w-0 items-center gap-1 break-all hover:underline">
+                      {workspace.repoUrl}
+                      <ExternalLink className="h-3.5 w-3.5 shrink-0" />
+                    </a>
+                    <CopyText text={workspace.repoUrl} className="shrink-0 text-muted-foreground hover:text-foreground" copiedLabel="Copied">
+                      <Copy className="h-3.5 w-3.5" />
+                    </CopyText>
+                  </div>
+                ) : workspace.repoUrl ? (
+                  <MonoValue value={workspace.repoUrl} copy />
+                ) : (
+                  "None"
+                )}
+              </DetailRow>
+              <DetailRow label="Base ref">
+                {workspace.baseRef ? <MonoValue value={workspace.baseRef} copy /> : "None"}
+              </DetailRow>
+              <DetailRow label="Branch">
+                {workspace.branchName ? <MonoValue value={workspace.branchName} copy /> : "None"}
+              </DetailRow>
+              <DetailRow label="Opened">{formatDateTime(workspace.openedAt)}</DetailRow>
+              <DetailRow label="Last used">{formatDateTime(workspace.lastUsedAt)}</DetailRow>
+              <DetailRow label="Cleanup">
+                {workspace.cleanupEligibleAt
+                  ? `${formatDateTime(workspace.cleanupEligibleAt)}${workspace.cleanupReason ? ` · ${workspace.cleanupReason}` : ""}`
+                  : "Not scheduled"}
+              </DetailRow>
+            </div>
+
+            <div className="rounded-2xl border border-border bg-card p-5">
+              <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+                <div className="space-y-1">
+                  <div className="text-xs font-medium uppercase tracking-[0.16em] text-muted-foreground">Runtime services</div>
+                  <h2 className="text-lg font-semibold">Attached services</h2>
+                  <p className="text-sm text-muted-foreground">
+                    Source: {runtimeConfigSource === "execution_workspace"
+                      ? "execution workspace override"
+                      : runtimeConfigSource === "project_workspace"
+                        ? "project workspace default"
+                        : "none"}
+                  </p>
+                </div>
+                <div className="flex w-full flex-col gap-2 sm:w-auto sm:flex-row sm:flex-wrap">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="w-full sm:w-auto"
+                    disabled={controlRuntimeServices.isPending || !effectiveRuntimeConfig || !workspace.cwd}
+                    onClick={() => controlRuntimeServices.mutate("start")}
+                  >
+                    {controlRuntimeServices.isPending ? <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" /> : null}
+                    Start
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="w-full sm:w-auto"
+                    disabled={controlRuntimeServices.isPending || !effectiveRuntimeConfig || !workspace.cwd}
+                    onClick={() => controlRuntimeServices.mutate("restart")}
+                  >
+                    Restart
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="w-full sm:w-auto"
+                    disabled={controlRuntimeServices.isPending || (workspace.runtimeServices?.length ?? 0) === 0}
+                    onClick={() => controlRuntimeServices.mutate("stop")}
+                  >
+                    Stop
+                  </Button>
+                </div>
+              </div>
+              <Separator className="my-4" />
+              {workspace.runtimeServices && workspace.runtimeServices.length > 0 ? (
+                <div className="space-y-3">
+                  {workspace.runtimeServices.map((service) => (
+                    <div key={service.id} className="rounded-xl border border-border/80 bg-background px-3 py-2">
+                      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+                        <div className="space-y-1">
+                          <div className="text-sm font-medium">{service.serviceName}</div>
+                          <div className="text-xs text-muted-foreground">{service.status} · {service.lifecycle}</div>
+                          <div className="space-y-1 text-xs text-muted-foreground">
+                            {service.url ? (
+                              <a href={service.url} target="_blank" rel="noreferrer" className="inline-flex items-center gap-1 hover:underline">
+                                {service.url}
+                                <ExternalLink className="h-3.5 w-3.5" />
+                              </a>
+                            ) : null}
+                            {service.port ? <div>Port {service.port}</div> : null}
+                            {service.command ? <MonoValue value={service.command} copy /> : null}
+                            {service.cwd ? <MonoValue value={service.cwd} copy /> : null}
+                          </div>
+                        </div>
+                        <StatusPill className="self-start">{service.healthStatus}</StatusPill>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <p className="text-sm text-muted-foreground">
+                  {effectiveRuntimeConfig
+                    ? "No runtime services are currently running for this execution workspace."
+                    : "No runtime config is defined for this execution workspace yet."}
+                </p>
+              )}
+            </div>
+
+            <div className="rounded-2xl border border-border bg-card p-5">
+              <div className="space-y-1">
+                <div className="text-xs font-medium uppercase tracking-[0.16em] text-muted-foreground">Recent operations</div>
+                <h2 className="text-lg font-semibold">Runtime and cleanup logs</h2>
+              </div>
+              <Separator className="my-4" />
+              {workspaceOperationsQuery.isLoading ? (
+                <p className="text-sm text-muted-foreground">Loading workspace operations…</p>
+              ) : workspaceOperationsQuery.error ? (
+                <p className="text-sm text-destructive">
+                  {workspaceOperationsQuery.error instanceof Error
+                    ? workspaceOperationsQuery.error.message
+                    : "Failed to load workspace operations."}
+                </p>
+              ) : workspaceOperationsQuery.data && workspaceOperationsQuery.data.length > 0 ? (
+                <div className="space-y-3">
+                  {workspaceOperationsQuery.data.slice(0, 6).map((operation) => (
+                    <div key={operation.id} className="rounded-xl border border-border/80 bg-background px-3 py-2">
+                      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+                        <div className="space-y-1">
+                          <div className="text-sm font-medium">{operation.command ?? operation.phase}</div>
+                          <div className="text-xs text-muted-foreground">
+                            {formatDateTime(operation.startedAt)}
+                            {operation.finishedAt ? ` → ${formatDateTime(operation.finishedAt)}` : ""}
+                          </div>
+                          {operation.stderrExcerpt ? (
+                            <div className="whitespace-pre-wrap break-words text-xs text-destructive">{operation.stderrExcerpt}</div>
+                          ) : operation.stdoutExcerpt ? (
+                            <div className="whitespace-pre-wrap break-words text-xs text-muted-foreground">{operation.stdoutExcerpt}</div>
+                          ) : null}
+                        </div>
+                        <StatusPill className="self-start">{operation.status}</StatusPill>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <p className="text-sm text-muted-foreground">No workspace operations have been recorded yet.</p>
+              )}
+            </div>
           </div>
         </div>
       </div>
diff --git a/ui/src/pages/ProjectWorkspaceDetail.tsx b/ui/src/pages/ProjectWorkspaceDetail.tsx
index 01b4118fd0f..5831ec825eb 100644
--- a/ui/src/pages/ProjectWorkspaceDetail.tsx
+++ b/ui/src/pages/ProjectWorkspaceDetail.tsx
@@ -186,9 +186,9 @@ function Field({
 }) {
   return (
     <label className="space-y-1.5">
-      <div className="flex items-center justify-between gap-3">
+      <div className="flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between sm:gap-3">
         <span className="text-xs font-medium uppercase tracking-[0.16em] text-muted-foreground">{label}</span>
-        {hint ? <span className="text-[11px] text-muted-foreground">{hint}</span> : null}
+        {hint ? <span className="text-[11px] leading-relaxed text-muted-foreground sm:text-right">{hint}</span> : null}
       </div>
       {children}
     </label>
@@ -197,8 +197,8 @@ function Field({
 
 function DetailRow({ label, children }: { label: string; children: React.ReactNode }) {
   return (
-    <div className="flex items-start gap-3 py-1.5">
-      <div className="w-28 shrink-0 text-xs text-muted-foreground">{label}</div>
+    <div className="flex flex-col gap-1.5 py-1.5 sm:flex-row sm:items-start sm:gap-3">
+      <div className="shrink-0 text-xs text-muted-foreground sm:w-28">{label}</div>
       <div className="min-w-0 flex-1 text-sm">{children}</div>
     </div>
   );
@@ -364,7 +364,7 @@ export function ProjectWorkspaceDetail() {
       <div className="grid gap-6 lg:grid-cols-[minmax(0,1.4fr)_minmax(18rem,0.9fr)]">
         <div className="space-y-6">
           <div className="rounded-2xl border border-border bg-card p-5">
-            <div className="flex flex-wrap items-start justify-between gap-4">
+            <div className="flex flex-col gap-4 sm:flex-row sm:flex-wrap sm:items-start sm:justify-between">
               <div className="space-y-2">
                 <div className="text-xs font-medium uppercase tracking-[0.16em] text-muted-foreground">
                   Project workspace
@@ -379,6 +379,7 @@ export function ProjectWorkspaceDetail() {
               {!workspace.isPrimary ? (
                 <Button
                   variant="outline"
+                  className="w-full sm:w-auto"
                   disabled={setPrimaryWorkspace.isPending}
                   onClick={() => setPrimaryWorkspace.mutate()}
                 >
@@ -388,7 +389,7 @@ export function ProjectWorkspaceDetail() {
                   Make primary
                 </Button>
               ) : (
-                <div className="inline-flex items-center gap-2 rounded-xl border border-emerald-500/25 bg-emerald-500/10 px-3 py-2 text-sm text-emerald-700 dark:text-emerald-300">
+                <div className="inline-flex items-center gap-2 rounded-xl border border-emerald-500/25 bg-emerald-500/10 px-3 py-2 text-sm text-emerald-700 dark:text-emerald-300 sm:max-w-sm">
                   <Sparkles className="h-4 w-4" />
                   This is the project’s primary codebase workspace.
                 </div>
@@ -537,13 +538,14 @@ export function ProjectWorkspaceDetail() {
               </Field>
             </div>
 
-            <div className="mt-5 flex flex-wrap items-center gap-3">
-              <Button disabled={!isDirty || updateWorkspace.isPending} onClick={saveChanges}>
+            <div className="mt-5 flex flex-col items-stretch gap-3 sm:flex-row sm:flex-wrap sm:items-center">
+              <Button className="w-full sm:w-auto" disabled={!isDirty || updateWorkspace.isPending} onClick={saveChanges}>
                 {updateWorkspace.isPending ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
                 Save changes
               </Button>
               <Button
                 variant="outline"
+                className="w-full sm:w-auto"
                 disabled={!isDirty || updateWorkspace.isPending}
                 onClick={() => {
                   setForm(initialState);
@@ -590,18 +592,19 @@ export function ProjectWorkspaceDetail() {
           </div>
 
           <div className="rounded-2xl border border-border bg-card p-5">
-            <div className="flex items-start justify-between gap-3">
+            <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
               <div className="space-y-1">
-              <div className="text-xs font-medium uppercase tracking-[0.16em] text-muted-foreground">Runtime services</div>
-              <h2 className="text-lg font-semibold">Attached services</h2>
+                <div className="text-xs font-medium uppercase tracking-[0.16em] text-muted-foreground">Runtime services</div>
+                <h2 className="text-lg font-semibold">Attached services</h2>
                 <p className="text-sm text-muted-foreground">
                   Shared services for this project workspace. Execution workspaces inherit this config unless they override it.
                 </p>
               </div>
-              <div className="flex shrink-0 flex-wrap gap-2">
+              <div className="flex w-full flex-col gap-2 sm:w-auto sm:flex-row sm:flex-wrap">
                 <Button
                   variant="outline"
                   size="sm"
+                  className="w-full sm:w-auto"
                   disabled={controlRuntimeServices.isPending || !workspace.runtimeConfig?.workspaceRuntime || !workspace.cwd}
                   onClick={() => controlRuntimeServices.mutate("start")}
                 >
@@ -611,6 +614,7 @@ export function ProjectWorkspaceDetail() {
                 <Button
                   variant="outline"
                   size="sm"
+                  className="w-full sm:w-auto"
                   disabled={controlRuntimeServices.isPending || !workspace.cwd}
                   onClick={() => controlRuntimeServices.mutate("restart")}
                 >
@@ -619,6 +623,7 @@ export function ProjectWorkspaceDetail() {
                 <Button
                   variant="outline"
                   size="sm"
+                  className="w-full sm:w-auto"
                   disabled={controlRuntimeServices.isPending || (workspace.runtimeServices?.length ?? 0) === 0}
                   onClick={() => controlRuntimeServices.mutate("stop")}
                 >
@@ -631,7 +636,7 @@ export function ProjectWorkspaceDetail() {
               <div className="space-y-3">
                 {workspace.runtimeServices.map((service) => (
                   <div key={service.id} className="rounded-xl border border-border/80 bg-background px-3 py-2">
-                    <div className="flex items-start justify-between gap-3">
+                    <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
                       <div className="space-y-1">
                         <div className="text-sm font-medium">{service.serviceName}</div>
                         <div className="space-y-1 text-xs text-muted-foreground">
@@ -646,7 +651,7 @@ export function ProjectWorkspaceDetail() {
                           {service.cwd ? <div className="break-all font-mono">{service.cwd}</div> : null}
                         </div>
                       </div>
-                      <div className="text-[11px] uppercase tracking-[0.14em] text-muted-foreground">
+                      <div className="text-[11px] uppercase tracking-[0.14em] text-muted-foreground sm:text-right">
                         {service.status} · {service.healthStatus}
                       </div>
                     </div>