Improve UI: inline goal editing, InlineEditor auto-sizing, and agent detail transcript

Add inline editing for goal title/description with mutation support. Enhance
GoalProperties with clickable status/level pickers and linked owner/parent
navigation. Improve InlineEditor with auto-sizing textarea for multiline mode.
Update AgentDetail to redact secrets in env display, render thinking/user
transcript entries, and pretty-print tool results.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

ui/src/pages/AgentDetail.tsx

@@ -58,6 +58,41 @@ const runStatusIcons: Record<string, { icon: typeof CheckCircle2; color: string
   cancelled: { icon: Slash, color: "text-neutral-400" },
 };
 
+const REDACTED_ENV_VALUE = "***REDACTED***";
+const SECRET_ENV_KEY_RE =
+  /(api[-_]?key|access[-_]?token|auth(?:_?token)?|authorization|bearer|secret|passwd|password|credential|jwt|private[-_]?key|cookie|connectionstring)/i;
+const JWT_VALUE_RE = /^[A-Za-z0-9_-]+\.[A-Za-z0-9_-]+\.[A-Za-z0-9_-]+(?:\.[A-Za-z0-9_-]+)?$/;
+
+function shouldRedactSecretValue(key: string, value: unknown): boolean {
+  if (SECRET_ENV_KEY_RE.test(key)) return true;
+  if (typeof value !== "string") return false;
+  return JWT_VALUE_RE.test(value);
+}
+
+function redactEnvValue(key: string, value: unknown): string {
+  if (shouldRedactSecretValue(key, value)) return REDACTED_ENV_VALUE;
+  if (value === null || value === undefined) return "";
+  if (typeof value === "string") return value;
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return String(value);
+  }
+}
+
+function formatEnvForDisplay(envValue: unknown): string {
+  const env = asRecord(envValue);
+  if (!env) return "<unable-to-parse>";
+
+  const keys = Object.keys(env);
+  if (keys.length === 0) return "<empty>";
+
+  return keys
+    .sort()
+    .map((key) => `${key}=${redactEnvValue(key, env[key])}`)
+    .join("\n");
+}
+
 const sourceLabels: Record<string, string> = {
   timer: "Timer",
   assignment: "Assignment",
@@ -590,11 +625,12 @@ function RunsTab({ runs, companyId, agentId, selectedRunId, adapterType }: { run
 
   return (
     <div className="flex gap-0">
-      {/* Left: run list — sticky, scrolls independently */}
+      {/* Left: run list — border stretches full height, content sticks */}
       <div className={cn(
-        "shrink-0 border border-border rounded-lg overflow-y-auto sticky top-4 self-start",
+        "shrink-0 border border-border rounded-lg",
         selectedRun ? "w-72" : "w-full",
-      )} style={{ maxHeight: "calc(100vh - 2rem)" }}>
+      )}>
+        <div className="sticky top-4 overflow-y-auto" style={{ maxHeight: "calc(100vh - 2rem)" }}>
         {sorted.map((run) => {
           const statusInfo = runStatusIcons[run.status] ?? { icon: Clock, color: "text-neutral-400" };
           const StatusIcon = statusInfo.icon;
@@ -645,6 +681,7 @@ function RunsTab({ runs, companyId, agentId, selectedRunId, adapterType }: { run
             </button>
           );
         })}
+        </div>
       </div>
 
       {/* Right: run detail — natural height, page scrolls */}
@@ -1038,8 +1075,8 @@ function LogViewer({ run, adapterType }: { run: HeartbeatRun; adapterType: strin
           {adapterInvokePayload.env !== undefined && (
             <div>
               <div className="text-xs text-muted-foreground mb-1">Environment</div>
-              <pre className="bg-neutral-950 rounded-md p-2 text-xs overflow-x-auto whitespace-pre-wrap">
-                {JSON.stringify(adapterInvokePayload.env, null, 2)}
+              <pre className="bg-neutral-950 rounded-md p-2 text-xs overflow-x-auto whitespace-pre-wrap font-mono">
+                {formatEnvForDisplay(adapterInvokePayload.env)}
               </pre>
             </div>
           )}
@@ -1060,7 +1097,7 @@ function LogViewer({ run, adapterType }: { run: HeartbeatRun; adapterType: strin
           </span>
         )}
       </div>
-      <div className="bg-neutral-950 rounded-lg p-3 font-mono text-xs space-y-0.5" style={{ maxHeight: "200vh" }}>
+      <div className="bg-neutral-950 rounded-lg p-3 font-mono text-xs space-y-0.5">
         {transcript.length === 0 && !run.logRef && (
           <div className="text-neutral-500">No persisted transcript for this run.</div>
         )}
@@ -1082,6 +1119,26 @@ function LogViewer({ run, adapterType }: { run: HeartbeatRun; adapterType: strin
             );
           }
 
+          if (entry.kind === "thinking") {
+            return (
+              <div key={`${entry.ts}-thinking-${idx}`} className={cn(grid, "py-0.5")}>
+                <span className={tsCell}>{time}</span>
+                <span className={cn(lblCell, "text-green-300/60")}>thinking</span>
+                <span className={cn(contentCell, "text-green-100/60 italic")}>{entry.text}</span>
+              </div>
+            );
+          }
+
+          if (entry.kind === "user") {
+            return (
+              <div key={`${entry.ts}-user-${idx}`} className={cn(grid, "py-0.5")}>
+                <span className={tsCell}>{time}</span>
+                <span className={cn(lblCell, "text-neutral-400")}>user</span>
+                <span className={cn(contentCell, "text-neutral-300")}>{entry.text}</span>
+              </div>
+            );
+          }
+
           if (entry.kind === "tool_call") {
             return (
               <div key={`${entry.ts}-tool-${idx}`} className={cn(grid, "gap-y-1 py-0.5")}>
@@ -1102,7 +1159,7 @@ function LogViewer({ run, adapterType }: { run: HeartbeatRun; adapterType: strin
                 <span className={cn(lblCell, entry.isError ? "text-red-300" : "text-purple-300")}>tool_result</span>
                 {entry.isError ? <span className="text-red-400 min-w-0">error</span> : <span />}
                 <pre className={cn(expandCell, "bg-neutral-900 rounded p-2 text-[11px] overflow-x-auto whitespace-pre-wrap text-neutral-300 max-h-60 overflow-y-auto")}>
-                  {entry.content}
+                  {(() => { try { return JSON.stringify(JSON.parse(entry.content), null, 2); } catch { return entry.content; } })()}
                 </pre>
               </div>
             );
@@ -1199,7 +1256,7 @@ function LogViewer({ run, adapterType }: { run: HeartbeatRun; adapterType: strin
       {events.length > 0 && (
         <div>
           <div className="mb-2 text-xs font-medium text-muted-foreground">Events ({events.length})</div>
-          <div className="bg-neutral-950 rounded-lg p-3 font-mono text-xs space-y-0.5" style={{ maxHeight: "100vh" }}>
+          <div className="bg-neutral-950 rounded-lg p-3 font-mono text-xs space-y-0.5">
             {events.map((evt) => {
               const color = evt.color
                 ?? (evt.level ? levelColors[evt.level] : null)

ui/src/pages/DesignGuide.tsx

@@ -117,6 +117,10 @@ export function DesignGuide() {
   const [status, setStatus] = useState("todo");
   const [priority, setPriority] = useState("medium");
   const [inlineText, setInlineText] = useState("Click to edit this text");
+  const [inlineTitle, setInlineTitle] = useState("Editable Title");
+  const [inlineDesc, setInlineDesc] = useState(
+    "This is an editable description. Click to edit it — the textarea auto-sizes to fit the content without layout shift."
+  );
   const [filters, setFilters] = useState<FilterValue[]>([
     { key: "status", label: "Status", value: "Active" },
     { key: "priority", label: "Priority", value: "High" },
@@ -402,15 +406,37 @@ export function DesignGuide() {
           </SubSection>
 
           <SubSection title="Inline Editor">
-            <InlineEditor
-              value={inlineText}
-              onSave={setInlineText}
-              as="p"
-              className="text-sm"
-            />
-            <p className="text-xs text-muted-foreground mt-1">
-              Click the text above to edit inline.
-            </p>
+            <div className="space-y-4">
+              <div>
+                <p className="text-xs text-muted-foreground mb-1">Title (single-line)</p>
+                <InlineEditor
+                  value={inlineTitle}
+                  onSave={setInlineTitle}
+                  as="h2"
+                  className="text-xl font-bold"
+                />
+              </div>
+              <div>
+                <p className="text-xs text-muted-foreground mb-1">Body text (single-line)</p>
+                <InlineEditor
+                  value={inlineText}
+                  onSave={setInlineText}
+                  as="p"
+                  className="text-sm"
+                />
+              </div>
+              <div>
+                <p className="text-xs text-muted-foreground mb-1">Description (multiline, auto-sizing)</p>
+                <InlineEditor
+                  value={inlineDesc}
+                  onSave={setInlineDesc}
+                  as="p"
+                  className="text-sm text-muted-foreground"
+                  placeholder="Add a description..."
+                  multiline
+                />
+              </div>
+            </div>
           </SubSection>
         </div>
       </Section>

ui/src/pages/GoalDetail.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from "react";
 import { useNavigate, useParams } from "react-router-dom";
-import { useQuery } from "@tanstack/react-query";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { goalsApi } from "../api/goals";
 import { projectsApi } from "../api/projects";
 import { usePanel } from "../context/PanelContext";
@@ -10,6 +10,7 @@ import { queryKeys } from "../lib/queryKeys";
 import { GoalProperties } from "../components/GoalProperties";
 import { GoalTree } from "../components/GoalTree";
 import { StatusBadge } from "../components/StatusBadge";
+import { InlineEditor } from "../components/InlineEditor";
 import { EntityRow } from "../components/EntityRow";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import type { Goal, Project } from "@paperclip/shared";
@@ -20,6 +21,7 @@ export function GoalDetail() {
   const { openPanel, closePanel } = usePanel();
   const { setBreadcrumbs } = useBreadcrumbs();
   const navigate = useNavigate();
+  const queryClient = useQueryClient();
 
   const { data: goal, isLoading, error } = useQuery({
     queryKey: queryKeys.goals.detail(goalId!),
@@ -39,6 +41,16 @@ export function GoalDetail() {
     enabled: !!selectedCompanyId,
   });
 
+  const updateGoal = useMutation({
+    mutationFn: (data: Record<string, unknown>) => goalsApi.update(goalId!, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: queryKeys.goals.detail(goalId!) });
+      if (selectedCompanyId) {
+        queryClient.invalidateQueries({ queryKey: queryKeys.goals.list(selectedCompanyId) });
+      }
+    },
+  });
+
   const childGoals = (allGoals ?? []).filter((g) => g.parentId === goalId);
   const linkedProjects = (allProjects ?? []).filter((p) => p.goalId === goalId);
 
@@ -51,7 +63,9 @@ export function GoalDetail() {
 
   useEffect(() => {
     if (goal) {
-      openPanel(<GoalProperties goal={goal} />);
+      openPanel(
+        <GoalProperties goal={goal} onUpdate={(data) => updateGoal.mutate(data)} />
+      );
     }
     return () => closePanel();
   }, [goal]); // eslint-disable-line react-hooks/exhaustive-deps
@@ -62,15 +76,27 @@ export function GoalDetail() {
 
   return (
     <div className="space-y-6">
-      <div>
+      <div className="space-y-3">
         <div className="flex items-center gap-2">
           <span className="text-xs uppercase text-muted-foreground">{goal.level}</span>
           <StatusBadge status={goal.status} />
         </div>
-        <h2 className="text-xl font-bold mt-1">{goal.title}</h2>
-        {goal.description && (
-          <p className="text-sm text-muted-foreground mt-1">{goal.description}</p>
-        )}
+
+        <InlineEditor
+          value={goal.title}
+          onSave={(title) => updateGoal.mutate({ title })}
+          as="h2"
+          className="text-xl font-bold"
+        />
+
+        <InlineEditor
+          value={goal.description ?? ""}
+          onSave={(description) => updateGoal.mutate({ description })}
+          as="p"
+          className="text-sm text-muted-foreground"
+          placeholder="Add a description..."
+          multiline
+        />
       </div>
 
       <Tabs defaultValue="children">