Add Codex goal controls across desktop and remote clients

src/main/remote/server/httpRouter.ts

@@ -21,6 +21,7 @@ import {
 import {
   closeThreadPayloadSchema,
   clearPendingSteerPayloadSchema,
+  controlThreadGoalPayloadSchema,
   interruptThreadPayloadSchema,
   profileIdentitySchema,
   profileStatsRequestSchema,
@@ -133,6 +134,11 @@ const THREAD_POST_ROUTES: ReadonlyArray<{
     scope: "session:operate",
     dispatch: (call, body) => call("interruptThread", interruptThreadPayloadSchema.parse(body)),
   },
+  {
+    suffix: "/goal",
+    scope: "session:operate",
+    dispatch: (call, body) => call("controlThreadGoal", controlThreadGoalPayloadSchema.parse(body)),
+  },
   {
     suffix: "/close",
     scope: "session:operate",

src/mobile/ComposerInfoChips.tsx

@@ -209,6 +209,7 @@ export function ComposerInfoChips(props: {
         >
           {open.key === "goal" && dockState.goalDockState ? (
             <ThreadGoalDock
+              threadId={threadId}
               state={dockState.goalDockState}
               onDismiss={dockState.onGoalDockDismiss}
             />

src/mobile/bridge.ts

@@ -1,6 +1,7 @@
 import type {
   ClearPendingSteerPayload,
   CloseThreadPayload,
+  ControlThreadGoalPayload,
   RefreshAgentScope,
   InterruptThreadPayload,
   ProfileIdentity,
@@ -194,6 +195,8 @@ const remoteBridge = {
   sendThreadInput: (payload: SendThreadInputPayload) => requireClient().sendThreadInput(payload),
   interruptThread: (payload: InterruptThreadPayload) =>
     requireClient().interruptThread(payload.threadId),
+  controlThreadGoal: (payload: ControlThreadGoalPayload) =>
+    requireClient().controlThreadGoal(payload),
   writeTerminal: (payload: WriteTerminalPayload) => requireClient().writeTerminal(payload),
   resizeTerminal: (payload: ResizeTerminalPayload) => requireClient().resizeTerminal(payload),
   startThread: (payload: StartThreadPayload) => requireClient().startThread(payload),

src/renderer/components/thread/ThreadComposerDocks.tsx

@@ -130,7 +130,7 @@ export function ThreadComposerDocks(props: ThreadComposerDocksProps) {
           ))
         : null}
       {showGoalInComposer ? (
-        <ThreadGoalDock state={goalDockState!} onDismiss={onGoalDockDismiss} />
+        <ThreadGoalDock threadId={threadId} state={goalDockState!} onDismiss={onGoalDockDismiss} />
       ) : null}
       {showTodoInComposer ? (
         <ThreadTodoDock

src/renderer/components/thread/ThreadGoalControls.tsx

@@ -0,0 +1,179 @@
+import { useState, type ReactNode } from "react";
+import { Label, Modal, TextField, Tooltip, toast } from "@heroui/react";
+import { Pause, Pencil, Play, X } from "lucide-react";
+import { Trans, useLingui } from "@lingui/react/macro";
+import { MAX_GOAL_OBJECTIVE_LENGTH, type ThreadGoalControl } from "@/shared/contracts";
+import { readBridge } from "@/renderer/bridge";
+import { Button, TextArea } from "@/renderer/components/common";
+import type { ThreadGoalDockState } from "./threadGoalState";
+
+interface ThreadGoalControlsProps {
+  threadId: string;
+  state: ThreadGoalDockState;
+  onDismiss: () => void;
+}
+
+export function ThreadGoalControls({ threadId, state, onDismiss }: ThreadGoalControlsProps) {
+  const { t } = useLingui();
+  const [pendingAction, setPendingAction] = useState<ThreadGoalControl["action"] | null>(null);
+  const [objectiveDraft, setObjectiveDraft] = useState<string | null>(null);
+  const availableActions = state.availableActions ?? [];
+  const normalizedObjective = objectiveDraft?.trim() ?? "";
+
+  const controlGoal = async (control: ThreadGoalControl): Promise<boolean> => {
+    setPendingAction(control.action);
+    try {
+      await readBridge().controlThreadGoal({ threadId, ...control });
+      return true;
+    } catch {
+      toast.danger(control.action === "clear" ? t`Failed to clear goal` : t`Failed to update goal`);
+      return false;
+    } finally {
+      setPendingAction(null);
+    }
+  };
+
+  const openEditor = () => {
+    setObjectiveDraft(state.objective);
+  };
+
+  const saveObjective = async () => {
+    if (!normalizedObjective || normalizedObjective === state.objective) return;
+    if (await controlGoal({ action: "edit", objective: normalizedObjective })) {
+      setObjectiveDraft(null);
+    }
+  };
+
+  return (
+    <>
+      {availableActions.includes("edit") ? (
+        <GoalControlButton
+          label={t`Edit goal`}
+          pending={pendingAction === "edit"}
+          disabled={pendingAction !== null}
+          onPress={openEditor}
+        >
+          <Pencil className="size-3.5" />
+        </GoalControlButton>
+      ) : null}
+      {availableActions.includes("pause") ? (
+        <GoalControlButton
+          label={t`Pause goal`}
+          pending={pendingAction === "pause"}
+          disabled={pendingAction !== null}
+          onPress={() => void controlGoal({ action: "pause" })}
+        >
+          <Pause className="size-3.5" />
+        </GoalControlButton>
+      ) : null}
+      {availableActions.includes("resume") ? (
+        <GoalControlButton
+          label={t`Resume goal`}
+          pending={pendingAction === "resume"}
+          disabled={pendingAction !== null}
+          onPress={() => void controlGoal({ action: "resume" })}
+        >
+          <Play className="size-3.5" />
+        </GoalControlButton>
+      ) : null}
+      {availableActions.includes("clear") ? (
+        <GoalControlButton
+          label={t`Clear goal`}
+          pending={pendingAction === "clear"}
+          disabled={pendingAction !== null}
+          danger
+          onPress={() => void controlGoal({ action: "clear" })}
+        >
+          <X className="size-3.5" />
+        </GoalControlButton>
+      ) : (
+        <GoalControlButton label={t`Close goal`} onPress={onDismiss}>
+          <X className="size-3.5" />
+        </GoalControlButton>
+      )}
+      {objectiveDraft !== null ? (
+        <Modal.Backdrop isOpen onOpenChange={(open) => !open && setObjectiveDraft(null)}>
+          <Modal.Container placement="center" size="md">
+            <Modal.Dialog>
+              <Modal.CloseTrigger />
+              <Modal.Header>
+                <Modal.Heading>
+                  <Trans>Edit goal</Trans>
+                </Modal.Heading>
+              </Modal.Header>
+              <Modal.Body className="p-4">
+                <TextField>
+                  <Label>
+                    <Trans>Goal objective</Trans>
+                  </Label>
+                  <TextArea
+                    autoFocus // eslint-disable-line jsx-a11y/no-autofocus -- opened edit dialog, expected focus target
+                    maxLength={MAX_GOAL_OBJECTIVE_LENGTH}
+                    rows={5}
+                    value={objectiveDraft}
+                    onChange={(event) => setObjectiveDraft(event.target.value)}
+                  />
+                </TextField>
+              </Modal.Body>
+              <Modal.Footer>
+                <Button slot="close" variant="ghost" size="sm" className="text-muted">
+                  <Trans>Cancel</Trans>
+                </Button>
+                <Button
+                  variant="tertiary"
+                  size="sm"
+                  className="text-white"
+                  isDisabled={!normalizedObjective || normalizedObjective === state.objective}
+                  isPending={pendingAction === "edit"}
+                  onPress={() => void saveObjective()}
+                >
+                  <Trans>Save</Trans>
+                </Button>
+              </Modal.Footer>
+            </Modal.Dialog>
+          </Modal.Container>
+        </Modal.Backdrop>
+      ) : null}
+    </>
+  );
+}
+
+function GoalControlButton({
+  label,
+  pending = false,
+  disabled = false,
+  danger = false,
+  onPress,
+  children,
+}: {
+  label: string;
+  pending?: boolean;
+  disabled?: boolean;
+  danger?: boolean;
+  onPress: () => void;
+  children: ReactNode;
+}) {
+  return (
+    <Tooltip delay={0}>
+      <Tooltip.Trigger>
+        <Button
+          isIconOnly
+          size="sm"
+          variant="ghost"
+          aria-label={label}
+          className={
+            danger
+              ? "h-6 w-6 min-w-0 shrink-0 text-muted/70 hover:bg-danger-500/10 hover:text-danger-500"
+              : "h-6 w-6 min-w-0 shrink-0 text-muted/70"
+          }
+          isDisabled={disabled}
+          isPending={pending}
+          onPress={onPress}
+        >
+          {children}
+        </Button>
+      </Tooltip.Trigger>
+      <Tooltip.Content>{label}</Tooltip.Content>
+    </Tooltip>
+  );
+}