Improved help banner UX

Author: jahooma

cli/src/components/help-banner.tsx

@@ -2,12 +2,37 @@ import React from 'react'
 
 import { BottomBanner } from './bottom-banner'
 import { useChatStore } from '../state/chat-store'
+import { useTheme } from '../hooks/use-theme'
 
 const HELP_TIMEOUT = 60 * 1000 // 60 seconds
 
-/** Help banner showing keyboard shortcuts and tips. */
+/** Section header component for consistent styling */
+const SectionHeader = ({ children }: { children: React.ReactNode }) => {
+  const theme = useTheme()
+  return <text style={{ fg: theme.muted }}>{children}</text>
+}
+
+/** Keyboard shortcut item */
+const Shortcut = ({
+  keys,
+  action,
+}: {
+  keys: string
+  action: string
+}) => {
+  const theme = useTheme()
+  return (
+    <box style={{ flexDirection: 'row', gap: 1 }}>
+      <text style={{ fg: theme.foreground }}>{keys}</text>
+      <text style={{ fg: theme.muted }}>{action}</text>
+    </box>
+  )
+}
+
+/** Help banner showing keyboard shortcuts and tips in an organized layout. */
 export const HelpBanner = () => {
   const setInputMode = useChatStore((state) => state.setInputMode)
+  const theme = useTheme()
 
   // Auto-hide after timeout
   React.useEffect(() => {
@@ -20,10 +45,49 @@ export const HelpBanner = () => {
   return (
     <BottomBanner
       borderColorKey="info"
-      text={`Shortcuts: /commands • Ctrl+C stop • Ctrl+J or Option+Enter newline • @files/agents • ↑↓ history • !bash commands
-
-1 credit = 1 cent. Buy more with /buy-credits. Earn more from ads. Connect your Claude Subscription to pay for Claude models (Default and Max modes).`}
       onClose={() => setInputMode('default')}
-    />
+    >
+      <box style={{ flexDirection: 'column', gap: 1, flexGrow: 1 }}>
+        {/* Shortcuts Section */}
+        <box style={{ flexDirection: 'column', gap: 0 }}>
+          <SectionHeader>Shortcuts</SectionHeader>
+          <box style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 2, paddingLeft: 2 }}>
+            <Shortcut keys="Ctrl+C / Esc" action="stop" />
+            <Shortcut keys="Ctrl+J / Opt+Enter" action="newline" />
+            <Shortcut keys="↑↓" action="history" />
+          </box>
+        </box>
+
+        {/* Features Section */}
+        <box style={{ flexDirection: 'column', gap: 0 }}>
+          <SectionHeader>Features</SectionHeader>
+          <box style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 2, paddingLeft: 2 }}>
+            <Shortcut keys="/" action="commands" />
+            <Shortcut keys="@files" action="mention" />
+            <Shortcut keys="@agents" action="use agent" />
+            <Shortcut keys="!bash" action="run command" />
+          </box>
+        </box>
+
+        {/* Credits Section */}
+        <box style={{ flexDirection: 'column', gap: 0 }}>
+          <SectionHeader>Credits</SectionHeader>
+          <box style={{ flexDirection: 'column', paddingLeft: 2 }}>
+            <box style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 1 }}>
+              <text style={{ fg: theme.foreground }}>1 credit = 1 cent</text>
+              <text style={{ fg: theme.muted }}>·</text>
+              <text style={{ fg: theme.foreground }}>/buy-credits</text>
+              <text style={{ fg: theme.muted }}>·</text>
+              <text style={{ fg: theme.foreground }}>/usage</text>
+              <text style={{ fg: theme.muted }}>·</text>
+              <text style={{ fg: theme.foreground }}>/ads:enable</text>
+            </box>
+            <text style={{ fg: theme.muted }}>
+              Connect your Claude subscription for Default & Max modes
+            </text>
+          </box>
+        </box>
+      </box>
+    </BottomBanner>
   )
 }