add more notes

packages/cli/src/ui/components/hooks/HooksDisabledStep.tsx

@@ -15,7 +15,9 @@ interface HooksDisabledStepProps {
 export function HooksDisabledStep({
   configuredHooksCount,
 }: HooksDisabledStepProps): React.JSX.Element {
-  // Get the correct plural/singular form
+  // Note: The i18n t() function expects string parameters (Record<string, string>).
+  // Pluralization is handled manually by selecting the appropriate translation key
+  // based on the count, since the i18n system doesn't support ICU MessageFormat.
   const hooksText =
     configuredHooksCount === 1
       ? t('{{count}} configured hook', { count: String(configuredHooksCount) })
@@ -49,6 +51,9 @@ export function HooksDisabledStep({
         <Text bold color={theme.text.primary}>
           {t('When hooks are disabled:')}
         </Text>
+        {/* Note: Using middle dot (·) as bullet character. This is consistent with
+            other CLI components. If a design system evolves, consider extracting
+            to a shared constant or using a BulletList component. */}
         <Box>
           <Text color={theme.text.secondary}>
             {`  · ${t('No hook commands will execute')}`}

packages/cli/src/ui/components/hooks/HooksManagementDialog.tsx

@@ -113,6 +113,10 @@ export function HooksManagementDialog({
   const boxWidth = width - 4;
 
   // Check if hooks are disabled
+  // Note: This value is captured at dialog open time. If disableAllHooks
+  // changes while the dialog is open (e.g., via settings.json edit),
+  // the dialog will not react to the change until it's closed and reopened.
+  // This is intentional - the dialog represents a snapshot of the current state.
   const disableAllHooks = config?.getDisableAllHooks() ?? false;
 
   const [navigationStack, setNavigationStack] = useState<string[]>([

packages/cli/src/ui/components/hooks/constants.ts

@@ -185,7 +185,10 @@ export function getTranslatedSourceDisplayMap(): Record<
 
 /**
  * List of hook events to display in the UI
- * Automatically synced with HookEventName enum from core
+ * Automatically synced with HookEventName enum from core.
+ * Note: Order follows the enum definition order. If UI presentation order
+ * needs to be different (e.g., grouped by lifecycle phase), consider using
+ * an explicit sorted array instead. Current enum order is acceptable for display.
  */
 export const DISPLAY_HOOK_EVENTS: HookEventName[] =
   Object.values(HookEventName);