triagent 0.1.0-alpha9 → 0.1.0-beta2

package/src/tui/components/approval-dialog.tsx

@@ -0,0 +1,147 @@
+/* @jsxImportSource @opentui/solid */
+import { DialogProvider, useDialog, useDialogKeyboard, type ConfirmContext } from "@opentui-ui/dialog/solid";
+import type { JSX, ParentProps } from "solid-js";
+import {
+  colors,
+  spacing,
+  ATTR_BOLD,
+  ATTR_DIM,
+  getRiskColor,
+  getRiskHexColor,
+  type RiskLevel,
+} from "../theme/index.js";
+
+export type { RiskLevel };
+
+export interface ApprovalDialogOptions {
+  command: string;
+  riskLevel: RiskLevel;
+  description?: string;
+}
+
+function getRiskEmoji(risk: RiskLevel): string {
+  switch (risk) {
+    case "low":
+      return "●";
+    case "medium":
+      return "●";
+    case "high":
+      return "●";
+    case "critical":
+      return "●";
+  }
+}
+
+/**
+ * Content component for the approval confirmation dialog
+ */
+function ApprovalDialogContent(ctx: ConfirmContext & { options: ApprovalDialogOptions }) {
+  const { command, riskLevel, description } = ctx.options;
+  const riskColor = getRiskColor(riskLevel);
+
+  // Handle keyboard input
+  useDialogKeyboard((key) => {
+    if (key.name === "return" || key.name === "y") {
+      ctx.resolve(true);
+    } else if (key.name === "escape" || key.name === "n") {
+      ctx.resolve(false);
+    }
+  }, ctx.dialogId);
+
+  return () => (
+    <box flexDirection="column" gap={1}>
+      {/* Header */}
+      <box flexDirection="row" gap={1}>
+        <text fg={riskColor}>{getRiskEmoji(riskLevel)}</text>
+        <text fg={colors.text.primary} attributes={ATTR_BOLD}>
+          Write Operation Requires Approval
+        </text>
+        <text fg={colors.text.secondary} attributes={ATTR_DIM}>
+          ({riskLevel} risk)
+        </text>
+      </box>
+
+      {/* Command */}
+      <box flexDirection="column">
+        <text fg={colors.info} attributes={ATTR_BOLD}>Command:</text>
+        <text fg={colors.warning}>{command}</text>
+      </box>
+
+      {/* Description if provided */}
+      {description && (
+        <box flexDirection="column">
+          <text fg={colors.text.secondary} attributes={ATTR_DIM}>{description}</text>
+        </box>
+      )}
+
+      {/* Warning for high risk */}
+      {(riskLevel === "high" || riskLevel === "critical") && (
+        <box>
+          <text fg={colors.error} attributes={ATTR_BOLD}>
+            This is a {riskLevel}-risk operation. Review carefully.
+          </text>
+        </box>
+      )}
+
+      {/* Actions */}
+      <box flexDirection="row" gap={4} marginTop={1}>
+        <text fg={colors.success} attributes={ATTR_BOLD}>[Y] Approve</text>
+        <text fg={colors.error} attributes={ATTR_BOLD}>[N] Reject</text>
+      </box>
+
+      {/* Instructions */}
+      <text fg={colors.text.secondary} attributes={ATTR_DIM}>
+        Press Y to approve, N to reject, or Esc to cancel
+      </text>
+    </box>
+  );
+}
+
+/**
+ * Provider component that enables dialog functionality
+ */
+export function ApprovalDialogProvider(props: ParentProps): JSX.Element {
+  return (
+    <DialogProvider
+      size="medium"
+      dialogOptions={{
+        style: {
+          borderStyle: "single",
+          borderColor: colors.text.primary,
+          backgroundColor: colors.background.primary,
+          paddingLeft: spacing.sm,
+          paddingRight: spacing.sm,
+          paddingTop: 1,
+          paddingBottom: 1,
+        },
+      }}
+      backdropColor="#000000"
+      backdropOpacity={0.5}
+    >
+      {props.children}
+    </DialogProvider>
+  );
+}
+
+/**
+ * Hook to show approval confirmation dialogs
+ */
+export function useApprovalDialog() {
+  const dialog = useDialog();
+
+  const showApproval = async (options: ApprovalDialogOptions): Promise<boolean> => {
+    const result = await dialog.confirm({
+      content: (ctx) => ApprovalDialogContent({ ...ctx, options }),
+      style: {
+        borderColor: getRiskHexColor(options.riskLevel),
+        borderStyle: "double",
+      },
+    });
+    return result;
+  };
+
+  return { showApproval, ...dialog };
+}
+
+// Re-export dialog hooks for other uses
+export { useDialog, useDialogKeyboard };

package/src/tui/components/approval-modal.tsx

@@ -0,0 +1,278 @@
+/* @jsxImportSource @opentui/solid */
+import { Show, type JSX } from "solid-js";
+import { createTextAttributes } from "@opentui/core";
+
+const ATTR_DIM = createTextAttributes({ dim: true });
+const ATTR_BOLD = createTextAttributes({ bold: true });
+
+export interface ApprovalRequest {
+  id: string;
+  action: string;
+  target: string;
+  riskLevel: "low" | "medium" | "high" | "critical";
+  description: string;
+  approvalToken: string;
+  expiresAt: Date;
+}
+
+interface ApprovalModalProps {
+  request: ApprovalRequest | null;
+  onApprove: (token: string) => void;
+  onReject: () => void;
+  visible: boolean;
+}
+
+function getRiskColor(risk: ApprovalRequest["riskLevel"]): string {
+  switch (risk) {
+    case "low":
+      return "green";
+    case "medium":
+      return "yellow";
+    case "high":
+      return "red";
+    case "critical":
+      return "magenta";
+  }
+}
+
+function getRiskEmoji(risk: ApprovalRequest["riskLevel"]): string {
+  switch (risk) {
+    case "low":
+      return "🟢";
+    case "medium":
+      return "🟡";
+    case "high":
+      return "🟠";
+    case "critical":
+      return "🔴";
+  }
+}
+
+export function ApprovalModal(props: ApprovalModalProps): JSX.Element {
+  const request = () => props.request;
+  const visible = () => props.visible && request() !== null;
+
+  return (
+    <Show when={visible()}>
+      <box
+        position="absolute"
+        top={5}
+        left={10}
+        width={60}
+        borderStyle="double"
+        borderColor={getRiskColor(request()!.riskLevel)}
+        paddingLeft={2}
+        paddingRight={2}
+        paddingTop={1}
+        paddingBottom={1}
+        flexDirection="column"
+      >
+        {/* Header */}
+        <box flexDirection="row" justifyContent="center" marginBottom={1}>
+          <text fg={getRiskColor(request()!.riskLevel)} attributes={ATTR_BOLD}>
+            ⚠️ APPROVAL REQUIRED ⚠️
+          </text>
+        </box>
+
+        {/* Risk Level */}
+        <box flexDirection="row" gap={1} marginBottom={1}>
+          <text fg="white">Risk Level:</text>
+          <text fg={getRiskColor(request()!.riskLevel)} attributes={ATTR_BOLD}>
+            {getRiskEmoji(request()!.riskLevel)} {request()!.riskLevel.toUpperCase()}
+          </text>
+        </box>
+
+        {/* Action */}
+        <box flexDirection="column" marginBottom={1}>
+          <text fg="cyan" attributes={ATTR_BOLD}>Action:</text>
+          <text fg="white">{request()!.action}</text>
+        </box>
+
+        {/* Target */}
+        <box flexDirection="column" marginBottom={1}>
+          <text fg="cyan" attributes={ATTR_BOLD}>Target:</text>
+          <text fg="white">{request()!.target}</text>
+        </box>
+
+        {/* Description */}
+        <box flexDirection="column" marginBottom={1}>
+          <text fg="cyan" attributes={ATTR_BOLD}>Description:</text>
+          <text fg="gray" wrapMode="word">{request()!.description}</text>
+        </box>
+
+        {/* Expiration */}
+        <box flexDirection="row" gap={1} marginBottom={1}>
+          <text fg="gray" attributes={ATTR_DIM}>
+            Expires: {formatTimeRemaining(request()!.expiresAt)}
+          </text>
+        </box>
+
+        {/* Divider */}
+        <text fg="gray" attributes={ATTR_DIM}>
+          ─────────────────────────────────────────────
+        </text>
+
+        {/* Actions */}
+        <box flexDirection="row" justifyContent="center" gap={4} marginTop={1}>
+          <text fg="green" attributes={ATTR_BOLD}>
+            [Y] Approve
+          </text>
+          <text fg="red" attributes={ATTR_BOLD}>
+            [N] Reject
+          </text>
+        </box>
+
+        {/* Warning for high risk */}
+        <Show when={request()!.riskLevel === "high" || request()!.riskLevel === "critical"}>
+          <box marginTop={1}>
+            <text fg="red" attributes={ATTR_BOLD}>
+              ⚠️ This is a {request()!.riskLevel}-risk action. Please review carefully.
+            </text>
+          </box>
+        </Show>
+      </box>
+    </Show>
+  );
+}
+
+function formatTimeRemaining(expiresAt: Date): string {
+  const remaining = expiresAt.getTime() - Date.now();
+  if (remaining <= 0) {
+    return "Expired";
+  }
+
+  const minutes = Math.floor(remaining / 60000);
+  const seconds = Math.floor((remaining % 60000) / 1000);
+
+  if (minutes > 0) {
+    return `${minutes}m ${seconds}s`;
+  }
+  return `${seconds}s`;
+}
+
+// Interactive approval prompt for use in message flow
+// Similar to Claude Code's AskUserQuestion pattern
+interface CommandApprovalProps {
+  approvalId: string;
+  command: string;
+  riskLevel: ApprovalRequest["riskLevel"];
+  selectedOption: number; // 0 = approve, 1 = reject, -1 = no selection
+  onSelect: (option: number) => void;
+  submitted: boolean;
+}
+
+export function CommandApproval(props: CommandApprovalProps): JSX.Element {
+  const riskColor = getRiskColor(props.riskLevel);
+
+  return (
+    <box
+      flexDirection="column"
+      borderStyle="single"
+      borderColor={riskColor}
+      paddingLeft={1}
+      paddingRight={1}
+      paddingTop={1}
+      paddingBottom={1}
+      marginTop={1}
+      marginBottom={1}
+    >
+      {/* Header */}
+      <box flexDirection="row" gap={1} marginBottom={1}>
+        <text fg={riskColor}>{getRiskEmoji(props.riskLevel)}</text>
+        <text fg="white" attributes={ATTR_BOLD}>
+          Write Operation Requires Approval
+        </text>
+        <text fg="gray" attributes={ATTR_DIM}>
+          ({props.riskLevel} risk)
+        </text>
+      </box>
+
+      {/* Command */}
+      <box flexDirection="column" marginBottom={1}>
+        <text fg="cyan" attributes={ATTR_BOLD}>Command:</text>
+        <text fg="yellow">{props.command}</text>
+      </box>
+
+      {/* Options - Claude Code style */}
+      <box flexDirection="column" gap={1}>
+        <OptionButton
+          index={0}
+          label="Yes, execute this command"
+          selected={props.selectedOption === 0}
+          submitted={props.submitted}
+          color="green"
+        />
+        <OptionButton
+          index={1}
+          label="No, cancel this operation"
+          selected={props.selectedOption === 1}
+          submitted={props.submitted}
+          color="red"
+        />
+      </box>
+
+      {/* Instructions */}
+      <Show when={!props.submitted}>
+        <text fg="gray" attributes={ATTR_DIM} marginTop={1}>
+          Use ↑↓ to select, Enter to confirm
+        </text>
+      </Show>
+    </box>
+  );
+}
+
+interface OptionButtonProps {
+  index: number;
+  label: string;
+  selected: boolean;
+  submitted: boolean;
+  color: string;
+}
+
+function OptionButton(props: OptionButtonProps): JSX.Element {
+  const isSelected = () => props.selected;
+  const isSubmitted = () => props.submitted;
+
+  return (
+    <box flexDirection="row" gap={1}>
+      <Show
+        when={isSelected()}
+        fallback={<text fg="gray">○</text>}
+      >
+        <text fg={props.color}>●</text>
+      </Show>
+      <text
+        fg={isSelected() ? props.color : "white"}
+        attributes={isSelected() ? ATTR_BOLD : undefined}
+      >
+        {props.label}
+      </text>
+      <Show when={isSelected() && isSubmitted()}>
+        <text fg={props.color}> ✓</text>
+      </Show>
+    </box>
+  );
+}
+
+// Compact inline version for showing result after approval
+interface ApprovalResultProps {
+  command: string;
+  approved: boolean;
+  riskLevel: ApprovalRequest["riskLevel"];
+}
+
+export function ApprovalResult(props: ApprovalResultProps): JSX.Element {
+  const riskColor = getRiskColor(props.riskLevel);
+  const statusColor = props.approved ? "green" : "red";
+  const statusText = props.approved ? "Approved" : "Rejected";
+  const statusIcon = props.approved ? "✓" : "✗";
+
+  return (
+    <box flexDirection="row" gap={1} marginTop={1} marginBottom={1}>
+      <text fg={riskColor}>{getRiskEmoji(props.riskLevel)}</text>
+      <text fg="gray" attributes={ATTR_DIM}>[{props.riskLevel}]</text>
+      <text fg={statusColor}>{statusIcon} {statusText}:</text>
+      <text fg="yellow">{props.command}</text>
+    </box>
+  );
+}

package/src/tui/components/centered-layout.tsx

@@ -0,0 +1,33 @@
+/* @jsxImportSource @opentui/solid */
+import type { JSX, ParentProps } from "solid-js";
+import { layout } from "../theme/index.js";
+
+export interface CenteredLayoutProps extends ParentProps {
+  maxWidth?: number;
+}
+
+/**
+ * CenteredLayout - Wrapper component providing centered max-width container
+ * Creates a centered layout with optional max-width constraint
+ */
+export function CenteredLayout(props: CenteredLayoutProps): JSX.Element {
+  const maxWidth = props.maxWidth ?? layout.maxWidth;
+
+  return (
+    <box
+      flexDirection="row"
+      justifyContent="center"
+      width="100%"
+      height="100%"
+    >
+      <box
+        flexDirection="column"
+        width="100%"
+        height="100%"
+        maxWidth={maxWidth}
+      >
+        {props.children}
+      </box>
+    </box>
+  );
+}

package/src/tui/components/editor.tsx

@@ -0,0 +1,87 @@
+/* @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 EditorProps {
+  status: AppStatus;
+  value: string;
+  onInput: (value: string) => void;
+  onSubmit: (value: string) => void;
+  onApprovalInput?: (value: string) => void;
+  onApprovalKeyDown?: (key: { name: string }) => void;
+}
+
+/**
+ * Editor - Enhanced input with cyan prompt indicator
+ * OpenCode-style with clean border and prompt
+ */
+export function Editor(props: EditorProps): JSX.Element {
+  const getBorderColor = () => {
+    if (props.status === "awaiting_approval") return colors.warning;
+    if (props.status === "investigating") return colors.warning;
+    return colors.info;
+  };
+
+  return (
+    <Show
+      when={props.status === "awaiting_approval"}
+      fallback={
+        <box
+          borderStyle="single"
+          borderColor={getBorderColor()}
+          paddingLeft={spacing.xs}
+          paddingRight={spacing.xs}
+          flexDirection="row"
+          gap={1}
+        >
+          <text fg={colors.info} attributes={ATTR_BOLD}>
+            {">"}
+          </text>
+          <input
+            flexGrow={1}
+            focused={true}
+            value={props.value}
+            onInput={props.onInput}
+            onSubmit={props.onSubmit}
+            placeholder={
+              props.status === "investigating"
+                ? "Investigating..."
+                : "Describe the incident..."
+            }
+            textColor={colors.text.primary}
+            placeholderColor={colors.text.secondary}
+            focusedTextColor={colors.text.primary}
+            focusedBackgroundColor={colors.background.primary}
+          />
+        </box>
+      }
+    >
+      {/* Approval mode input */}
+      <box
+        borderStyle="double"
+        borderColor={colors.warning}
+        paddingLeft={spacing.xs}
+        paddingRight={spacing.xs}
+        flexDirection="row"
+        gap={1}
+      >
+        <text fg={colors.warning} attributes={ATTR_BOLD}>
+          ?
+        </text>
+        <input
+          flexGrow={1}
+          focused={true}
+          value=""
+          onInput={(value) => props.onApprovalInput?.(value)}
+          onKeyDown={(key) => props.onApprovalKeyDown?.(key)}
+          placeholder="Press Y to approve, N to reject"
+          textColor={colors.text.primary}
+          placeholderColor={colors.text.secondary}
+          focusedTextColor={colors.text.primary}
+          focusedBackgroundColor={colors.background.primary}
+        />
+      </box>
+    </Show>
+  );
+}

package/src/tui/components/header.tsx

@@ -0,0 +1,53 @@
+/* @jsxImportSource @opentui/solid */
+import type { JSX } from "solid-js";
+import { colors, spacing, ATTR_BOLD, ATTR_DIM, type AppStatus } from "../theme/index.js";
+import { StatusBadge } from "./status-badge.js";
+
+export interface HeaderProps {
+  status: AppStatus;
+  currentTool?: string | null;
+  kubeContext: string;
+  modelName?: string;
+}
+
+/**
+ * Header - Top section with logo, title, model info, status badge, and kubernetes context
+ * OpenCode-style layout with clean visual hierarchy
+ */
+export function Header(props: HeaderProps): JSX.Element {
+  return (
+    <box
+      borderStyle="single"
+      borderColor={colors.primary}
+      paddingLeft={spacing.sm}
+      paddingRight={spacing.sm}
+      paddingTop={0}
+      paddingBottom={0}
+      flexDirection="column"
+    >
+      {/* Top row: Logo + Title + Model | Status Badge */}
+      <box flexDirection="row" justifyContent="space-between" paddingTop={1}>
+        <box flexDirection="row" gap={1}>
+          <text fg={colors.primary} attributes={ATTR_BOLD}>
+            ☸ TRIAGENT
+          </text>
+          <text fg={colors.text.secondary}>|</text>
+          <text fg={colors.text.secondary} attributes={ATTR_DIM}>
+            {props.modelName}
+          </text>
+        </box>
+        <StatusBadge status={props.status} currentTool={props.currentTool} />
+      </box>
+
+      {/* Bottom row: Subtitle | Kubernetes context */}
+      <box flexDirection="row" justifyContent="space-between" paddingBottom={1}>
+        <text fg={colors.text.secondary} attributes={ATTR_DIM}>
+          Kubernetes Debugging Agent
+        </text>
+        <text fg={colors.info}>
+          cluster: {props.kubeContext}
+        </text>
+      </box>
+    </box>
+  );
+}

package/src/tui/components/index.ts

@@ -0,0 +1,55 @@
+// TUI Components - OpenTUI UI integration
+
+// Layout components
+export { CenteredLayout, type CenteredLayoutProps } from "./centered-layout.js";
+
+// Header components
+export { Header, type HeaderProps } from "./header.js";
+export { StatusBadge, type StatusBadgeProps } from "./status-badge.js";
+
+// Message components
+export { MessageItem, type Message, type MessageItemProps } from "./message-item.js";
+export { MessagesPanel, type MessagesPanelProps } from "./messages-panel.js";
+
+// Input components
+export { Editor, type EditorProps } from "./editor.js";
+
+// Status components
+export { StatusBar, type StatusBarProps } from "./status-bar.js";
+
+// Styled span with proper typing for fg/bg/attributes
+export { StyledSpan, type StyledSpanProps } from "./styled-span.js";
+
+// Toast notifications
+export {
+  ToastProvider,
+  toast,
+  toastSuccess,
+  toastError,
+  toastWarning,
+  toastInfo,
+  toastLoading,
+  toastDismiss,
+  toastPromise,
+  useToasts,
+  TOAST_DURATION,
+} from "./toast.js";
+
+// Approval dialogs
+export {
+  ApprovalDialogProvider,
+  useApprovalDialog,
+  useDialog,
+  useDialogKeyboard,
+  type RiskLevel,
+  type ApprovalDialogOptions,
+} from "./approval-dialog.js";
+
+// Existing components
+export { ApprovalModal, CommandApproval, ApprovalResult, type ApprovalRequest } from "./approval-modal.js";
+export {
+  Timeline,
+  CompactTimeline,
+  investigationEventsToTimeline,
+  type TimelineEvent,
+} from "./timeline.js";