feat(ui): composer UX refresh

- Implement refreshed multi-row status area with flattened visibility logic.
- Stabilize Composer row heights to prevent layout jumping during debounce and typing.
- Refactor renderStatusRow to use a direct flow for Mini(ized) mode, Shell Waiting, and status states.
- Relocate ToastDisplay to top Composer row
- Migrate Composer tests to use real ToastDisplay component and content-based assertions.
- Regenerate all CLI UI snapshots to match the final architecture.

packages/cli/src/ui/components/HookStatusDisplay.tsx

@@ -6,8 +6,8 @@
 
 import type React from 'react';
 import { Text } from 'ink';
-import { theme } from '../semantic-colors.js';
 import { type ActiveHook } from '../types.js';
+import { GENERIC_WORKING_LABEL } from '../textConstants.js';
 
 interface HookStatusDisplayProps {
   activeHooks: ActiveHook[];
@@ -20,20 +20,27 @@ export const HookStatusDisplay: React.FC<HookStatusDisplayProps> = ({
     return null;
   }
 
-  const label = activeHooks.length > 1 ? 'Executing Hooks' : 'Executing Hook';
-  const displayNames = activeHooks.map((hook) => {
-    let name = hook.name;
-    if (hook.index && hook.total && hook.total > 1) {
-      name += ` (${hook.index}/${hook.total})`;
-    }
-    return name;
-  });
+  // Define which hook sources are considered "user" hooks that should be shown explicitly.
+  const USER_HOOK_SOURCES = ['user', 'project', 'runtime'];
 
-  const text = `${label}: ${displayNames.join(', ')}`;
-
-  return (
-    <Text color={theme.status.warning} wrap="truncate">
-      {text}
-    </Text>
+  const userHooks = activeHooks.filter(
+    (h) => !h.source || USER_HOOK_SOURCES.includes(h.source),
   );
+
+  if (userHooks.length > 0) {
+    const label = userHooks.length > 1 ? 'Executing Hooks' : 'Executing Hook';
+    const displayNames = userHooks.map((hook) => {
+      let name = hook.name;
+      if (hook.index && hook.total && hook.total > 1) {
+        name += ` (${hook.index}/${hook.total})`;
+      }
+      return name;
+    });
+
+    const text = `${label}: ${displayNames.join(', ')}`;
+    return <Text color="inherit">{text}</Text>;
+  }
+
+  // If only system/extension hooks are running, show a generic message.
+  return <Text color="inherit">{GENERIC_WORKING_LABEL}</Text>;
 };