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/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
       )}