triagent 0.1.0-alpha8 → 0.1.0-beta2

package/src/tui/components/message-item.tsx

@@ -0,0 +1,131 @@
+/* @jsxImportSource @opentui/solid */
+import { Show } from "solid-js";
+import type { JSX } from "solid-js";
+import { SyntaxStyle, type ThemeTokenStyle } from "@opentui/core";
+import "opentui-spinner/solid";
+import { createPulse } from "opentui-spinner";
+import { colors, spacing, ATTR_BOLD, ATTR_DIM, ATTR_ITALIC, type AppStatus } from "../theme/index.js";
+
+// Markdown syntax highlighting theme (matching opencode's approach)
+const MARKDOWN_SYNTAX_THEME: ThemeTokenStyle[] = [
+  { scope: ["markup.heading", "markup.heading.1", "markup.heading.2", "markup.heading.3", "markup.heading.4", "markup.heading.5", "markup.heading.6"], style: { foreground: "cyan", bold: true } },
+  { scope: ["markup.strong"], style: { foreground: "white", bold: true } },
+  { scope: ["markup.italic"], style: { foreground: "white", italic: true } },
+  { scope: ["markup.raw", "markup.raw.block"], style: { foreground: "yellow" } },
+  { scope: ["markup.quote"], style: { foreground: "gray", italic: true } },
+  { scope: ["markup.list", "markup.list.unchecked", "markup.list.checked"], style: { foreground: "gray" } },
+  { scope: ["markup.link", "markup.link.url"], style: { foreground: "cyan", underline: true } },
+  { scope: ["markup.link.label", "markup.link.bracket.close"], style: { foreground: "blue" } },
+  { scope: ["markup.strikethrough"], style: { foreground: "gray", dim: true } },
+  { scope: ["label"], style: { foreground: "gray", dim: true } },
+  { scope: ["punctuation.special", "punctuation.delimiter"], style: { foreground: "gray" } },
+  { scope: ["string.escape"], style: { foreground: "magenta" } },
+];
+
+const markdownSyntaxStyle = SyntaxStyle.fromTheme(MARKDOWN_SYNTAX_THEME);
+
+export interface Message {
+  id: string;
+  role: "user" | "assistant" | "tool";
+  content: string;
+  timestamp: Date;
+  toolName?: string;
+  command?: string;
+}
+
+export interface MessageItemProps {
+  message: Message;
+  status: AppStatus;
+  isLastToolMessage: boolean;
+  isLastUserMessage?: boolean;
+  hasAssistantResponse?: boolean;
+  streaming?: boolean;
+}
+
+/**
+ * MarkdownText - Renders markdown content with syntax highlighting
+ */
+function MarkdownText(props: { content: string; streaming?: boolean }): JSX.Element {
+  return (
+    <code
+      filetype="markdown"
+      content={props.content.trim()}
+      syntaxStyle={markdownSyntaxStyle}
+      conceal={true}
+      drawUnstyledText={false}
+      streaming={props.streaming ?? false}
+      fg={colors.text.primary}
+    />
+  );
+}
+
+/**
+ * MessageItem - Individual message rendering with role-based styling
+ * OpenCode-inspired layout:
+ * - User messages: left border with content
+ * - Tool calls: bordered box showing command
+ * - Assistant messages: plain markdown content
+ */
+export function MessageItem(props: MessageItemProps): JSX.Element {
+  // Note: Don't destructure reactive props in SolidJS - access via props.xxx to maintain reactivity
+  const { message, streaming } = props;
+
+  // Show investigating spinner below user message when agent is working but no assistant response yet
+  // Access props directly to maintain SolidJS reactivity
+  const showInvestigatingSpinner = () =>
+    props.isLastUserMessage && props.status === "investigating" && !props.hasAssistantResponse;
+
+  return (
+    <box flexDirection="column">
+      {/* User message - left border, no label (opencode style) */}
+      <Show when={message.role === "user"}>
+        <box flexDirection="column">
+          {/* Message with left border using text character */}
+          <box flexDirection="row">
+            <text fg={colors.border.muted}>│ </text>
+            <text fg={colors.text.primary}>{message.content}</text>
+          </box>
+          {/* Spinner during investigation (shown below user message) */}
+          <Show when={showInvestigatingSpinner()}>
+            <box flexDirection="row" paddingLeft={2}>
+              <spinner name="dots" color={createPulse(["cyan", "blue", "magenta"], 200)} />
+              <text fg={colors.text.secondary} attributes={ATTR_ITALIC}> Investigating...</text>
+            </box>
+          </Show>
+        </box>
+      </Show>
+
+      {/* Tool message - bordered box showing command (opencode style) */}
+      <Show when={message.role === "tool"}>
+        <box
+          borderStyle="single"
+          borderColor={colors.role.tool}
+          paddingLeft={1}
+          paddingRight={1}
+        >
+          <box flexDirection="row" gap={1}>
+            {/* Status indicator - checkmark for completed, pause for awaiting approval */}
+            <Show when={props.status === "awaiting_approval" && props.isLastToolMessage} fallback={<text fg={colors.success}>✓</text>}>
+              <text fg={colors.warning}>⏸</text>
+            </Show>
+            {/* Tool name badge */}
+            <text fg={colors.role.tool} attributes={ATTR_BOLD}>
+              [{message.toolName}]
+            </text>
+            {/* Command */}
+            <text fg={colors.text.secondary}>
+              {message.content}
+            </text>
+          </box>
+        </box>
+      </Show>
+
+      {/* Assistant message - no label, direct markdown content (opencode style) */}
+      <Show when={message.role === "assistant"}>
+        <box flexDirection="column" paddingLeft={1}>
+          <MarkdownText content={message.content} streaming={streaming} />
+        </box>
+      </Show>
+    </box>
+  );
+}

package/src/tui/components/messages-panel.tsx

@@ -0,0 +1,71 @@
+/* @jsxImportSource @opentui/solid */
+import { For, Show } from "solid-js";
+import type { JSX } from "solid-js";
+import { colors, spacing, ATTR_DIM, type AppStatus } from "../theme/index.js";
+import { MessageItem, type Message } from "./message-item.js";
+export type { Message };
+
+export interface MessagesPanelProps {
+  messages: Message[];
+  status: AppStatus;
+}
+
+/**
+ * MessagesPanel - Scrollable messages container with empty state
+ */
+export function MessagesPanel(props: MessagesPanelProps): JSX.Element {
+  const getLastToolMessageId = (): string | undefined => {
+    const toolMessages = props.messages.filter((m) => m.role === "tool");
+    return toolMessages.at(-1)?.id;
+  };
+
+  const getLastUserMessageId = (): string | undefined => {
+    const userMessages = props.messages.filter((m) => m.role === "user");
+    return userMessages.at(-1)?.id;
+  };
+
+  const hasToolMessages = (): boolean => {
+    return props.messages.some((m) => m.role === "tool");
+  };
+
+  const hasAssistantMessages = (): boolean => {
+    return props.messages.some((m) => m.role === "assistant");
+  };
+
+  return (
+    <scrollbox
+      flexGrow={1}
+      borderStyle="single"
+      borderColor={colors.border.default}
+      paddingLeft={spacing.xs}
+      paddingRight={spacing.xs}
+      stickyScroll
+      stickyStart="bottom"
+    >
+      <box flexDirection="column" gap={0}>
+        <Show
+          when={props.messages.length > 0}
+          fallback={
+            <box paddingTop={spacing.sm} paddingBottom={spacing.sm}>
+              <text fg={colors.text.secondary} attributes={ATTR_DIM}>
+                Enter an incident description to start investigating...
+              </text>
+            </box>
+          }
+        >
+          <For each={props.messages}>
+            {(msg) => (
+              <MessageItem
+                message={msg}
+                status={props.status}
+                isLastToolMessage={msg.id === getLastToolMessageId()}
+                isLastUserMessage={msg.id === getLastUserMessageId()}
+                hasAssistantResponse={hasAssistantMessages()}
+              />
+            )}
+          </For>
+        </Show>
+      </box>
+    </scrollbox>
+  );
+}

package/src/tui/components/status-badge.tsx

@@ -0,0 +1,20 @@
+/* @jsxImportSource @opentui/solid */
+import type { JSX } from "solid-js";
+import { ATTR_BOLD, getStatusColor, getStatusText, type AppStatus } from "../theme/index.js";
+
+export interface StatusBadgeProps {
+  status: AppStatus;
+  currentTool?: string | null;
+}
+
+/**
+ * StatusBadge - Status indicator showing Ready/Investigating/Awaiting Approval/Error
+ * Displays current app state with appropriate color coding
+ */
+export function StatusBadge(props: StatusBadgeProps): JSX.Element {
+  return (
+    <text fg={getStatusColor(props.status)} attributes={ATTR_BOLD}>
+      [{getStatusText(props.status, props.currentTool)}]
+    </text>
+  );
+}

package/src/tui/components/status-bar.tsx

@@ -0,0 +1,39 @@
+/* @jsxImportSource @opentui/solid */
+import { Show } from "solid-js";
+import type { JSX } from "solid-js";
+import { colors, spacing, ATTR_BOLD, ATTR_DIM, type AppStatus } from "../theme/index.js";
+
+export interface StatusBarProps {
+  status: AppStatus;
+  messageCount: number;
+}
+
+/**
+ * StatusBar - Bottom bar showing mode, keyboard hints, and message count
+ */
+export function StatusBar(props: StatusBarProps): JSX.Element {
+  return (
+    <box
+      paddingLeft={spacing.sm}
+      paddingRight={spacing.sm}
+      flexDirection="row"
+      justifyContent="space-between"
+    >
+      <Show
+        when={props.status === "awaiting_approval"}
+        fallback={
+          <text fg={colors.text.secondary} attributes={ATTR_DIM}>
+            Press Enter to submit | Ctrl+C to quit
+          </text>
+        }
+      >
+        <text fg={colors.warning} attributes={ATTR_BOLD}>
+          Approval required: Y/N or Enter
+        </text>
+      </Show>
+      <text fg={colors.text.secondary} attributes={ATTR_DIM}>
+        {props.messageCount} messages
+      </text>
+    </box>
+  );
+}

package/src/tui/components/styled-span.tsx

@@ -0,0 +1,24 @@
+/* @jsxImportSource @opentui/solid */
+/**
+ * Styled span component that properly types fg/bg/attributes props.
+ * This is a workaround for @opentui/solid's SpanProps not including TextNodeOptions.
+ */
+
+import type { JSX } from "solid-js";
+import type { RGBA } from "@opentui/core";
+
+export interface StyledSpanProps {
+  children?: JSX.Element | string | number | (JSX.Element | string | number)[];
+  fg?: string | RGBA;
+  bg?: string | RGBA;
+  attributes?: number;
+}
+
+/**
+ * A span element with proper typing for fg, bg, and attributes props.
+ * Use this instead of <span> when you need color styling.
+ */
+export function StyledSpan(props: StyledSpanProps): JSX.Element {
+  // Cast to any to bypass type checking since the runtime supports these props
+  return <span {...(props as any)} />;
+}

package/src/tui/components/timeline.tsx

@@ -0,0 +1,223 @@
+/* @jsxImportSource @opentui/solid */
+import { For, Show, type JSX } from "solid-js";
+import { createTextAttributes } from "@opentui/core";
+import type { InvestigationEvent, ToolCallRecord } from "../../storage/types.js";
+
+const ATTR_DIM = createTextAttributes({ dim: true });
+const ATTR_BOLD = createTextAttributes({ bold: true });
+
+export interface TimelineEvent {
+  id: string;
+  timestamp: Date;
+  type: "tool_call" | "alert" | "k8s_event" | "log_entry" | "user_action";
+  title: string;
+  details?: string;
+  severity?: "critical" | "warning" | "info" | "success";
+}
+
+interface TimelineProps {
+  events: TimelineEvent[];
+  maxHeight?: number;
+  showTimestamps?: boolean;
+}
+
+function getSeverityColor(severity?: TimelineEvent["severity"]): string {
+  switch (severity) {
+    case "critical":
+      return "red";
+    case "warning":
+      return "yellow";
+    case "success":
+      return "green";
+    case "info":
+    default:
+      return "blue";
+  }
+}
+
+function getEventIcon(type: TimelineEvent["type"]): string {
+  switch (type) {
+    case "tool_call":
+      return "⚙";
+    case "alert":
+      return "🔔";
+    case "k8s_event":
+      return "☸";
+    case "log_entry":
+      return "📝";
+    case "user_action":
+      return "👤";
+    default:
+      return "•";
+  }
+}
+
+function formatTime(date: Date): string {
+  return date.toLocaleTimeString("en-US", {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: false,
+  });
+}
+
+function formatRelativeTime(date: Date): string {
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffSec = Math.floor(diffMs / 1000);
+  const diffMin = Math.floor(diffSec / 60);
+  const diffHour = Math.floor(diffMin / 60);
+
+  if (diffSec < 60) {
+    return `${diffSec}s ago`;
+  } else if (diffMin < 60) {
+    return `${diffMin}m ago`;
+  } else if (diffHour < 24) {
+    return `${diffHour}h ago`;
+  } else {
+    return date.toLocaleDateString();
+  }
+}
+
+export function Timeline(props: TimelineProps): JSX.Element {
+  const showTimestamps = props.showTimestamps ?? true;
+
+  return (
+    <box flexDirection="column" gap={0}>
+      <Show
+        when={props.events.length > 0}
+        fallback={
+          <text fg="gray" attributes={ATTR_DIM}>
+            No events to display
+          </text>
+        }
+      >
+        <For each={props.events}>
+          {(event, index) => {
+            const color = getSeverityColor(event.severity);
+            const icon = getEventIcon(event.type);
+            const isLast = index() === props.events.length - 1;
+
+            return (
+              <box flexDirection="row" gap={1}>
+                {/* Timeline line */}
+                <box flexDirection="column" width={3} alignItems="center">
+                  <text fg={color}>{icon}</text>
+                  <Show when={!isLast}>
+                    <text fg="gray" attributes={ATTR_DIM}>│</text>
+                  </Show>
+                </box>
+
+                {/* Event content */}
+                <box flexDirection="column" flexGrow={1}>
+                  <box flexDirection="row" gap={1}>
+                    <text fg={color} attributes={ATTR_BOLD}>
+                      {event.title}
+                    </text>
+                    <Show when={showTimestamps}>
+                      <text fg="gray" attributes={ATTR_DIM}>
+                        ({formatRelativeTime(event.timestamp)})
+                      </text>
+                    </Show>
+                  </box>
+                  <Show when={event.details}>
+                    <text fg="gray" attributes={ATTR_DIM}>
+                      {event.details}
+                    </text>
+                  </Show>
+                </box>
+              </box>
+            );
+          }}
+        </For>
+      </Show>
+    </box>
+  );
+}
+
+// Helper to convert investigation events to timeline events
+export function investigationEventsToTimeline(
+  events: InvestigationEvent[],
+  toolCalls: ToolCallRecord[]
+): TimelineEvent[] {
+  const timelineEvents: TimelineEvent[] = [];
+
+  // Add tool calls
+  for (const tc of toolCalls) {
+    timelineEvents.push({
+      id: tc.id,
+      timestamp: tc.timestamp,
+      type: "tool_call",
+      title: `Tool: ${tc.toolName}`,
+      details: tc.args?.command ? `$ ${tc.args.command}` : undefined,
+      severity: tc.error ? "warning" : "success",
+    });
+  }
+
+  // Add investigation events
+  for (const event of events) {
+    let severity: TimelineEvent["severity"] = "info";
+    if (event.type === "alert") {
+      severity = "warning";
+    } else if (event.type === "k8s_event") {
+      const data = event.data as { type?: string };
+      severity = data.type === "Warning" ? "warning" : "info";
+    }
+
+    timelineEvents.push({
+      id: event.id,
+      timestamp: event.timestamp,
+      type: event.type,
+      title: event.source,
+      details: JSON.stringify(event.data).slice(0, 100),
+      severity,
+    });
+  }
+
+  // Sort by timestamp descending (most recent first)
+  timelineEvents.sort((a, b) => b.timestamp.getTime() - a.timestamp.getTime());
+
+  return timelineEvents;
+}
+
+interface CompactTimelineProps {
+  events: TimelineEvent[];
+  maxEvents?: number;
+}
+
+export function CompactTimeline(props: CompactTimelineProps): JSX.Element {
+  const maxEvents = props.maxEvents ?? 5;
+  const displayEvents = () => props.events.slice(0, maxEvents);
+  const hasMore = () => props.events.length > maxEvents;
+
+  return (
+    <box flexDirection="column">
+      <text fg="cyan" attributes={ATTR_BOLD}>
+        Recent Events
+      </text>
+      <box flexDirection="column" marginTop={1}>
+        <For each={displayEvents()}>
+          {(event) => {
+            const color = getSeverityColor(event.severity);
+            const icon = getEventIcon(event.type);
+
+            return (
+              <box flexDirection="row" gap={1}>
+                <text fg={color}>{icon}</text>
+                <text fg="white">{event.title}</text>
+                <text fg="gray" attributes={ATTR_DIM}>
+                  {formatRelativeTime(event.timestamp)}
+                </text>
+              </box>
+            );
+          }}
+        </For>
+        <Show when={hasMore()}>
+          <text fg="gray" attributes={ATTR_DIM}>
+            ... and {props.events.length - maxEvents} more events
+          </text>
+        </Show>
+      </box>
+    </box>
+  );
+}

package/src/tui/components/toast.tsx

@@ -0,0 +1,104 @@
+/* @jsxImportSource @opentui/solid */
+import { Toaster, toast, useToasts } from "@opentui-ui/toast/solid";
+import { TOAST_DURATION } from "@opentui-ui/toast";
+import type { JSX } from "solid-js";
+import { colors, spacing } from "../theme/index.js";
+
+// Re-export toast function and duration constants for app-wide use
+export { toast, TOAST_DURATION, useToasts };
+
+export interface ToastProviderProps {
+  children: JSX.Element;
+}
+
+/**
+ * Toast provider component that wraps the application
+ * Provides toast notifications positioned at the bottom-right
+ */
+export function ToastProvider(props: ToastProviderProps): JSX.Element {
+  return (
+    <>
+      {props.children}
+      <Toaster
+        position="bottom-right"
+        gap={1}
+        maxWidth={50}
+        closeButton={true}
+        toastOptions={{
+          duration: TOAST_DURATION.DEFAULT,
+          style: {
+            borderStyle: "single",
+            borderColor: colors.border.default,
+            backgroundColor: colors.background.primary,
+            paddingLeft: spacing.xs,
+            paddingRight: spacing.xs,
+            paddingTop: 0,
+            paddingBottom: 0,
+          },
+        }}
+      />
+    </>
+  );
+}
+
+// Helper functions for common toast patterns
+
+/**
+ * Show a success toast notification
+ */
+export function toastSuccess(message: string, description?: string) {
+  return toast.success(message, { description, duration: TOAST_DURATION.SHORT });
+}
+
+/**
+ * Show an error toast notification
+ */
+export function toastError(message: string, description?: string) {
+  return toast.error(message, { description, duration: TOAST_DURATION.LONG });
+}
+
+/**
+ * Show a warning toast notification
+ */
+export function toastWarning(message: string, description?: string) {
+  return toast.warning(message, { description, duration: TOAST_DURATION.LONG });
+}
+
+/**
+ * Show an info toast notification
+ */
+export function toastInfo(message: string, description?: string) {
+  return toast.info(message, { description, duration: TOAST_DURATION.DEFAULT });
+}
+
+/**
+ * Show a loading toast that can be updated when operation completes
+ */
+export function toastLoading(message: string) {
+  return toast.loading(message, { duration: TOAST_DURATION.PERSISTENT });
+}
+
+/**
+ * Dismiss a specific toast or all toasts
+ */
+export function toastDismiss(id?: string | number) {
+  if (id !== undefined) {
+    toast.dismiss(id);
+  } else {
+    toast.dismiss();
+  }
+}
+
+/**
+ * Show toast with promise handling - loading, success, error states
+ */
+export function toastPromise<T>(
+  promise: Promise<T>,
+  messages: {
+    loading?: string;
+    success?: string | ((data: T) => string);
+    error?: string | ((err: unknown) => string);
+  }
+) {
+  return toast.promise(promise, messages);
+}

package/src/tui/theme/index.ts

@@ -0,0 +1,21 @@
+/**
+ * Theme exports for Triagent TUI
+ */
+
+export {
+  colors,
+  spacing,
+  layout,
+  ATTR_BOLD,
+  ATTR_DIM,
+  ATTR_ITALIC,
+  ATTR_UNDERLINE,
+  ATTR_BOLD_DIM,
+  getRiskColor,
+  getRiskHexColor,
+  getRiskEmoji,
+  getStatusColor,
+  getStatusText,
+  type RiskLevel,
+  type AppStatus,
+} from "./tokens.js";