Add Ultraplan Feature for Advanced Multi-Agent Planning (#232)

* feat: add ultraplan feature for advanced multi-agent planning

Implement ultraplan command with web-based planning interface,
supporting multiple prompt modes and interactive plan approval.

* chore: add semi

* chore: add semi

src/components/ultraplan/UltraplanLaunchDialog.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { Box, Text, Link } from '@anthropic/ink';
 import { Select } from '../CustomSelect/select.js';
-import { PermissionDialog } from '../permissions/PermissionDialog.js';
+import { Dialog } from '../design-system/Dialog.js';
 import { useAppState, useSetAppState } from '../../state/AppState.js';
 import { getGlobalConfig, saveGlobalConfig } from '../../utils/config.js';
 import { CCR_TERMS_URL } from '../../commands/ultraplan.js';
+import { getPromptIdentifier, getDialogConfig, type PromptIdentifier } from 'src/utils/ultraplan/prompt.js';
 
 // ---------------------------------------------------------------------------
 // Types
@@ -16,54 +17,31 @@ interface UltraplanLaunchDialogProps {
   onChoice: (
     choice: ChoiceValue,
     opts: {
-      disconnectedBridge?: boolean;
-      promptIdentifier?: string;
+      disconnectedBridge: boolean;
+      promptIdentifier: PromptIdentifier;
     },
   ) => void;
 }
 
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-
-/**
- * Generates a unique prompt identifier for this launch.
- * In the official build this comes from a GrowthBook-gated helper (`Zc8`);
- * we use `crypto.randomUUID()` as a drop-in replacement.
- */
-function generatePromptIdentifier(): string {
-  return crypto.randomUUID();
+function dispatchShowTermsLink(){
+  return !getGlobalConfig().hasSeenUltraplanTerms;
 }
 
-/**
- * Returns dialog copy for the ultraplan launch dialog.
- * The official build resolves this from a GrowthBook feature gate (`Gc8`);
- * we return reasonable defaults.
- */
-function getUltraplanLaunchConfig(_identifier: string) {
-  return {
-    dialogBody:
-      'Ultraplan sends your task to Claude Code on the web for deep exploration. ' +
-      'Claude will research, draft a detailed plan, and return it here for your review ' +
-      'before any code is changed.',
-    dialogPipeline: 'Your prompt → Claude Code on the web → Plan review → Implementation',
-    timeEstimate: '~10–30 min',
-  };
+function dispatchPromptIdentifier() {
+  return getPromptIdentifier();
 }
 
-// ---------------------------------------------------------------------------
-// Component
-// ---------------------------------------------------------------------------
-
 export function UltraplanLaunchDialog({ onChoice }: UltraplanLaunchDialogProps): React.ReactNode {
   // Whether the user has never seen the ultraplan terms before
-  const [showTermsLink] = React.useState(() => !getGlobalConfig().hasSeenUltraplanTerms);
+  const [showTermsLink] = React.useState(dispatchShowTermsLink);
 
   // Stable prompt identifier for this dialog instance
-  const [promptIdentifier] = React.useState(() => generatePromptIdentifier());
+  const [promptIdentifier] = React.useState(dispatchPromptIdentifier);
 
   // Dialog copy derived from the prompt identifier
-  const config = React.useMemo(() => getUltraplanLaunchConfig(promptIdentifier), [promptIdentifier]);
+  const dialogConfig = React.useMemo(() => {
+    return getDialogConfig(promptIdentifier);
+  }, [promptIdentifier])
 
   // Whether the remote-control bridge is currently active
   const isBridgeEnabled = useAppState(state => state.replBridgeEnabled);
@@ -74,15 +52,16 @@ export function UltraplanLaunchDialog({ onChoice }: UltraplanLaunchDialogProps):
   // Choice handler
   // ------------------------------------------------------------------
 
-  const handleChoice = React.useCallback(
-    (value: ChoiceValue) => {
+  const handleChoice = React.useCallback((value: ChoiceValue) => {
       // If the user chose "run" while the bridge is enabled, disconnect it
       // first so the ultraplan session doesn't collide with remote control.
       const disconnectedBridge = value === 'run' && isBridgeEnabled;
 
       if (disconnectedBridge) {
-        setAppState(prev => {
-          if (!prev.replBridgeEnabled) return prev;
+        setAppState((prev) => {
+          if (!prev.replBridgeEnabled) {
+            return prev;
+          }
           return {
             ...prev,
             replBridgeEnabled: false,
@@ -97,56 +76,60 @@ export function UltraplanLaunchDialog({ onChoice }: UltraplanLaunchDialogProps):
         saveGlobalConfig(prev => (prev.hasSeenUltraplanTerms ? prev : { ...prev, hasSeenUltraplanTerms: true }));
       }
 
-      onChoice(value, { disconnectedBridge, promptIdentifier });
+      onChoice(value, { disconnectedBridge, promptIdentifier});
     },
-    [onChoice, promptIdentifier, isBridgeEnabled, setAppState, showTermsLink],
-  );
+    [onChoice, isBridgeEnabled, setAppState, showTermsLink],
+  )
 
-  // ------------------------------------------------------------------
-  // Menu options
-  // ------------------------------------------------------------------
+  const handleCancel = React.useCallback(() => {
+    handleChoice('cancel')
+  }, [handleChoice])
 
   const runDescription = isBridgeEnabled
     ? 'Disable remote control and launch in Claude Code on the web'
     : 'launch in Claude Code on the web';
 
-  const options = React.useMemo(
-    () => [
-      {
-        label: 'Run ultraplan',
-        value: 'run' as const,
-        description: runDescription,
-      },
-      { label: 'Not now', value: 'cancel' as const },
-    ],
-    [runDescription],
-  );
-
-  // ------------------------------------------------------------------
-  // Render
-  // ------------------------------------------------------------------
+  const options = [
+    {
+      label: 'Run ultraplan',
+      value: 'run' as const,
+      description: runDescription,
+    },
+    { label: 'Not now', value: 'cancel' as const },
+  ];
 
   return (
-    <PermissionDialog title="Run ultraplan in the cloud?" subtitle={config.timeEstimate}>
+    <Dialog
+      title="Run ultraplan in the cloud?"
+      subtitle={dialogConfig.timeEstimate}
+      onCancel={handleCancel}
+    >
       <Box flexDirection="column" gap={1}>
-        {/* Body + optional warnings */}
         <Box flexDirection="column">
-          <Text dimColor>{config.dialogBody}</Text>
-          {isBridgeEnabled && <Text dimColor>This will disable Remote Control for this session.</Text>}
-          {showTermsLink && (
-            <Text dimColor>
-              For more information on Claude Code on the web: <Link url={CCR_TERMS_URL}>{CCR_TERMS_URL}</Link>
-            </Text>
-          )}
+          <Text dimColor>{dialogConfig.dialogBody}</Text>
+          {
+            showTermsLink
+              ? (
+                  <Text dimColor>
+                  For more information on Claude Code on the web:
+                  <Link url={CCR_TERMS_URL}>{CCR_TERMS_URL}</Link>
+                  </Text>
+                )
+              : null
+          }
         </Box>
 
         {/* Pipeline description (hidden when bridge will be disconnected) */}
-        {!isBridgeEnabled && <Text dimColor>{config.dialogPipeline}</Text>}
+        <Text dimColor>
+          {isBridgeEnabled ? 'This will disable Remote Control for this session.' : dialogConfig.dialogPipeline}
+        </Text>
 
-        {/* Action menu */}
-        <Select options={options} onChange={handleChoice} />
+        <Select
+          options={options}
+          onChange={handleChoice}
+        />
       </Box>
-    </PermissionDialog>
+    </Dialog>
   );
 }