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>

packages/adapters/claude-local/src/ui/parse-stdout.ts

@@ -63,6 +63,9 @@ export function parseClaudeStdoutLine(line: string, ts: string): TranscriptEntry
       if (blockType === "text") {
         const text = typeof block.text === "string" ? block.text : "";
         if (text) entries.push({ kind: "assistant", ts, text });
+      } else if (blockType === "thinking") {
+        const text = typeof block.thinking === "string" ? block.thinking : "";
+        if (text) entries.push({ kind: "thinking", ts, text });
       } else if (blockType === "tool_use") {
         entries.push({
           kind: "tool_call",
@@ -83,7 +86,10 @@ export function parseClaudeStdoutLine(line: string, ts: string): TranscriptEntry
       const block = asRecord(blockRaw);
       if (!block) continue;
       const blockType = typeof block.type === "string" ? block.type : "";
-      if (blockType === "tool_result") {
+      if (blockType === "text") {
+        const text = typeof block.text === "string" ? block.text : "";
+        if (text) entries.push({ kind: "user", ts, text });
+      } else if (blockType === "tool_result") {
         const toolUseId = typeof block.tool_use_id === "string" ? block.tool_use_id : "";
         const isError = block.is_error === true;
         let text = "";
@@ -101,7 +107,7 @@ export function parseClaudeStdoutLine(line: string, ts: string): TranscriptEntry
       }
     }
     if (entries.length > 0) return entries;
-    // fall through to stdout for user messages without tool_result blocks
+    // fall through to stdout for user messages without recognized blocks
   }
 
   if (type === "result") {

ui/src/components/GoalProperties.tsx

@@ -1,10 +1,22 @@
+import { useState } from "react";
+import { Link } from "react-router-dom";
+import { useQuery } from "@tanstack/react-query";
 import type { Goal } from "@paperclip/shared";
+import { GOAL_STATUSES, GOAL_LEVELS } from "@paperclip/shared";
+import { agentsApi } from "../api/agents";
+import { goalsApi } from "../api/goals";
+import { useCompany } from "../context/CompanyContext";
+import { queryKeys } from "../lib/queryKeys";
 import { StatusBadge } from "./StatusBadge";
 import { formatDate } from "../lib/utils";
 import { Separator } from "@/components/ui/separator";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Button } from "@/components/ui/button";
+import { cn } from "../lib/utils";
 
 interface GoalPropertiesProps {
   goal: Goal;
+  onUpdate?: (data: Record<string, unknown>) => void;
 }
 
 function PropertyRow({ label, children }: { label: string; children: React.ReactNode }) {
@@ -16,24 +28,124 @@ function PropertyRow({ label, children }: { label: string; children: React.React
   );
 }
 
-export function GoalProperties({ goal }: GoalPropertiesProps) {
+function label(s: string): string {
+  return s.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+}
+
+function PickerButton({
+  current,
+  options,
+  onChange,
+  children,
+}: {
+  current: string;
+  options: readonly string[];
+  onChange: (value: string) => void;
+  children: React.ReactNode;
+}) {
+  const [open, setOpen] = useState(false);
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <button className="cursor-pointer hover:opacity-80 transition-opacity">
+          {children}
+        </button>
+      </PopoverTrigger>
+      <PopoverContent className="w-40 p-1" align="end">
+        {options.map((opt) => (
+          <Button
+            key={opt}
+            variant="ghost"
+            size="sm"
+            className={cn("w-full justify-start text-xs", opt === current && "bg-accent")}
+            onClick={() => {
+              onChange(opt);
+              setOpen(false);
+            }}
+          >
+            {label(opt)}
+          </Button>
+        ))}
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+export function GoalProperties({ goal, onUpdate }: GoalPropertiesProps) {
+  const { selectedCompanyId } = useCompany();
+
+  const { data: agents } = useQuery({
+    queryKey: queryKeys.agents.list(selectedCompanyId!),
+    queryFn: () => agentsApi.list(selectedCompanyId!),
+    enabled: !!selectedCompanyId,
+  });
+
+  const { data: allGoals } = useQuery({
+    queryKey: queryKeys.goals.list(selectedCompanyId!),
+    queryFn: () => goalsApi.list(selectedCompanyId!),
+    enabled: !!selectedCompanyId,
+  });
+
+  const ownerAgent = goal.ownerAgentId
+    ? agents?.find((a) => a.id === goal.ownerAgentId)
+    : null;
+
+  const parentGoal = goal.parentId
+    ? allGoals?.find((g) => g.id === goal.parentId)
+    : null;
+
   return (
     <div className="space-y-4">
       <div className="space-y-1">
         <PropertyRow label="Status">
-          <StatusBadge status={goal.status} />
+          {onUpdate ? (
+            <PickerButton
+              current={goal.status}
+              options={GOAL_STATUSES}
+              onChange={(status) => onUpdate({ status })}
+            >
+              <StatusBadge status={goal.status} />
+            </PickerButton>
+          ) : (
+            <StatusBadge status={goal.status} />
+          )}
         </PropertyRow>
+
         <PropertyRow label="Level">
-          <span className="text-sm capitalize">{goal.level}</span>
+          {onUpdate ? (
+            <PickerButton
+              current={goal.level}
+              options={GOAL_LEVELS}
+              onChange={(level) => onUpdate({ level })}
+            >
+              <span className="text-sm capitalize">{goal.level}</span>
+            </PickerButton>
+          ) : (
+            <span className="text-sm capitalize">{goal.level}</span>
+          )}
         </PropertyRow>
-        {goal.ownerAgentId && (
-          <PropertyRow label="Owner">
-            <span className="text-sm font-mono">{goal.ownerAgentId.slice(0, 8)}</span>
-          </PropertyRow>
-        )}
+
+        <PropertyRow label="Owner">
+          {ownerAgent ? (
+            <Link
+              to={`/agents/${ownerAgent.id}`}
+              className="text-sm hover:underline"
+            >
+              {ownerAgent.name}
+            </Link>
+          ) : (
+            <span className="text-sm text-muted-foreground">None</span>
+          )}
+        </PropertyRow>
+
         {goal.parentId && (
           <PropertyRow label="Parent Goal">
-            <span className="text-sm font-mono">{goal.parentId.slice(0, 8)}</span>
+            <Link
+              to={`/goals/${goal.parentId}`}
+              className="text-sm hover:underline"
+            >
+              {parentGoal?.title ?? goal.parentId.slice(0, 8)}
+            </Link>
           </PropertyRow>
         )}
       </div>

ui/src/components/InlineEditor.tsx

@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect } from "react";
+import { useState, useRef, useEffect, useCallback } from "react";
 import { cn } from "../lib/utils";
 
 interface InlineEditorProps {
@@ -10,6 +10,9 @@ interface InlineEditorProps {
   multiline?: boolean;
 }
 
+/** Shared padding so display and edit modes occupy the exact same box. */
+const pad = "px-1 -mx-1";
+
 export function InlineEditor({
   value,
   onSave,
@@ -26,12 +29,21 @@ export function InlineEditor({
     setDraft(value);
   }, [value]);
 
+  const autoSize = useCallback((el: HTMLTextAreaElement | null) => {
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = `${el.scrollHeight}px`;
+  }, []);
+
   useEffect(() => {
     if (editing && inputRef.current) {
       inputRef.current.focus();
       inputRef.current.select();
+      if (multiline && inputRef.current instanceof HTMLTextAreaElement) {
+        autoSize(inputRef.current);
+      }
     }
-  }, [editing]);
+  }, [editing, multiline, autoSize]);
 
   function commit() {
     const trimmed = draft.trim();
@@ -58,26 +70,49 @@ export function InlineEditor({
     const sharedProps = {
       ref: inputRef as any,
       value: draft,
-      onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>
-        setDraft(e.target.value),
+      onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+        setDraft(e.target.value);
+        if (multiline && e.target instanceof HTMLTextAreaElement) {
+          autoSize(e.target);
+        }
+      },
       onBlur: commit,
       onKeyDown: handleKeyDown,
-      className: cn(
-        "bg-transparent border border-border rounded px-2 py-1 w-full outline-none focus:ring-1 focus:ring-ring",
-        className
-      ),
     };
 
     if (multiline) {
-      return <textarea {...sharedProps} rows={4} />;
+      return (
+        <textarea
+          {...sharedProps}
+          rows={1}
+          className={cn(
+            "w-full resize-none bg-accent/30 rounded outline-none",
+            pad,
+            "py-0.5",
+            className
+          )}
+        />
+      );
     }
-    return <input type="text" {...sharedProps} />;
+
+    return (
+      <input
+        type="text"
+        {...sharedProps}
+        className={cn(
+          "w-full bg-transparent rounded outline-none",
+          pad,
+          className
+        )}
+      />
+    );
   }
 
   return (
     <Tag
       className={cn(
-        "cursor-pointer rounded px-1 -mx-1 hover:bg-accent/50 transition-colors",
+        "cursor-pointer rounded hover:bg-accent/50 transition-colors",
+        pad,
         !value && "text-muted-foreground italic",
         className
       )}

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">