Merge pull request #73 from moazbuilds/feat/ascii-faces

Feat/ascii faces for agents

Author: moazbuilds

config/agent-characters.json

@@ -0,0 +1,105 @@
+{
+  "personas": {
+    "friendly": {
+      "baseFace": "(˶ᵔ ᵕ ᵔ˶)",
+      "expressions": {
+        "thinking": "(╭ರ_•́)",
+        "tool": "(•̀ᴗ•́)و",
+        "error": "(╥﹏╥)",
+        "idle": "(˶ᵔ ᵕ ᵔ˶)"
+      },
+      "phrases": {
+        "thinking": ["Hmm, let me think...", "Processing..."],
+        "tool": ["On it!", "Working..."],
+        "error": ["Oops, something went wrong", "Let me try again"],
+        "idle": ["Ready when you are", "Waiting..."]
+      }
+    },
+    "analytical": {
+      "baseFace": "[•_•]",
+      "expressions": {
+        "thinking": "[•_•]~",
+        "tool": "[◉_◉]",
+        "error": "[x_x]",
+        "idle": "[•_•]"
+      },
+      "phrases": {
+        "thinking": ["Analyzing...", "Computing..."],
+        "tool": ["Executing...", "Running..."],
+        "error": ["Error encountered", "Retrying..."],
+        "idle": ["Standing by", "Awaiting input"]
+      }
+    },
+    "cheerful": {
+      "baseFace": "◕‿◕",
+      "expressions": {
+        "thinking": "◕~◕",
+        "tool": "◕!◕",
+        "error": "◕_◕",
+        "idle": "◕‿◕"
+      },
+      "phrases": {
+        "thinking": ["Pondering...", "Considering..."],
+        "tool": ["Let me do that!", "Working on it..."],
+        "error": ["Hmm, that didn't work", "Let me try again"],
+        "idle": ["Here to help!", "Ready for action"]
+      }
+    },
+    "technical": {
+      "baseFace": "{•_•}",
+      "expressions": {
+        "thinking": "{•~•}",
+        "tool": "{•!•}",
+        "error": "{•x•}",
+        "idle": "{•_•}"
+      },
+      "phrases": {
+        "thinking": ["Processing...", "Analyzing..."],
+        "tool": ["Executing...", "Working..."],
+        "error": ["Error", "Retrying..."],
+        "idle": ["Ready", "Waiting..."]
+      }
+    },
+    "precise": {
+      "baseFace": "<•_•>",
+      "expressions": {
+        "thinking": "<•~•>",
+        "tool": "<•!•>",
+        "error": "<•x•>",
+        "idle": "<•_•>"
+      },
+      "phrases": {
+        "thinking": ["Evaluating...", "Checking..."],
+        "tool": ["Validating...", "Running checks..."],
+        "error": ["Issue detected", "Reviewing..."],
+        "idle": ["Ready", "Monitoring..."]
+      }
+    }
+  },
+  "agents": {
+    "bmad-analyst": "friendly",
+    "bmad-pm": "analytical",
+    "bmad-ux": "cheerful",
+    "bmad-architect": "analytical",
+    "bmad-epics": "analytical",
+    "bmad-tea": "precise",
+    "bmad-readiness": "precise",
+    "bmad-sprints": "cheerful",
+    "bmad-stories": "cheerful",
+    "bmad-dev": "technical",
+    "bmad-po": "analytical",
+    "cm-workflow-builder": "friendly",
+    "init": "friendly",
+    "principal-analyst": "analytical",
+    "blueprint-orchestrator": "analytical",
+    "plan-agent": "analytical",
+    "task-breakdown": "technical",
+    "context-manager": "technical",
+    "code-generation": "technical",
+    "task-sanity-check": "precise",
+    "runtime-prep": "technical",
+    "git-commit": "technical",
+    "plan-fallback": "analytical"
+  },
+  "defaultPersona": "friendly"
+}

src/cli/tui/routes/workflow/components/modals/log-viewer/index.tsx

@@ -22,17 +22,27 @@ export interface LogViewerProps {
 export function LogViewer(props: LogViewerProps) {
   const dimensions = useTerminalDimensions()
 
-  const monitoringId = () => props.getMonitoringId(props.agentId)
-  const logStream = useLogStream(monitoringId)
-
   const visibleLines = createMemo(() => {
     const height = dimensions()?.height ?? 40
     return Math.max(5, height - 9)
   })
 
-  // Close on Escape
+  const logStream = useLogStream({
+    monitoringAgentId: () => props.getMonitoringId(props.agentId),
+    visibleLineCount: visibleLines
+  })
+
+  // Handle keyboard navigation
+  const handleLoadEarlier = () => {
+    if (logStream.hasMoreAbove) {
+      logStream.loadEarlierLines()
+    }
+  }
+
   useModalKeyboard({
     onClose: props.onClose,
+    onGoTop: handleLoadEarlier,  // g key loads earlier lines
+    onPageUp: handleLoadEarlier, // PageUp also loads earlier lines
   })
 
   return (
@@ -50,9 +60,16 @@ export function LogViewer(props: LogViewerProps) {
         error={logStream.error}
         visibleHeight={visibleLines()}
         isRunning={logStream.isRunning}
+        totalLineCount={logStream.totalLineCount}
+        hasMoreAbove={logStream.hasMoreAbove}
+        isLoadingEarlier={logStream.isLoadingEarlier}
+        loadEarlierError={logStream.loadEarlierError}
+        onLoadMore={() => logStream.loadEarlierLines()}
+        onPauseTrimmingChange={(paused) => logStream.setPauseTrimming(paused)}
       />
       <LogFooter
-        total={logStream.lines.length}
+        total={logStream.totalLineCount}
+        hasMoreAbove={logStream.hasMoreAbove}
         isRunning={logStream.isRunning}
       />
     </box>

src/cli/tui/routes/workflow/components/modals/log-viewer/log-content.tsx

@@ -5,11 +5,13 @@
  * Displays scrollable log lines with OpenTUI scrollbox.
  */
 
-import { Show, For } from "solid-js"
+import type { ScrollBoxRenderable } from "@opentui/core"
+import { Show, For, createSignal, createEffect, onCleanup, on } from "solid-js"
 import { useTheme } from "@tui/shared/context/theme"
 import { LogLine } from "../../shared/log-line"
 import { LogTable } from "../../shared/log-table"
 import { groupLinesWithTables } from "../../shared/markdown-table"
+import { debug } from "../../../../../../../shared/logging/logger.js"
 
 export interface LogContentProps {
   lines: string[]
@@ -18,10 +20,88 @@ export interface LogContentProps {
   error: string | null
   visibleHeight: number
   isRunning?: boolean
+  totalLineCount?: number
+  hasMoreAbove?: boolean
+  isLoadingEarlier?: boolean
+  loadEarlierError?: string | null
+  onLoadMore?: () => number
+  onPauseTrimmingChange?: (paused: boolean) => void
 }
 
 export function LogContent(props: LogContentProps) {
+  debug('[LogContent] Component rendering, lines=%d, isLoading=%s, hasMoreAbove=%s',
+    props.lines.length, props.isLoading, props.hasMoreAbove)
+
   const themeCtx = useTheme()
+  const [scrollRef, setScrollRef] = createSignal<ScrollBoxRenderable | undefined>()
+  const [userScrolledAway, setUserScrolledAway] = createSignal(false)
+
+  // Reset userScrolledAway when lines reset (indicates agent/log change)
+  // Use on() to explicitly track only lines.length, preventing unintended effect re-runs
+  createEffect(
+    on(
+      () => props.lines.length,
+      (currentCount, prev) => {
+        // If lines dropped significantly (more than 50% or to near zero), it's a new log
+        if (prev !== undefined && prev > 10 && currentCount < prev * 0.5) {
+          debug('[LogContent] Lines reset detected (prev=%d, current=%d), resetting scroll state', prev, currentCount)
+          setUserScrolledAway(false)
+        }
+      }
+    )
+  )
+
+  // Handle scroll events: load earlier lines + track if user scrolled away from bottom
+  // Use on() to only track scrollRef changes, not other props
+  createEffect(
+    on(scrollRef, (ref) => {
+      debug('[LogContent] Effect running, ref exists: %s', !!ref)
+      if (!ref) return
+
+      const handleScrollChange = () => {
+        const scrollTop = ref.scrollTop
+        const scrollHeight = ref.scrollHeight
+        const viewportHeight = ref.height
+        const maxScroll = Math.max(0, scrollHeight - viewportHeight)
+        const isAtBottom = scrollTop >= maxScroll - 3
+
+        debug('[LogContent] scroll: top=%d, max=%d, atBottom=%s, hasMore=%s', scrollTop, maxScroll, isAtBottom, props.hasMoreAbove)
+
+        // Track if user scrolled away from bottom (to disable stickyScroll)
+        if (!isAtBottom && !userScrolledAway()) {
+          debug('[LogContent] User scrolled away from bottom')
+          setUserScrolledAway(true)
+        } else if (isAtBottom && userScrolledAway()) {
+          debug('[LogContent] User returned to bottom')
+          setUserScrolledAway(false)
+        }
+
+        // Trigger load when near the top (within 3 lines) - skip if already loading
+        if (scrollTop <= 3 && props.hasMoreAbove && props.onLoadMore && !props.isLoadingEarlier) {
+          debug('[LogContent] Loading earlier lines...')
+          const linesLoaded = props.onLoadMore()
+          debug('[LogContent] Lines loaded: %d', linesLoaded)
+          if (linesLoaded > 0) {
+            ref.scrollTop = linesLoaded  // Maintain view position
+          }
+        }
+      }
+
+      debug('[LogContent] Setting up scroll listener, verticalScrollBar exists: %s', !!ref.verticalScrollBar)
+      ref.verticalScrollBar?.on("change", handleScrollChange)
+      onCleanup(() => ref.verticalScrollBar?.off("change", handleScrollChange))
+    })
+  )
+
+  // Compute whether stickyScroll should be active (only when running AND user hasn't scrolled away)
+  const shouldStickyScroll = () => (props.isRunning ?? true) && !userScrolledAway()
+
+  // Notify parent when user scrolls away (to pause trimming in log stream)
+  createEffect(
+    on(userScrolledAway, (scrolledAway) => {
+      props.onPauseTrimmingChange?.(scrolledAway)
+    })
+  )
 
   return (
     <box flexGrow={1} flexDirection="column" paddingLeft={1} paddingRight={1} paddingTop={1}>
@@ -52,10 +132,19 @@ export function LogContent(props: LogContentProps) {
             </box>
           }
         >
+          {/* Loading earlier lines indicator */}
+          <Show when={props.isLoadingEarlier}>
+            <text fg={themeCtx.theme.info}>↑ Loading earlier lines...</text>
+          </Show>
+          {/* Error loading earlier lines */}
+          <Show when={props.loadEarlierError}>
+            <text fg={themeCtx.theme.error}>↑ Error: {props.loadEarlierError}</text>
+          </Show>
           <scrollbox
+            ref={(r: ScrollBoxRenderable) => setScrollRef(r)}
             height={props.visibleHeight}
             width="100%"
-            stickyScroll={props.isRunning ?? true}
+            stickyScroll={shouldStickyScroll()}
             stickyStart="bottom"
             scrollbarOptions={{
               showArrows: true,

src/cli/tui/routes/workflow/components/modals/log-viewer/log-footer.tsx

@@ -11,6 +11,7 @@ import { useTheme } from "@tui/shared/context/theme"
 export interface LogFooterProps {
   total: number
   isRunning: boolean
+  hasMoreAbove?: boolean
 }
 
 export function LogFooter(props: LogFooterProps) {
@@ -20,17 +21,21 @@ export function LogFooter(props: LogFooterProps) {
     <>
       <Show when={props.total > 0}>
         <box paddingLeft={1} paddingRight={1} flexDirection="row">
+          <Show when={props.hasMoreAbove}>
+            <text fg={themeCtx.theme.textMuted}>... </text>
+          </Show>
           <text fg={themeCtx.theme.textMuted}>
             {props.total} lines
           </text>
           <Show when={props.isRunning}>
-            <text fg={themeCtx.theme.warning}> • Live updates enabled</text>
+            <text fg={themeCtx.theme.warning}> • Live</text>
           </Show>
         </box>
       </Show>
       <box paddingLeft={1} paddingRight={1}>
         <text fg={themeCtx.theme.textMuted}>
           [Esc] Close  [Up/Down] Scroll
+          <Show when={props.hasMoreAbove}>  [g] Load earlier</Show>
         </text>
       </box>
     </>