triagent 0.1.0-alpha13 → 0.1.0-alpha17

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

@@ -0,0 +1,156 @@
+/* @jsxImportSource @opentui/solid */
+import { DialogProvider, useDialog, useDialogKeyboard, type ConfirmContext } from "@opentui-ui/dialog/solid";
+import { createTextAttributes } from "@opentui/core";
+import type { JSX, ParentProps } from "solid-js";
+
+const ATTR_BOLD = createTextAttributes({ bold: true });
+const ATTR_DIM = createTextAttributes({ dim: true });
+
+export type RiskLevel = "low" | "medium" | "high" | "critical";
+
+export interface ApprovalDialogOptions {
+  command: string;
+  riskLevel: RiskLevel;
+  description?: string;
+}
+
+function getRiskColor(risk: RiskLevel): string {
+  switch (risk) {
+    case "low": return "green";
+    case "medium": return "yellow";
+    case "high": return "red";
+    case "critical": return "magenta";
+  }
+}
+
+function getRiskEmoji(risk: RiskLevel): string {
+  switch (risk) {
+    case "low": return "🟢";
+    case "medium": return "🟡";
+    case "high": return "🟠";
+    case "critical": return "🔴";
+  }
+}
+
+function getRiskBorderColor(risk: RiskLevel): string {
+  switch (risk) {
+    case "low": return "#22c55e";
+    case "medium": return "#eab308";
+    case "high": return "#ef4444";
+    case "critical": return "#ec4899";
+  }
+}
+
+/**
+ * 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="white" attributes={ATTR_BOLD}>
+          Write Operation Requires Approval
+        </text>
+        <text fg="gray" attributes={ATTR_DIM}>
+          ({riskLevel} risk)
+        </text>
+      </box>
+
+      {/* Command */}
+      <box flexDirection="column">
+        <text fg="cyan" attributes={ATTR_BOLD}>Command:</text>
+        <text fg="yellow">{command}</text>
+      </box>
+
+      {/* Description if provided */}
+      {description && (
+        <box flexDirection="column">
+          <text fg="gray" attributes={ATTR_DIM}>{description}</text>
+        </box>
+      )}
+
+      {/* Warning for high risk */}
+      {(riskLevel === "high" || riskLevel === "critical") && (
+        <box>
+          <text fg="red" attributes={ATTR_BOLD}>
+            ⚠️ This is a {riskLevel}-risk operation. Review carefully.
+          </text>
+        </box>
+      )}
+
+      {/* Actions */}
+      <box flexDirection="row" gap={4} marginTop={1}>
+        <text fg="green" attributes={ATTR_BOLD}>[Y] Approve</text>
+        <text fg="red" attributes={ATTR_BOLD}>[N] Reject</text>
+      </box>
+
+      {/* Instructions */}
+      <text fg="gray" 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: "#ffffff",
+          backgroundColor: "#1a1a1a",
+          paddingLeft: 2,
+          paddingRight: 2,
+          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: getRiskBorderColor(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/index.ts

@@ -0,0 +1,38 @@
+// TUI Components - OpenTUI UI integration
+
+// 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";

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)} />;
+}