From 33d549db136b95ec260ead1d0d2533215cd48543 Mon Sep 17 00:00:00 2001
From: Forgotten <forgottenrunes@protonmail.com>
Date: Wed, 25 Feb 2026 21:36:06 -0600
Subject: [PATCH] feat(ui): mobile UX improvements, comment attachments, and
 cost breakdown

Add PWA meta tags for iOS home screen. Fix mobile properties drawer with safe
area insets. Add image attachment button to comment thread. Improve sidebar
with collapsible sections, project grouping, and mobile bottom nav. Show
token and billing type breakdown on costs page. Fix inbox loading state to
show content progressively. Various mobile overflow and layout fixes.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 ui/index.html                           |   3 +
 ui/src/components/CommentThread.tsx     |  47 +++-
 ui/src/components/InlineEditor.tsx      |  34 ++-
 ui/src/components/IssueProperties.tsx   |   6 +-
 ui/src/components/IssuesList.tsx        | 148 ++++++------
 ui/src/components/Layout.tsx            |  20 +-
 ui/src/components/LiveRunWidget.tsx     |  65 ++++--
 ui/src/components/MobileBottomNav.tsx   |   4 +-
 ui/src/components/NewIssueDialog.tsx    |  36 ++-
 ui/src/components/NewProjectDialog.tsx  | 207 +++++++++++++++--
 ui/src/components/ProjectProperties.tsx | 296 ++++++++++++++++++------
 ui/src/components/Sidebar.tsx           |   2 +-
 ui/src/index.css                        |   5 +
 ui/src/pages/Costs.tsx                  |  22 +-
 ui/src/pages/Inbox.tsx                  |  19 +-
 ui/src/pages/IssueDetail.tsx            |   2 +-
 16 files changed, 688 insertions(+), 228 deletions(-)

diff --git a/ui/index.html b/ui/index.html
index 3a033cb4..906158e4 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -4,6 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
     <meta name="theme-color" content="#18181b" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <meta name="apple-mobile-web-app-title" content="Paperclip" />
     <title>Paperclip</title>
     <link rel="icon" href="/favicon.ico" sizes="48x48" />
     <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
diff --git a/ui/src/components/CommentThread.tsx b/ui/src/components/CommentThread.tsx
index 6931a1f4..70c64d66 100644
--- a/ui/src/components/CommentThread.tsx
+++ b/ui/src/components/CommentThread.tsx
@@ -1,7 +1,8 @@
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState, type ChangeEvent } from "react";
 import { Link } from "react-router-dom";
 import type { IssueComment, Agent } from "@paperclip/shared";
 import { Button } from "@/components/ui/button";
+import { Paperclip } from "lucide-react";
 import { Identity } from "./Identity";
 import { MarkdownBody } from "./MarkdownBody";
 import { MarkdownEditor, type MarkdownEditorRef, type MentionOption } from "./MarkdownEditor";
@@ -18,7 +19,10 @@ interface CommentThreadProps {
   issueStatus?: string;
   agentMap?: Map<string, Agent>;
   imageUploadHandler?: (file: File) => Promise<string>;
+  /** Callback to attach an image file to the parent issue (not inline in a comment). */
+  onAttachImage?: (file: File) => Promise<void>;
   draftKey?: string;
+  liveRunSlot?: React.ReactNode;
 }
 
 const CLOSED_STATUSES = new Set(["done", "cancelled"]);
@@ -52,11 +56,13 @@ function clearDraft(draftKey: string) {
   }
 }
 
-export function CommentThread({ comments, onAdd, issueStatus, agentMap, imageUploadHandler, draftKey }: CommentThreadProps) {
+export function CommentThread({ comments, onAdd, issueStatus, agentMap, imageUploadHandler, onAttachImage, draftKey, liveRunSlot }: CommentThreadProps) {
   const [body, setBody] = useState("");
   const [reopen, setReopen] = useState(true);
   const [submitting, setSubmitting] = useState(false);
+  const [attaching, setAttaching] = useState(false);
   const editorRef = useRef<MarkdownEditorRef>(null);
+  const attachInputRef = useRef<HTMLInputElement | null>(null);
   const draftTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const isClosed = issueStatus ? CLOSED_STATUSES.has(issueStatus) : false;
@@ -112,6 +118,18 @@ export function CommentThread({ comments, onAdd, issueStatus, agentMap, imageUpl
     }
   }
 
+  async function handleAttachFile(evt: ChangeEvent<HTMLInputElement>) {
+    const file = evt.target.files?.[0];
+    if (!file || !onAttachImage) return;
+    setAttaching(true);
+    try {
+      await onAttachImage(file);
+    } finally {
+      setAttaching(false);
+      if (attachInputRef.current) attachInputRef.current.value = "";
+    }
+  }
+
   return (
     <div className="space-y-4">
       <h3 className="text-sm font-semibold">Comments ({comments.length})</h3>
@@ -122,7 +140,7 @@ export function CommentThread({ comments, onAdd, issueStatus, agentMap, imageUpl
 
       <div className="space-y-3">
         {sorted.map((comment) => (
-          <div key={comment.id} className="border border-border p-3">
+          <div key={comment.id} className="border border-border p-3 overflow-hidden min-w-0">
             <div className="flex items-center justify-between mb-1">
               {comment.authorAgentId ? (
                 <Link to={`/agents/${comment.authorAgentId}`} className="hover:underline">
@@ -153,6 +171,8 @@ export function CommentThread({ comments, onAdd, issueStatus, agentMap, imageUpl
         ))}
       </div>
 
+      {liveRunSlot}
+
       <div className="space-y-2">
         <MarkdownEditor
           ref={editorRef}
@@ -165,6 +185,27 @@ export function CommentThread({ comments, onAdd, issueStatus, agentMap, imageUpl
           contentClassName="min-h-[60px] text-sm"
         />
         <div className="flex items-center justify-end gap-3">
+          {onAttachImage && (
+            <>
+              <input
+                ref={attachInputRef}
+                type="file"
+                accept="image/png,image/jpeg,image/webp,image/gif"
+                className="hidden"
+                onChange={handleAttachFile}
+              />
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                className="mr-auto"
+                onClick={() => attachInputRef.current?.click()}
+                disabled={attaching}
+                title="Attach image"
+              >
+                <Paperclip className="h-4 w-4" />
+              </Button>
+            </>
+          )}
           {isClosed && (
             <label className="flex items-center gap-1.5 text-xs text-muted-foreground cursor-pointer select-none">
               <input
diff --git a/ui/src/components/InlineEditor.tsx b/ui/src/components/InlineEditor.tsx
index 7b9bab0d..e9592583 100644
--- a/ui/src/components/InlineEditor.tsx
+++ b/ui/src/components/InlineEditor.tsx
@@ -28,7 +28,7 @@ export function InlineEditor({
 }: InlineEditorProps) {
   const [editing, setEditing] = useState(false);
   const [draft, setDraft] = useState(value);
-  const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
 
   useEffect(() => {
     setDraft(value);
@@ -44,11 +44,11 @@ export function InlineEditor({
     if (editing && inputRef.current) {
       inputRef.current.focus();
       inputRef.current.select();
-      if (multiline && inputRef.current instanceof HTMLTextAreaElement) {
+      if (inputRef.current instanceof HTMLTextAreaElement) {
         autoSize(inputRef.current);
       }
     }
-  }, [editing, multiline, autoSize]);
+  }, [editing, autoSize]);
 
   function commit() {
     const trimmed = draft.trim();
@@ -101,25 +101,19 @@ export function InlineEditor({
       );
     }
 
-    const sharedProps = {
-      ref: inputRef as any,
-      value: draft,
-      onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-        setDraft(e.target.value);
-        if (multiline && e.target instanceof HTMLTextAreaElement) {
-          autoSize(e.target);
-        }
-      },
-      onBlur: commit,
-      onKeyDown: handleKeyDown,
-    };
-
     return (
-      <input
-        type="text"
-        {...sharedProps}
+      <textarea
+        ref={inputRef}
+        value={draft}
+        rows={1}
+        onChange={(e) => {
+          setDraft(e.target.value);
+          autoSize(e.target);
+        }}
+        onBlur={commit}
+        onKeyDown={handleKeyDown}
         className={cn(
-          "w-full bg-transparent rounded outline-none",
+          "w-full bg-transparent rounded outline-none resize-none overflow-hidden",
           pad,
           className
         )}
diff --git a/ui/src/components/IssueProperties.tsx b/ui/src/components/IssueProperties.tsx
index 1c369ab8..ecea6994 100644
--- a/ui/src/components/IssueProperties.tsx
+++ b/ui/src/components/IssueProperties.tsx
@@ -154,7 +154,7 @@ export function IssueProperties({ issue, onUpdate }: IssuePropertiesProps) {
                 )}
               </button>
             </PopoverTrigger>
-            <PopoverContent className="w-64 p-1" align="end">
+            <PopoverContent className="w-64 p-1" align="end" collisionPadding={16}>
               <input
                 className="w-full px-2 py-1.5 text-xs bg-transparent outline-none border-b border-border mb-1 placeholder:text-muted-foreground/50"
                 placeholder="Search labels..."
@@ -241,7 +241,7 @@ export function IssueProperties({ issue, onUpdate }: IssuePropertiesProps) {
                 )}
               </button>
             </PopoverTrigger>
-            <PopoverContent className="w-52 p-1" align="end">
+            <PopoverContent className="w-52 p-1" align="end" collisionPadding={16}>
               <input
                 className="w-full px-2 py-1.5 text-xs bg-transparent outline-none border-b border-border mb-1 placeholder:text-muted-foreground/50"
                 placeholder="Search agents..."
@@ -313,7 +313,7 @@ export function IssueProperties({ issue, onUpdate }: IssuePropertiesProps) {
                 )}
               </button>
             </PopoverTrigger>
-            <PopoverContent className="w-fit min-w-[11rem] p-1" align="end">
+            <PopoverContent className="w-fit min-w-[11rem] p-1" align="end" collisionPadding={16}>
               <input
                 className="w-full px-2 py-1.5 text-xs bg-transparent outline-none border-b border-border mb-1 placeholder:text-muted-foreground/50"
                 placeholder="Search projects..."
diff --git a/ui/src/components/IssuesList.tsx b/ui/src/components/IssuesList.tsx
index f4f826d2..f71f4fd0 100644
--- a/ui/src/components/IssuesList.tsx
+++ b/ui/src/components/IssuesList.tsx
@@ -499,7 +499,7 @@ export function IssuesList({
         groupedContent.map((group) => (
           <Collapsible key={group.key} defaultOpen>
             {group.label && (
-              <div className="flex items-center py-1.5 pl-1">
+              <div className="flex items-center py-1.5 pl-1 pr-3">
                 <CollapsibleTrigger className="flex items-center gap-1.5">
                   <ChevronRight className="h-3.5 w-3.5 shrink-0 text-muted-foreground transition-transform [[data-state=open]>&]:rotate-90" />
                   <span className="text-sm font-semibold uppercase tracking-wide">
@@ -523,8 +523,8 @@ export function IssuesList({
                   to={`/issues/${issue.identifier ?? issue.id}`}
                   className="flex items-center gap-2 py-2 pl-1 pr-3 text-sm border-b border-border last:border-b-0 cursor-pointer hover:bg-accent/50 transition-colors no-underline text-inherit"
                 >
-                  {/* Spacer matching caret width so status icon aligns with group title */}
-                  <div className="w-3.5 shrink-0" />
+                  {/* Spacer matching caret width so status icon aligns with group title (hidden on mobile) */}
+                  <div className="w-3.5 shrink-0 hidden sm:block" />
                   <div className="shrink-0" onClick={(e) => { e.preventDefault(); e.stopPropagation(); }}>
                     <StatusIcon
                       status={issue.status}
@@ -556,84 +556,86 @@ export function IssuesList({
                     </div>
                   )}
                   <div className="flex items-center gap-2 sm:gap-3 shrink-0 ml-auto">
-                    <Popover
-                      open={assigneePickerIssueId === issue.id}
-                      onOpenChange={(open) => {
-                        setAssigneePickerIssueId(open ? issue.id : null);
-                        if (!open) setAssigneeSearch("");
-                      }}
-                    >
-                      <PopoverTrigger asChild>
-                        <button
-                          className="flex w-[180px] shrink-0 items-center rounded-md px-2 py-1 hover:bg-accent/50 transition-colors"
-                          onClick={(e) => {
-                            e.preventDefault();
-                            e.stopPropagation();
-                          }}
-                        >
-                          {issue.assigneeAgentId && agentName(issue.assigneeAgentId) ? (
-                            <Identity name={agentName(issue.assigneeAgentId)!} size="sm" />
-                          ) : (
-                            <span className="inline-flex items-center gap-1.5 text-xs text-muted-foreground">
-                              <span className="inline-flex h-5 w-5 items-center justify-center rounded-full border border-dashed border-muted-foreground/35 bg-muted/30">
-                                <User className="h-3 w-3" />
-                              </span>
-                              Assignee
-                            </span>
-                          )}
-                        </button>
-                      </PopoverTrigger>
-                      <PopoverContent
-                        className="w-56 p-1"
-                        align="end"
-                        onClick={(e) => e.stopPropagation()}
-                        onPointerDownOutside={() => setAssigneeSearch("")}
+                    <div className="hidden sm:block">
+                      <Popover
+                        open={assigneePickerIssueId === issue.id}
+                        onOpenChange={(open) => {
+                          setAssigneePickerIssueId(open ? issue.id : null);
+                          if (!open) setAssigneeSearch("");
+                        }}
                       >
-                        <input
-                          className="w-full px-2 py-1.5 text-xs bg-transparent outline-none border-b border-border mb-1 placeholder:text-muted-foreground/50"
-                          placeholder="Search agents..."
-                          value={assigneeSearch}
-                          onChange={(e) => setAssigneeSearch(e.target.value)}
-                          autoFocus
-                        />
-                        <div className="max-h-48 overflow-y-auto overscroll-contain">
+                        <PopoverTrigger asChild>
                           <button
-                            className={cn(
-                              "flex items-center gap-2 w-full px-2 py-1.5 text-xs rounded hover:bg-accent/50",
-                              !issue.assigneeAgentId && "bg-accent"
-                            )}
+                            className="flex w-[180px] shrink-0 items-center rounded-md px-2 py-1 hover:bg-accent/50 transition-colors"
                             onClick={(e) => {
                               e.preventDefault();
                               e.stopPropagation();
-                              assignIssue(issue.id, null);
                             }}
                           >
-                            No assignee
+                            {issue.assigneeAgentId && agentName(issue.assigneeAgentId) ? (
+                              <Identity name={agentName(issue.assigneeAgentId)!} size="sm" />
+                            ) : (
+                              <span className="inline-flex items-center gap-1.5 text-xs text-muted-foreground">
+                                <span className="inline-flex h-5 w-5 items-center justify-center rounded-full border border-dashed border-muted-foreground/35 bg-muted/30">
+                                  <User className="h-3 w-3" />
+                                </span>
+                                Assignee
+                              </span>
+                            )}
                           </button>
-                          {(agents ?? [])
-                            .filter((agent) => {
-                              if (!assigneeSearch.trim()) return true;
-                              return agent.name.toLowerCase().includes(assigneeSearch.toLowerCase());
-                            })
-                            .map((agent) => (
-                              <button
-                                key={agent.id}
-                                className={cn(
-                                  "flex items-center gap-2 w-full px-2 py-1.5 text-xs rounded hover:bg-accent/50 text-left",
-                                  issue.assigneeAgentId === agent.id && "bg-accent"
-                                )}
-                                onClick={(e) => {
-                                  e.preventDefault();
-                                  e.stopPropagation();
-                                  assignIssue(issue.id, agent.id);
-                                }}
-                              >
-                                <Identity name={agent.name} size="sm" className="min-w-0" />
-                              </button>
-                            ))}
-                        </div>
-                      </PopoverContent>
-                    </Popover>
+                        </PopoverTrigger>
+                        <PopoverContent
+                          className="w-56 p-1"
+                          align="end"
+                          onClick={(e) => e.stopPropagation()}
+                          onPointerDownOutside={() => setAssigneeSearch("")}
+                        >
+                          <input
+                            className="w-full px-2 py-1.5 text-xs bg-transparent outline-none border-b border-border mb-1 placeholder:text-muted-foreground/50"
+                            placeholder="Search agents..."
+                            value={assigneeSearch}
+                            onChange={(e) => setAssigneeSearch(e.target.value)}
+                            autoFocus
+                          />
+                          <div className="max-h-48 overflow-y-auto overscroll-contain">
+                            <button
+                              className={cn(
+                                "flex items-center gap-2 w-full px-2 py-1.5 text-xs rounded hover:bg-accent/50",
+                                !issue.assigneeAgentId && "bg-accent"
+                              )}
+                              onClick={(e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                assignIssue(issue.id, null);
+                              }}
+                            >
+                              No assignee
+                            </button>
+                            {(agents ?? [])
+                              .filter((agent) => {
+                                if (!assigneeSearch.trim()) return true;
+                                return agent.name.toLowerCase().includes(assigneeSearch.toLowerCase());
+                              })
+                              .map((agent) => (
+                                <button
+                                  key={agent.id}
+                                  className={cn(
+                                    "flex items-center gap-2 w-full px-2 py-1.5 text-xs rounded hover:bg-accent/50 text-left",
+                                    issue.assigneeAgentId === agent.id && "bg-accent"
+                                  )}
+                                  onClick={(e) => {
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                    assignIssue(issue.id, agent.id);
+                                  }}
+                                >
+                                  <Identity name={agent.name} size="sm" className="min-w-0" />
+                                </button>
+                              ))}
+                          </div>
+                        </PopoverContent>
+                      </Popover>
+                    </div>
                     {liveIssueIds?.has(issue.id) && (
                       <span className="inline-flex items-center gap-1 sm:gap-1.5 px-1.5 sm:px-2 py-0.5 rounded-full bg-blue-500/10">
                         <span className="relative flex h-2 w-2">
diff --git a/ui/src/components/Layout.tsx b/ui/src/components/Layout.tsx
index d36062d0..53c8f14c 100644
--- a/ui/src/components/Layout.tsx
+++ b/ui/src/components/Layout.tsx
@@ -101,7 +101,7 @@ export function Layout() {
   );
 
   return (
-    <div className="flex h-screen bg-background text-foreground overflow-hidden pt-[env(safe-area-inset-top)]">
+    <div className="flex h-dvh bg-background text-foreground overflow-hidden pt-[env(safe-area-inset-top)]">
       {/* Mobile backdrop */}
       {isMobile && sidebarOpen && (
         <div
@@ -114,18 +114,16 @@ export function Layout() {
       {isMobile ? (
         <div
           className={cn(
-            "fixed inset-y-0 left-0 z-50 flex pt-[env(safe-area-inset-top)] transition-transform duration-200 ease-in-out",
+            "fixed inset-y-0 left-0 z-50 flex flex-col overflow-hidden pt-[env(safe-area-inset-top)] transition-transform duration-200 ease-in-out",
             sidebarOpen ? "translate-x-0" : "-translate-x-full"
           )}
         >
-          <div className="flex flex-col h-full">
-            <div className="flex flex-1 min-h-0">
-              <CompanyRail />
-              <Sidebar />
-            </div>
-            <div className="border-t border-r border-border px-3 py-2 bg-background">
-              <SidebarNavItem to="/docs" label="Documentation" icon={BookOpen} />
-            </div>
+          <div className="flex flex-1 min-h-0 overflow-hidden">
+            <CompanyRail />
+            <Sidebar />
+          </div>
+          <div className="border-t border-r border-border px-3 py-2 bg-background">
+            <SidebarNavItem to="/docs" label="Documentation" icon={BookOpen} />
           </div>
         </div>
       ) : (
@@ -152,7 +150,7 @@ export function Layout() {
         <BreadcrumbBar />
         <div className="flex flex-1 min-h-0">
           <main
-            className={cn("flex-1 overflow-auto p-4 md:p-6", isMobile && "pb-24")}
+            className={cn("flex-1 overflow-auto p-4 md:p-6", isMobile && "pb-[calc(5rem+env(safe-area-inset-bottom))]")}
             onScroll={handleMainScroll}
           >
             <Outlet />
diff --git a/ui/src/components/LiveRunWidget.tsx b/ui/src/components/LiveRunWidget.tsx
index 819c2ad1..32411e1f 100644
--- a/ui/src/components/LiveRunWidget.tsx
+++ b/ui/src/components/LiveRunWidget.tsx
@@ -1,13 +1,13 @@
 import { useEffect, useMemo, useRef, useState, type MutableRefObject } from "react";
 import { Link } from "react-router-dom";
-import { useQuery } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import type { LiveEvent } from "@paperclip/shared";
 import { heartbeatsApi, type LiveRunForIssue } from "../api/heartbeats";
 import { getUIAdapter } from "../adapters";
 import type { TranscriptEntry } from "../adapters";
 import { queryKeys } from "../lib/queryKeys";
 import { cn, relativeTime } from "../lib/utils";
-import { ExternalLink } from "lucide-react";
+import { ExternalLink, Square } from "lucide-react";
 import { Identity } from "./Identity";
 
 interface LiveRunWidgetProps {
@@ -142,13 +142,29 @@ function parseStderrChunk(
 }
 
 export function LiveRunWidget({ issueId, companyId }: LiveRunWidgetProps) {
+  const queryClient = useQueryClient();
   const [feed, setFeed] = useState<FeedItem[]>([]);
+  const [cancellingRunIds, setCancellingRunIds] = useState(new Set<string>());
   const seenKeysRef = useRef(new Set<string>());
   const pendingByRunRef = useRef(new Map<string, string>());
   const runMetaByIdRef = useRef(new Map<string, { agentId: string; agentName: string }>());
   const nextIdRef = useRef(1);
   const bodyRef = useRef<HTMLDivElement>(null);
 
+  const handleCancelRun = async (runId: string) => {
+    setCancellingRunIds((prev) => new Set(prev).add(runId));
+    try {
+      await heartbeatsApi.cancel(runId);
+      queryClient.invalidateQueries({ queryKey: queryKeys.issues.liveRuns(issueId) });
+    } finally {
+      setCancellingRunIds((prev) => {
+        const next = new Set(prev);
+        next.delete(runId);
+        return next;
+      });
+    }
+  };
+
   const { data: liveRuns } = useQuery({
     queryKey: queryKeys.issues.liveRuns(issueId),
     queryFn: () => heartbeatsApi.liveRunsForIssue(issueId),
@@ -323,13 +339,25 @@ export function LiveRunWidget({ issueId, companyId }: LiveRunWidgetProps) {
           </span>
         </div>
         {headerRun && (
-          <Link
-            to={`/agents/${headerRun.agentId}/runs/${headerRun.id}`}
-            className="inline-flex items-center gap-1 text-[10px] text-cyan-300 hover:text-cyan-200"
-          >
-            Open run
-            <ExternalLink className="h-2.5 w-2.5" />
-          </Link>
+          <div className="flex items-center gap-2">
+            {runs.length > 0 && (
+              <button
+                onClick={() => handleCancelRun(headerRun.id)}
+                disabled={cancellingRunIds.has(headerRun.id)}
+                className="inline-flex items-center gap-1 text-[10px] text-red-400 hover:text-red-300 disabled:opacity-50"
+              >
+                <Square className="h-2 w-2" fill="currentColor" />
+                {cancellingRunIds.has(headerRun.id) ? "Stopping…" : "Stop"}
+              </button>
+            )}
+            <Link
+              to={`/agents/${headerRun.agentId}/runs/${headerRun.id}`}
+              className="inline-flex items-center gap-1 text-[10px] text-cyan-300 hover:text-cyan-200"
+            >
+              Open run
+              <ExternalLink className="h-2.5 w-2.5" />
+            </Link>
+          </div>
         )}
       </div>
 
@@ -362,17 +390,18 @@ export function LiveRunWidget({ issueId, companyId }: LiveRunWidgetProps) {
         ))}
       </div>
 
-      {runs.length > 0 && (
+      {runs.length > 1 && (
         <div className="border-t border-border/50 px-3 py-2 flex flex-wrap gap-2">
           {runs.map((run) => (
-            <Link
-              key={run.id}
-              to={`/agents/${run.agentId}/runs/${run.id}`}
-              className="inline-flex items-center gap-1 text-[10px] text-cyan-300 hover:text-cyan-200"
-            >
-              <Identity name={run.agentName} size="sm" /> {run.id.slice(0, 8)}
-              <ExternalLink className="h-2.5 w-2.5" />
-            </Link>
+            <div key={run.id} className="inline-flex items-center gap-1.5">
+              <Link
+                to={`/agents/${run.agentId}/runs/${run.id}`}
+                className="inline-flex items-center gap-1 text-[10px] text-cyan-300 hover:text-cyan-200"
+              >
+                <Identity name={run.agentName} size="sm" /> {run.id.slice(0, 8)}
+                <ExternalLink className="h-2.5 w-2.5" />
+              </Link>
+            </div>
           ))}
         </div>
       )}
diff --git a/ui/src/components/MobileBottomNav.tsx b/ui/src/components/MobileBottomNav.tsx
index 3234be60..61091d30 100644
--- a/ui/src/components/MobileBottomNav.tsx
+++ b/ui/src/components/MobileBottomNav.tsx
@@ -66,12 +66,12 @@ export function MobileBottomNav({ visible }: MobileBottomNavProps) {
   return (
     <nav
       className={cn(
-        "fixed bottom-0 left-0 right-0 z-30 border-t border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/85 transition-transform duration-200 ease-out md:hidden",
+        "fixed bottom-0 left-0 right-0 z-30 border-t border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/85 transition-transform duration-200 ease-out md:hidden pb-[env(safe-area-inset-bottom)]",
         visible ? "translate-y-0" : "translate-y-full",
       )}
       aria-label="Mobile navigation"
     >
-      <div className="grid h-16 grid-cols-5 px-1 pb-[env(safe-area-inset-bottom)]">
+      <div className="grid h-16 grid-cols-5 px-1">
         {items.map((item) => {
           if (item.type === "action") {
             const Icon = item.icon;
diff --git a/ui/src/components/NewIssueDialog.tsx b/ui/src/components/NewIssueDialog.tsx
index 92256e30..f651fcb0 100644
--- a/ui/src/components/NewIssueDialog.tsx
+++ b/ui/src/components/NewIssueDialog.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef, useCallback } from "react";
+import { useState, useEffect, useRef, useCallback, type ChangeEvent } from "react";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { useDialog } from "../context/DialogContext";
 import { useCompany } from "../context/CompanyContext";
@@ -31,6 +31,7 @@ import {
   Hexagon,
   Tag,
   Calendar,
+  Paperclip,
 } from "lucide-react";
 import { cn } from "../lib/utils";
 import { issueStatusText, issueStatusTextDefault, priorityColor, priorityColorDefault } from "../lib/status-colors";
@@ -105,6 +106,7 @@ export function NewIssueDialog() {
   const [projectOpen, setProjectOpen] = useState(false);
   const [moreOpen, setMoreOpen] = useState(false);
   const descriptionEditorRef = useRef<MarkdownEditorRef>(null);
+  const attachInputRef = useRef<HTMLInputElement | null>(null);
 
   const { data: agents } = useQuery({
     queryKey: queryKeys.agents.list(selectedCompanyId!),
@@ -223,6 +225,21 @@ export function NewIssueDialog() {
     }
   }
 
+  async function handleAttachImage(evt: ChangeEvent<HTMLInputElement>) {
+    const file = evt.target.files?.[0];
+    if (!file) return;
+    try {
+      const asset = await uploadDescriptionImage.mutateAsync(file);
+      const name = file.name || "image";
+      setDescription((prev) => {
+        const suffix = `![${name}](${asset.contentPath})`;
+        return prev ? `${prev}\n\n${suffix}` : suffix;
+      });
+    } finally {
+      if (attachInputRef.current) attachInputRef.current.value = "";
+    }
+  }
+
   const hasDraft = title.trim().length > 0 || description.trim().length > 0;
   const currentStatus = statuses.find((s) => s.value === status) ?? statuses[1]!;
   const currentPriority = priorities.find((p) => p.value === priority);
@@ -488,6 +505,23 @@ export function NewIssueDialog() {
             Labels
           </button>
 
+          {/* Attach image chip */}
+          <input
+            ref={attachInputRef}
+            type="file"
+            accept="image/png,image/jpeg,image/webp,image/gif"
+            className="hidden"
+            onChange={handleAttachImage}
+          />
+          <button
+            className="inline-flex items-center gap-1.5 rounded-md border border-border px-2 py-1 text-xs hover:bg-accent/50 transition-colors text-muted-foreground"
+            onClick={() => attachInputRef.current?.click()}
+            disabled={uploadDescriptionImage.isPending}
+          >
+            <Paperclip className="h-3 w-3" />
+            {uploadDescriptionImage.isPending ? "Uploading..." : "Image"}
+          </button>
+
           {/* More (dates) */}
           <Popover open={moreOpen} onOpenChange={setMoreOpen}>
             <PopoverTrigger asChild>
diff --git a/ui/src/components/NewProjectDialog.tsx b/ui/src/components/NewProjectDialog.tsx
index 399af6f8..1ba5e5d6 100644
--- a/ui/src/components/NewProjectDialog.tsx
+++ b/ui/src/components/NewProjectDialog.tsx
@@ -23,6 +23,9 @@ import {
   Calendar,
   Plus,
   X,
+  FolderOpen,
+  Github,
+  GitBranch,
 } from "lucide-react";
 import { PROJECT_COLORS } from "@paperclip/shared";
 import { cn } from "../lib/utils";
@@ -37,6 +40,9 @@ const projectStatuses = [
   { value: "cancelled", label: "Cancelled" },
 ];
 
+type WorkspaceSetup = "none" | "local" | "repo" | "both";
+const REPO_ONLY_CWD_SENTINEL = "/__paperclip_repo_only__";
+
 export function NewProjectDialog() {
   const { newProjectOpen, closeNewProject } = useDialog();
   const { selectedCompanyId, selectedCompany } = useCompany();
@@ -47,6 +53,10 @@ export function NewProjectDialog() {
   const [goalIds, setGoalIds] = useState<string[]>([]);
   const [targetDate, setTargetDate] = useState("");
   const [expanded, setExpanded] = useState(false);
+  const [workspaceSetup, setWorkspaceSetup] = useState<WorkspaceSetup>("none");
+  const [workspaceLocalPath, setWorkspaceLocalPath] = useState("");
+  const [workspaceRepoUrl, setWorkspaceRepoUrl] = useState("");
+  const [workspaceError, setWorkspaceError] = useState<string | null>(null);
 
   const [statusOpen, setStatusOpen] = useState(false);
   const [goalOpen, setGoalOpen] = useState(false);
@@ -61,11 +71,6 @@ export function NewProjectDialog() {
   const createProject = useMutation({
     mutationFn: (data: Record<string, unknown>) =>
       projectsApi.create(selectedCompanyId!, data),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: queryKeys.projects.list(selectedCompanyId!) });
-      reset();
-      closeNewProject();
-    },
   });
 
   const uploadDescriptionImage = useMutation({
@@ -82,18 +87,108 @@ export function NewProjectDialog() {
     setGoalIds([]);
     setTargetDate("");
     setExpanded(false);
+    setWorkspaceSetup("none");
+    setWorkspaceLocalPath("");
+    setWorkspaceRepoUrl("");
+    setWorkspaceError(null);
   }
 
-  function handleSubmit() {
+  const isAbsolutePath = (value: string) => value.startsWith("/") || /^[A-Za-z]:[\\/]/.test(value);
+
+  const isGitHubRepoUrl = (value: string) => {
+    try {
+      const parsed = new URL(value);
+      const host = parsed.hostname.toLowerCase();
+      if (host !== "github.com" && host !== "www.github.com") return false;
+      const segments = parsed.pathname.split("/").filter(Boolean);
+      return segments.length >= 2;
+    } catch {
+      return false;
+    }
+  };
+
+  const deriveWorkspaceNameFromPath = (value: string) => {
+    const normalized = value.trim().replace(/[\\/]+$/, "");
+    const segments = normalized.split(/[\\/]/).filter(Boolean);
+    return segments[segments.length - 1] ?? "Local folder";
+  };
+
+  const deriveWorkspaceNameFromRepo = (value: string) => {
+    try {
+      const parsed = new URL(value);
+      const segments = parsed.pathname.split("/").filter(Boolean);
+      const repo = segments[segments.length - 1]?.replace(/\.git$/i, "") ?? "";
+      return repo || "GitHub repo";
+    } catch {
+      return "GitHub repo";
+    }
+  };
+
+  const toggleWorkspaceSetup = (next: WorkspaceSetup) => {
+    setWorkspaceSetup((prev) => (prev === next ? "none" : next));
+    setWorkspaceError(null);
+  };
+
+  async function handleSubmit() {
     if (!selectedCompanyId || !name.trim()) return;
-    createProject.mutate({
-      name: name.trim(),
-      description: description.trim() || undefined,
-      status,
-      color: PROJECT_COLORS[Math.floor(Math.random() * PROJECT_COLORS.length)],
-      ...(goalIds.length > 0 ? { goalIds } : {}),
-      ...(targetDate ? { targetDate } : {}),
-    });
+    const localRequired = workspaceSetup === "local" || workspaceSetup === "both";
+    const repoRequired = workspaceSetup === "repo" || workspaceSetup === "both";
+    const localPath = workspaceLocalPath.trim();
+    const repoUrl = workspaceRepoUrl.trim();
+
+    if (localRequired && !isAbsolutePath(localPath)) {
+      setWorkspaceError("Local folder must be a full absolute path.");
+      return;
+    }
+    if (repoRequired && !isGitHubRepoUrl(repoUrl)) {
+      setWorkspaceError("Repo workspace must use a valid GitHub repo URL.");
+      return;
+    }
+
+    setWorkspaceError(null);
+
+    try {
+      const created = await createProject.mutateAsync({
+        name: name.trim(),
+        description: description.trim() || undefined,
+        status,
+        color: PROJECT_COLORS[Math.floor(Math.random() * PROJECT_COLORS.length)],
+        ...(goalIds.length > 0 ? { goalIds } : {}),
+        ...(targetDate ? { targetDate } : {}),
+      });
+
+      const workspacePayloads: Array<Record<string, unknown>> = [];
+      if (localRequired && repoRequired) {
+        workspacePayloads.push({
+          name: deriveWorkspaceNameFromPath(localPath),
+          cwd: localPath,
+          repoUrl,
+        });
+      } else if (localRequired) {
+        workspacePayloads.push({
+          name: deriveWorkspaceNameFromPath(localPath),
+          cwd: localPath,
+        });
+      } else if (repoRequired) {
+        workspacePayloads.push({
+          name: deriveWorkspaceNameFromRepo(repoUrl),
+          cwd: REPO_ONLY_CWD_SENTINEL,
+          repoUrl,
+        });
+      }
+      for (const workspacePayload of workspacePayloads) {
+        await projectsApi.createWorkspace(created.id, {
+          ...workspacePayload,
+        });
+      }
+
+      queryClient.invalidateQueries({ queryKey: queryKeys.projects.list(selectedCompanyId) });
+      queryClient.invalidateQueries({ queryKey: queryKeys.projects.detail(created.id) });
+      reset();
+      closeNewProject();
+    } catch {
+      // surface through createProject.isError
+    }
   }
 
   function handleKeyDown(e: React.KeyboardEvent) {
@@ -185,6 +280,83 @@ export function NewProjectDialog() {
           />
         </div>
 
+        <div className="px-4 pb-3 space-y-3 border-t border-border">
+          <div className="pt-3">
+            <p className="text-sm font-medium">Where will work be done on this project?</p>
+            <p className="text-xs text-muted-foreground">Add local folder and/or GitHub repo workspace hints.</p>
+          </div>
+          <div className="grid gap-2 sm:grid-cols-3">
+            <button
+              type="button"
+              className={cn(
+                "rounded-lg border px-3 py-3 text-left transition-colors",
+                workspaceSetup === "local" ? "border-foreground bg-accent/40" : "border-border hover:bg-accent/30",
+              )}
+              onClick={() => toggleWorkspaceSetup("local")}
+            >
+              <div className="flex items-center gap-2 text-sm font-medium">
+                <FolderOpen className="h-4 w-4" />
+                A local folder
+              </div>
+              <p className="mt-1 text-xs text-muted-foreground">Use a full path on this machine.</p>
+            </button>
+            <button
+              type="button"
+              className={cn(
+                "rounded-lg border px-3 py-3 text-left transition-colors",
+                workspaceSetup === "repo" ? "border-foreground bg-accent/40" : "border-border hover:bg-accent/30",
+              )}
+              onClick={() => toggleWorkspaceSetup("repo")}
+            >
+              <div className="flex items-center gap-2 text-sm font-medium">
+                <Github className="h-4 w-4" />
+                A github repo
+              </div>
+              <p className="mt-1 text-xs text-muted-foreground">Paste a GitHub URL.</p>
+            </button>
+            <button
+              type="button"
+              className={cn(
+                "rounded-lg border px-3 py-3 text-left transition-colors",
+                workspaceSetup === "both" ? "border-foreground bg-accent/40" : "border-border hover:bg-accent/30",
+              )}
+              onClick={() => toggleWorkspaceSetup("both")}
+            >
+              <div className="flex items-center gap-2 text-sm font-medium">
+                <GitBranch className="h-4 w-4" />
+                Both
+              </div>
+              <p className="mt-1 text-xs text-muted-foreground">Configure local + repo hints.</p>
+            </button>
+          </div>
+
+          {(workspaceSetup === "local" || workspaceSetup === "both") && (
+            <div className="rounded-md border border-border p-2">
+              <label className="mb-1 block text-xs text-muted-foreground">Local folder (full path)</label>
+              <input
+                className="w-full rounded border border-border bg-transparent px-2 py-1 text-xs font-mono outline-none"
+                value={workspaceLocalPath}
+                onChange={(e) => setWorkspaceLocalPath(e.target.value)}
+                placeholder="/absolute/path/to/workspace"
+              />
+            </div>
+          )}
+          {(workspaceSetup === "repo" || workspaceSetup === "both") && (
+            <div className="rounded-md border border-border p-2">
+              <label className="mb-1 block text-xs text-muted-foreground">GitHub repo URL</label>
+              <input
+                className="w-full rounded border border-border bg-transparent px-2 py-1 text-xs outline-none"
+                value={workspaceRepoUrl}
+                onChange={(e) => setWorkspaceRepoUrl(e.target.value)}
+                placeholder="https://github.com/org/repo"
+              />
+            </div>
+          )}
+          {workspaceError && (
+            <p className="text-xs text-destructive">{workspaceError}</p>
+          )}
+        </div>
+
         {/* Property chips */}
         <div className="flex items-center gap-1.5 px-4 py-2 border-t border-border flex-wrap">
           {/* Status */}
@@ -281,7 +453,12 @@ export function NewProjectDialog() {
         </div>
 
         {/* Footer */}
-        <div className="flex items-center justify-end px-4 py-2.5 border-t border-border">
+        <div className="flex items-center justify-between px-4 py-2.5 border-t border-border">
+          {createProject.isError ? (
+            <p className="text-xs text-destructive">Failed to create project.</p>
+          ) : (
+            <span />
+          )}
           <Button
             size="sm"
             disabled={!name.trim() || createProject.isPending}
diff --git a/ui/src/components/ProjectProperties.tsx b/ui/src/components/ProjectProperties.tsx
index 519d05e9..1116ed95 100644
--- a/ui/src/components/ProjectProperties.tsx
+++ b/ui/src/components/ProjectProperties.tsx
@@ -11,13 +11,16 @@ import { queryKeys } from "../lib/queryKeys";
 import { Separator } from "@/components/ui/separator";
 import { Button } from "@/components/ui/button";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { Plus, Star, Trash2, X } from "lucide-react";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { ExternalLink, Github, Plus, Trash2, X } from "lucide-react";
 
 interface ProjectPropertiesProps {
   project: Project;
   onUpdate?: (data: Record<string, unknown>) => void;
 }
 
+const REPO_ONLY_CWD_SENTINEL = "/__paperclip_repo_only__";
+
 function PropertyRow({ label, children }: { label: string; children: React.ReactNode }) {
   return (
     <div className="flex items-center gap-3 py-1.5">
@@ -31,9 +34,10 @@ export function ProjectProperties({ project, onUpdate }: ProjectPropertiesProps)
   const { selectedCompanyId } = useCompany();
   const queryClient = useQueryClient();
   const [goalOpen, setGoalOpen] = useState(false);
-  const [workspaceName, setWorkspaceName] = useState("");
+  const [workspaceMode, setWorkspaceMode] = useState<"local" | "repo" | null>(null);
   const [workspaceCwd, setWorkspaceCwd] = useState("");
   const [workspaceRepoUrl, setWorkspaceRepoUrl] = useState("");
+  const [workspaceError, setWorkspaceError] = useState<string | null>(null);
 
   const { data: allGoals } = useQuery({
     queryKey: queryKeys.goals.list(selectedCompanyId!),
@@ -67,19 +71,14 @@ export function ProjectProperties({ project, onUpdate }: ProjectPropertiesProps)
   const createWorkspace = useMutation({
     mutationFn: (data: Record<string, unknown>) => projectsApi.createWorkspace(project.id, data),
     onSuccess: () => {
-      setWorkspaceName("");
       setWorkspaceCwd("");
       setWorkspaceRepoUrl("");
+      setWorkspaceMode(null);
+      setWorkspaceError(null);
       invalidateProject();
     },
   });
 
-  const updateWorkspace = useMutation({
-    mutationFn: (input: { workspaceId: string; data: Record<string, unknown> }) =>
-      projectsApi.updateWorkspace(project.id, input.workspaceId, input.data),
-    onSuccess: invalidateProject,
-  });
-
   const removeWorkspace = useMutation({
     mutationFn: (workspaceId: string) => projectsApi.removeWorkspace(project.id, workspaceId),
     onSuccess: invalidateProject,
@@ -96,13 +95,75 @@ export function ProjectProperties({ project, onUpdate }: ProjectPropertiesProps)
     setGoalOpen(false);
   };
 
-  const submitWorkspace = () => {
-    if (!workspaceName.trim() || !workspaceCwd.trim()) return;
+  const isAbsolutePath = (value: string) => value.startsWith("/") || /^[A-Za-z]:[\\/]/.test(value);
+
+  const isGitHubRepoUrl = (value: string) => {
+    try {
+      const parsed = new URL(value);
+      const host = parsed.hostname.toLowerCase();
+      if (host !== "github.com" && host !== "www.github.com") return false;
+      const segments = parsed.pathname.split("/").filter(Boolean);
+      return segments.length >= 2;
+    } catch {
+      return false;
+    }
+  };
+
+  const deriveWorkspaceNameFromPath = (value: string) => {
+    const normalized = value.trim().replace(/[\\/]+$/, "");
+    const segments = normalized.split(/[\\/]/).filter(Boolean);
+    return segments[segments.length - 1] ?? "Local folder";
+  };
+
+  const deriveWorkspaceNameFromRepo = (value: string) => {
+    try {
+      const parsed = new URL(value);
+      const segments = parsed.pathname.split("/").filter(Boolean);
+      const repo = segments[segments.length - 1]?.replace(/\.git$/i, "") ?? "";
+      return repo || "GitHub repo";
+    } catch {
+      return "GitHub repo";
+    }
+  };
+
+  const formatGitHubRepo = (value: string) => {
+    try {
+      const parsed = new URL(value);
+      const segments = parsed.pathname.split("/").filter(Boolean);
+      if (segments.length < 2) return value;
+      const owner = segments[0];
+      const repo = segments[1]?.replace(/\.git$/i, "");
+      if (!owner || !repo) return value;
+      return `${owner}/${repo}`;
+    } catch {
+      return value;
+    }
+  };
+
+  const submitLocalWorkspace = () => {
+    const cwd = workspaceCwd.trim();
+    if (!isAbsolutePath(cwd)) {
+      setWorkspaceError("Local folder must be a full absolute path.");
+      return;
+    }
+    setWorkspaceError(null);
     createWorkspace.mutate({
-      name: workspaceName.trim(),
-      cwd: workspaceCwd.trim(),
-      repoUrl: workspaceRepoUrl.trim() || null,
-      isPrimary: workspaces.length === 0,
+      name: deriveWorkspaceNameFromPath(cwd),
+      cwd,
+    });
+  };
+
+  const submitRepoWorkspace = () => {
+    const repoUrl = workspaceRepoUrl.trim();
+    if (!isGitHubRepoUrl(repoUrl)) {
+      setWorkspaceError("Repo workspace must use a valid GitHub repo URL.");
+      return;
+    }
+    setWorkspaceError(null);
+    createWorkspace.mutate({
+      name: deriveWorkspaceNameFromRepo(repoUrl),
+      cwd: REPO_ONLY_CWD_SENTINEL,
+      repoUrl,
     });
   };
 
@@ -193,78 +254,179 @@ export function ProjectProperties({ project, onUpdate }: ProjectPropertiesProps)
 
       <div className="space-y-1">
         <div className="py-1.5 space-y-2">
-          <div className="text-xs text-muted-foreground">Workspaces</div>
+          <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+            <span>Workspaces</span>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  type="button"
+                  className="inline-flex h-4 w-4 items-center justify-center rounded-full border border-border text-[10px] text-muted-foreground hover:text-foreground"
+                  aria-label="Workspaces help"
+                >
+                  ?
+                </button>
+              </TooltipTrigger>
+              <TooltipContent side="top">
+                Workspaces give your agents hints about where the work is
+              </TooltipContent>
+            </Tooltip>
+          </div>
           {workspaces.length === 0 ? (
-            <p className="text-sm text-muted-foreground">No project workspaces configured.</p>
+            <p className="rounded-md border border-dashed border-border px-3 py-2 text-sm text-muted-foreground">
+              No workspace configured.
+            </p>
           ) : (
-            <div className="space-y-2">
+            <div className="space-y-1">
               {workspaces.map((workspace) => (
-                <div key={workspace.id} className="rounded-md border border-border p-2 space-y-1">
-                  <div className="flex items-center justify-between gap-2">
-                    <span className="text-sm font-medium truncate">{workspace.name}</span>
-                    <div className="flex items-center gap-1">
-                      {workspace.isPrimary ? (
-                        <span className="inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-[10px] border border-border text-muted-foreground">
-                          <Star className="h-2.5 w-2.5" />
-                          Primary
-                        </span>
-                      ) : (
-                        <Button
-                          variant="outline"
-                          size="xs"
-                          className="h-5 px-1.5 text-[10px]"
-                          onClick={() => updateWorkspace.mutate({ workspaceId: workspace.id, data: { isPrimary: true } })}
-                        >
-                          Set primary
-                        </Button>
-                      )}
+                <div key={workspace.id} className="space-y-1">
+                  {workspace.cwd && workspace.cwd !== REPO_ONLY_CWD_SENTINEL ? (
+                    <div className="flex items-center justify-between gap-2 py-1">
+                      <span className="min-w-0 truncate font-mono text-xs text-muted-foreground">{workspace.cwd}</span>
                       <Button
                         variant="ghost"
                         size="icon-xs"
-                        onClick={() => removeWorkspace.mutate(workspace.id)}
-                        aria-label={`Delete workspace ${workspace.name}`}
+                        onClick={() => {
+                          const confirmed = window.confirm("Delete this workspace?");
+                          if (confirmed) {
+                            removeWorkspace.mutate(workspace.id);
+                          }
+                        }}
+                        aria-label="Delete workspace"
                       >
                         <Trash2 className="h-3 w-3" />
                       </Button>
                     </div>
-                  </div>
-                  <p className="text-xs font-mono text-muted-foreground break-all">{workspace.cwd}</p>
-                  {workspace.repoUrl && (
-                    <p className="text-xs text-muted-foreground truncate">{workspace.repoUrl}</p>
-                  )}
+                  ) : null}
+                  {workspace.repoUrl ? (
+                    <div className="flex items-center justify-between gap-2 py-1">
+                      <a
+                        href={workspace.repoUrl}
+                        target="_blank"
+                        rel="noreferrer"
+                        className="inline-flex min-w-0 items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground hover:underline"
+                      >
+                        <Github className="h-3 w-3 shrink-0" />
+                        <span className="truncate">{formatGitHubRepo(workspace.repoUrl)}</span>
+                        <ExternalLink className="h-3 w-3 shrink-0" />
+                      </a>
+                      <Button
+                        variant="ghost"
+                        size="icon-xs"
+                        onClick={() => {
+                          const confirmed = window.confirm("Delete this workspace?");
+                          if (confirmed) {
+                            removeWorkspace.mutate(workspace.id);
+                          }
+                        }}
+                        aria-label="Delete workspace"
+                      >
+                        <Trash2 className="h-3 w-3" />
+                      </Button>
+                    </div>
+                  ) : null}
                 </div>
               ))}
             </div>
           )}
-          <div className="space-y-1.5 rounded-md border border-border p-2">
-            <input
-              className="w-full rounded border border-border bg-transparent px-2 py-1 text-xs outline-none"
-              value={workspaceName}
-              onChange={(e) => setWorkspaceName(e.target.value)}
-              placeholder="Workspace name"
-            />
-            <input
-              className="w-full rounded border border-border bg-transparent px-2 py-1 text-xs font-mono outline-none"
-              value={workspaceCwd}
-              onChange={(e) => setWorkspaceCwd(e.target.value)}
-              placeholder="/absolute/path/to/workspace"
-            />
-            <input
-              className="w-full rounded border border-border bg-transparent px-2 py-1 text-xs outline-none"
-              value={workspaceRepoUrl}
-              onChange={(e) => setWorkspaceRepoUrl(e.target.value)}
-              placeholder="Repo URL (optional)"
-            />
+          <div className="flex flex-col items-start gap-2">
             <Button
               variant="outline"
               size="xs"
-              className="h-6 px-2"
-              disabled={!workspaceName.trim() || !workspaceCwd.trim() || createWorkspace.isPending}
-              onClick={submitWorkspace}
+              className="h-7 px-2.5"
+              onClick={() => {
+                setWorkspaceMode("local");
+                setWorkspaceError(null);
+              }}
             >
-              Add workspace
+              Add workspace local folder
+            </Button>
+            <Button
+              variant="outline"
+              size="xs"
+              className="h-7 px-2.5"
+              onClick={() => {
+                setWorkspaceMode("repo");
+                setWorkspaceError(null);
+              }}
+            >
+              Add workspace repo
             </Button>
           </div>
+          {workspaceMode === "local" && (
+            <div className="space-y-1.5 rounded-md border border-border p-2">
+              <input
+                className="w-full rounded border border-border bg-transparent px-2 py-1 text-xs font-mono outline-none"
+                value={workspaceCwd}
+                onChange={(e) => setWorkspaceCwd(e.target.value)}
+                placeholder="/absolute/path/to/workspace"
+              />
+              <div className="flex items-center gap-2">
+                <Button
+                  variant="outline"
+                  size="xs"
+                  className="h-6 px-2"
+                  disabled={!workspaceCwd.trim() || createWorkspace.isPending}
+                  onClick={submitLocalWorkspace}
+                >
+                  Save
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="xs"
+                  className="h-6 px-2"
+                  onClick={() => {
+                    setWorkspaceMode(null);
+                    setWorkspaceCwd("");
+                    setWorkspaceError(null);
+                  }}
+                >
+                  Cancel
+                </Button>
+              </div>
+            </div>
+          )}
+          {workspaceMode === "repo" && (
+            <div className="space-y-1.5 rounded-md border border-border p-2">
+              <input
+                className="w-full rounded border border-border bg-transparent px-2 py-1 text-xs outline-none"
+                value={workspaceRepoUrl}
+                onChange={(e) => setWorkspaceRepoUrl(e.target.value)}
+                placeholder="https://github.com/org/repo"
+              />
+              <div className="flex items-center gap-2">
+                <Button
+                  variant="outline"
+                  size="xs"
+                  className="h-6 px-2"
+                  disabled={!workspaceRepoUrl.trim() || createWorkspace.isPending}
+                  onClick={submitRepoWorkspace}
+                >
+                  Save
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="xs"
+                  className="h-6 px-2"
+                  onClick={() => {
+                    setWorkspaceMode(null);
+                    setWorkspaceRepoUrl("");
+                    setWorkspaceError(null);
+                  }}
+                >
+                  Cancel
+                </Button>
+              </div>
+            </div>
+          )}
+          {workspaceError && (
+            <p className="text-xs text-destructive">{workspaceError}</p>
+          )}
+          {createWorkspace.isError && (
+            <p className="text-xs text-destructive">Failed to save workspace.</p>
+          )}
+          {removeWorkspace.isError && (
+            <p className="text-xs text-destructive">Failed to delete workspace.</p>
+          )}
         </div>
 
         <Separator />
diff --git a/ui/src/components/Sidebar.tsx b/ui/src/components/Sidebar.tsx
index 1372f55e..7c65d576 100644
--- a/ui/src/components/Sidebar.tsx
+++ b/ui/src/components/Sidebar.tsx
@@ -43,7 +43,7 @@ export function Sidebar() {
   }
 
   return (
-    <aside className="w-60 h-full border-r border-border bg-background flex flex-col">
+    <aside className="w-60 h-full min-h-0 border-r border-border bg-background flex flex-col">
       {/* Top bar: Company name (bold) + Search — aligned with top sections (no visible border) */}
       <div className="flex items-center gap-1 px-3 h-12 shrink-0">
         <span className="flex-1 text-sm font-bold text-foreground truncate pl-1">
diff --git a/ui/src/index.css b/ui/src/index.css
index 19d62e43..26a23074 100644
--- a/ui/src/index.css
+++ b/ui/src/index.css
@@ -117,8 +117,13 @@
   * {
     @apply border-border;
   }
+  html {
+    height: 100%;
+  }
   body {
     @apply bg-background text-foreground;
+    height: 100%;
+    overflow: hidden;
   }
   /* Prevent double-tap-to-zoom on interactive elements for mobile */
   a,
diff --git a/ui/src/pages/Costs.tsx b/ui/src/pages/Costs.tsx
index 26f10c81..dd737a68 100644
--- a/ui/src/pages/Costs.tsx
+++ b/ui/src/pages/Costs.tsx
@@ -5,7 +5,7 @@ import { useCompany } from "../context/CompanyContext";
 import { useBreadcrumbs } from "../context/BreadcrumbContext";
 import { queryKeys } from "../lib/queryKeys";
 import { EmptyState } from "../components/EmptyState";
-import { formatCents } from "../lib/utils";
+import { formatCents, formatTokens } from "../lib/utils";
 import { Identity } from "../components/Identity";
 import { StatusBadge } from "../components/StatusBadge";
 import { Card, CardContent } from "@/components/ui/card";
@@ -177,7 +177,7 @@ export function Costs() {
                     {data.byAgent.map((row) => (
                       <div
                         key={row.agentId}
-                        className="flex items-center justify-between text-sm"
+                        className="flex items-start justify-between text-sm"
                       >
                         <div className="flex items-center gap-2 min-w-0">
                           <Identity
@@ -188,9 +188,21 @@ export function Costs() {
                             <StatusBadge status="terminated" />
                           )}
                         </div>
-                        <span className="font-medium shrink-0 ml-2">
-                          {formatCents(row.costCents)}
-                        </span>
+                        <div className="text-right shrink-0 ml-2">
+                          <span className="font-medium block">{formatCents(row.costCents)}</span>
+                          <span className="text-xs text-muted-foreground block">
+                            in {formatTokens(row.inputTokens)} / out {formatTokens(row.outputTokens)} tok
+                          </span>
+                          {(row.apiRunCount > 0 || row.subscriptionRunCount > 0) && (
+                            <span className="text-xs text-muted-foreground block">
+                              {row.apiRunCount > 0 ? `api runs: ${row.apiRunCount}` : null}
+                              {row.apiRunCount > 0 && row.subscriptionRunCount > 0 ? " | " : null}
+                              {row.subscriptionRunCount > 0
+                                ? `subscription runs: ${row.subscriptionRunCount} (${formatTokens(row.subscriptionInputTokens)} in / ${formatTokens(row.subscriptionOutputTokens)} out tok)`
+                                : null}
+                            </span>
+                          )}
+                        </div>
                       </div>
                     ))}
                   </div>
diff --git a/ui/src/pages/Inbox.tsx b/ui/src/pages/Inbox.tsx
index 37fed0c1..0e691c74 100644
--- a/ui/src/pages/Inbox.tsx
+++ b/ui/src/pages/Inbox.tsx
@@ -326,12 +326,12 @@ export function Inbox() {
     showStaleSection ? "stale_work" : null,
   ].filter((key): key is SectionKey => key !== null);
 
-  const isLoading =
-    isJoinRequestsLoading ||
-    isApprovalsLoading ||
-    isDashboardLoading ||
-    isIssuesLoading ||
-    isRunsLoading;
+  const allLoaded =
+    !isJoinRequestsLoading &&
+    !isApprovalsLoading &&
+    !isDashboardLoading &&
+    !isIssuesLoading &&
+    !isRunsLoading;
 
   const showSeparatorBefore = (key: SectionKey) => visibleSections.indexOf(key) > 0;
 
@@ -397,11 +397,14 @@ export function Inbox() {
         )}
       </div>
 
-      {isLoading && <p className="text-sm text-muted-foreground">Loading...</p>}
       {approvalsError && <p className="text-sm text-destructive">{approvalsError.message}</p>}
       {actionError && <p className="text-sm text-destructive">{actionError}</p>}
 
-      {!isLoading && visibleSections.length === 0 && (
+      {!allLoaded && visibleSections.length === 0 && (
+        <p className="text-sm text-muted-foreground">Loading...</p>
+      )}
+
+      {allLoaded && visibleSections.length === 0 && (
         <EmptyState
           icon={InboxIcon}
           message={tab === "new" ? "You're all caught up!" : "No inbox items match these filters."}
diff --git a/ui/src/pages/IssueDetail.tsx b/ui/src/pages/IssueDetail.tsx
index 73b978ab..40f11b77 100644
--- a/ui/src/pages/IssueDetail.tsx
+++ b/ui/src/pages/IssueDetail.tsx
@@ -813,7 +813,7 @@ export function IssueDetail() {
 
       {/* Mobile properties drawer */}
       <Sheet open={mobilePropsOpen} onOpenChange={setMobilePropsOpen}>
-        <SheetContent side="bottom" className="max-h-[85vh]">
+        <SheetContent side="bottom" className="max-h-[85dvh] pb-[env(safe-area-inset-bottom)]">
           <SheetHeader>
             <SheetTitle className="text-sm">Properties</SheetTitle>
           </SheetHeader>