@maidang1/hataraku 0.0.3

package/src/render/components/TimelineEvent.tsx

@@ -0,0 +1,313 @@
+import React from "react";
+import { Box, Text } from "ink";
+import { MarkdownText } from "./MarkdownText";
+import { Spinner } from "./Spinner";
+import {
+  formatConfirmPreview,
+  formatConfirmReason,
+  shouldShowConfirmReason,
+} from "./formatters/confirm";
+import type {
+  ChatEvent,
+  ConfirmEvent,
+  ErrorEvent,
+  McpEvent,
+  ThinkingEvent,
+  ToolEvent,
+  UiEvent,
+} from "../state/events";
+import { COLORS, INDENT, SPACE, TEXT } from "../theme";
+
+const TOOL_RESULT_PREVIEW_MAX = 400;
+const TOOL_META_PREVIEW_MAX = 56;
+
+type EventHeaderProps = {
+  icon: string;
+  iconColor: string;
+  title: string;
+  titleColor?: string;
+  meta?: string;
+  trailing?: React.ReactNode;
+};
+
+function EventHeader({
+  icon,
+  iconColor,
+  title,
+  titleColor = TEXT.primary,
+  meta,
+  trailing,
+}: EventHeaderProps): React.JSX.Element {
+  return (
+    <Box>
+      <Text color={iconColor}>{icon} </Text>
+      <Text color={titleColor} bold>
+        {title}
+      </Text>
+      {meta && <Text color={TEXT.dim}> {meta}</Text>}
+      {trailing ? <Text color={TEXT.dim}> {trailing}</Text> : null}
+    </Box>
+  );
+}
+
+function EventBody(props: { children: React.ReactNode }): React.JSX.Element {
+  return (
+    <Box flexDirection="column" paddingLeft={INDENT.sm} marginTop={SPACE.xs}>
+      {props.children}
+    </Box>
+  );
+}
+
+function EventHint(props: { text: string }): React.JSX.Element {
+  return (
+    <Box paddingLeft={INDENT.sm}>
+      <Text color={TEXT.dim}>{props.text}</Text>
+    </Box>
+  );
+}
+
+function oneLine(input: string, limit: number): string {
+  const normalized = input.replace(/\s*\n\s*/g, " ").trim();
+  if (normalized.length <= limit) return normalized;
+  return normalized.slice(0, Math.max(1, limit - 1)) + "…";
+}
+
+function durationMeta(event: ToolEvent): string | undefined {
+  if (!event.startedAt || !event.endedAt) return undefined;
+  const sec = Math.max(
+    1,
+    Math.round((Date.parse(event.endedAt) - Date.parse(event.startedAt)) / 1000),
+  );
+  return `(${sec}s)`;
+}
+
+function ChatEventRow(props: { event: ChatEvent }): React.JSX.Element {
+  const { event } = props;
+
+  if (event.role === "user") {
+    return (
+      <Box flexDirection="column" marginBottom={SPACE.sm}>
+        <Box>
+          <Text color={COLORS.info}>❯ </Text>
+          {(event.content ?? "").split("\n").map((line, index) => (
+            <Text key={`${event.id}-user-${index}`} color={TEXT.primary}>
+              {line || " "}
+            </Text>
+          ))}
+        </Box>
+      </Box>
+    );
+  }
+
+  if (event.role === "system") {
+    return (
+      <Box flexDirection="column" marginBottom={SPACE.sm}>
+        <Box>
+          <Text color={COLORS.warning}>◆ </Text>
+          {(event.content ?? "").split("\n").map((line, index) => (
+            <Text key={`${event.id}-sys-${index}`} color={TEXT.secondary}>
+              {line || " "}
+            </Text>
+          ))}
+        </Box>
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column" marginBottom={SPACE.sm}>
+      <Box>
+        <Text color={COLORS.accent}>● </Text>
+        <MarkdownText content={event.content ?? ""} />
+      </Box>
+    </Box>
+  );
+}
+
+function ToolEventRow(props: { event: ToolEvent }): React.JSX.Element {
+  const { event } = props;
+  const isDone = event.status === "done";
+  const statusIcon = isDone ? "●" : "●";
+  const statusColor = isDone ? COLORS.accent : COLORS.pending;
+  const preview = oneLine(event.preview ?? `Run ${event.toolName}`, TOOL_META_PREVIEW_MAX);
+
+  const resultPreview = event.result
+    ? oneLine(event.result, TOOL_RESULT_PREVIEW_MAX)
+    : undefined;
+
+  return (
+    <Box flexDirection="column" marginBottom={SPACE.sm}>
+      {/* Tool header with tree-style prefix */}
+      <Box>
+        <Text color={statusColor}>{statusIcon} </Text>
+        <Text color={COLORS.accent} bold>{event.toolName}</Text>
+        {isDone && <Text color={TEXT.dim}> {durationMeta(event)}</Text>}
+        {!isDone && (
+          <>
+            <Text color={TEXT.dim}> </Text>
+            <Spinner />
+          </>
+        )}
+      </Box>
+
+      {/* Tree-style nested content */}
+      {!event.expanded && (
+        <Box paddingLeft={INDENT.sm}>
+          <Text color={TEXT.dim}>└ </Text>
+          <Text color={TEXT.muted}>{preview}</Text>
+        </Box>
+      )}
+
+      {event.expanded && (
+        <Box flexDirection="column" paddingLeft={INDENT.sm}>
+          {event.input !== undefined && (
+            <Box>
+              <Text color={TEXT.dim}>├ </Text>
+              <Text color={TEXT.muted}>
+                {typeof event.input === "string" ? event.input : JSON.stringify(event.input, null, 2)}
+              </Text>
+            </Box>
+          )}
+          {resultPreview && (
+            <Box>
+              <Text color={TEXT.dim}>├ </Text>
+              <Text color={TEXT.dim}>{resultPreview}</Text>
+            </Box>
+          )}
+          {!!event.filesChanged?.length &&
+            event.filesChanged.map((filePath, idx) => (
+              <Box key={`${event.id}-${filePath}`}>
+                <Text color={TEXT.dim}>{idx === event.filesChanged!.length - 1 ? "└ " : "├ "}</Text>
+                <Text color={COLORS.success}>✎ {filePath}</Text>
+              </Box>
+            ))}
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+function ThinkingEventRow(props: { event: ThinkingEvent }): React.JSX.Element {
+  const { event } = props;
+  const content = event.redacted ? "[thinking is redacted]" : event.content ?? "";
+
+  return (
+    <Box flexDirection="column" marginBottom={SPACE.sm}>
+      <EventHeader icon="…" iconColor={TEXT.dim} title="thinking" titleColor={TEXT.dim} />
+      <EventBody>
+        {(content || "").split("\n").map((line, index) => (
+          <Text key={`${event.id}-thinking-${index}`} color={TEXT.dim}>
+            {line || " "}
+          </Text>
+        ))}
+      </EventBody>
+    </Box>
+  );
+}
+
+function ConfirmEventRow(props: {
+  event: ConfirmEvent;
+  isActive: boolean;
+}): React.JSX.Element | null {
+  const { event, isActive } = props;
+  if (!event.resolved && isActive) {
+    return null;
+  }
+
+  const preview = formatConfirmPreview(event.preview);
+  const reason = formatConfirmReason(event.reason);
+  const showReason = shouldShowConfirmReason(event.reason, event.preview);
+
+  if (event.resolved) {
+    const allowed = !!event.allowed;
+    return (
+      <Box flexDirection="column" marginBottom={SPACE.sm}>
+        <EventHeader
+          icon={allowed ? "✓" : "✗"}
+          iconColor={allowed ? COLORS.success : COLORS.danger}
+          title={`Confirm ${allowed ? "allowed" : "denied"}`}
+          titleColor={TEXT.secondary}
+          meta={event.toolName}
+        />
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column" marginBottom={SPACE.sm}>
+      <EventHeader
+        icon="⚠"
+        iconColor={COLORS.warning}
+        title={`Confirm ${event.toolName}`}
+        titleColor={TEXT.primary}
+      />
+      <EventBody>
+        {showReason && <Text color={TEXT.muted}>{reason}</Text>}
+        {preview && <Text color={TEXT.dim}>{preview}</Text>}
+      </EventBody>
+      {isActive && (
+        <EventHint text="↑/↓ select • Enter confirm • Esc deny" />
+      )}
+    </Box>
+  );
+}
+
+function McpEventRow(props: { event: McpEvent }): React.JSX.Element {
+  const { event } = props;
+  const color =
+    event.level === "error"
+      ? COLORS.danger
+      : event.level === "warn"
+        ? COLORS.warning
+        : TEXT.dim;
+
+  return (
+    <Box flexDirection="column" marginBottom={SPACE.sm}>
+      <EventHeader icon="🔌" iconColor={color} title={event.message} titleColor={color} />
+    </Box>
+  );
+}
+
+function ErrorEventRow(props: { event: ErrorEvent }): React.JSX.Element {
+  const { event } = props;
+
+  return (
+    <Box flexDirection="column" marginBottom={SPACE.sm}>
+      <EventHeader icon="✗" iconColor={COLORS.danger} title="Error" titleColor={COLORS.danger} meta={oneLine(event.message, 100)} />
+      {event.expanded && event.stack && (
+        <EventBody>
+          <Text color={COLORS.errorMuted}>{event.stack}</Text>
+        </EventBody>
+      )}
+    </Box>
+  );
+}
+
+export function TimelineEvent(props: {
+  event: UiEvent;
+  activeConfirmId: string | null;
+}): React.JSX.Element | null {
+  const { event, activeConfirmId } = props;
+
+  switch (event.type) {
+    case "chat":
+      return <ChatEventRow event={event} />;
+    case "thinking":
+      return <ThinkingEventRow event={event} />;
+    case "tool":
+      return <ToolEventRow event={event} />;
+    case "confirm":
+      return (
+        <ConfirmEventRow
+          event={event}
+          isActive={event.confirmId === activeConfirmId}
+        />
+      );
+    case "mcp":
+      return <McpEventRow event={event} />;
+    case "error":
+      return <ErrorEventRow event={event} />;
+    default:
+      return null;
+  }
+}

package/src/render/components/ToolCard.tsx

@@ -0,0 +1,126 @@
+import React from "react";
+import { Box, Text } from "ink";
+import type { ToolEvent } from "../state/events";
+import { COLORS } from "../theme";
+
+function stringify(input: unknown): string {
+  try {
+    return JSON.stringify(input, null, 2);
+  } catch {
+    return String(input);
+  }
+}
+
+function truncateLines(value: string, maxLines: number): { text: string; truncated: boolean } {
+  const lines = value.split("\n");
+  if (lines.length <= maxLines) return { text: value, truncated: false };
+  return { text: lines.slice(0, maxLines).join("\n") + "\n…", truncated: true };
+}
+
+// Simple JSON syntax highlighting
+function highlightJson(json: string): React.ReactNode {
+  return json.split(/(".*?"|\{|\}|\[|\]|:|,|\n)/).map((part, i) => {
+    if (part.match(/^".*?"$/)) {
+      return <Text key={i} color={COLORS.success}>{part}</Text>;
+    }
+    if (part.match(/^[{}\[\]]$/)) {
+      return <Text key={i} color={COLORS.accent}>{part}</Text>;
+    }
+    if (part === ':') {
+      return <Text key={i} color={COLORS.text}>{part}</Text>;
+    }
+    return <Text key={i} color={COLORS.muted}>{part}</Text>;
+  });
+}
+
+export function ToolCard(props: {
+  event: ToolEvent;
+  selected: boolean;
+  focused: boolean;
+}): React.JSX.Element {
+  const { event, selected, focused } = props;
+  const isSelected = selected && focused;
+  const statusLabel = event.status === "done" ? "done" : "pending";
+  const statusColor = event.status === "done" ? COLORS.success : COLORS.pending;
+  const bgColor = isSelected ? COLORS.bgSelected : event.status === "done" ? COLORS.bgToolDone : COLORS.bgToolRunning;
+  const summary = event.summary ?? event.preview ?? (event.input ? truncateLines(stringify(event.input), 3).text : "(no input)");
+  const selectedPrefix = isSelected ? "▶ " : "";
+  const duration =
+    event.startedAt && event.endedAt
+      ? `${Math.max(0, Date.parse(event.endedAt) - Date.parse(event.startedAt))}ms`
+      : event.status === "pending"
+        ? "running"
+        : undefined;
+
+  if (!event.expanded) {
+    return (
+      <Box backgroundColor={bgColor}>
+        <Text dimColor color={isSelected ? COLORS.focus : COLORS.dim}>
+          {selectedPrefix}🔧 {event.toolName}
+        </Text>
+        <Text color={statusColor}> [{statusLabel}]</Text>
+        {duration && <Text color={COLORS.muted}> ({duration})</Text>}
+        <Text color={COLORS.muted}> — {summary}</Text>
+      </Box>
+    );
+  }
+
+  const borderColor = isSelected ? COLORS.focus : COLORS.border;
+
+  return (
+    <Box flexDirection="column" borderStyle="single" borderColor={borderColor} paddingLeft={1} paddingRight={1} backgroundColor={bgColor}>
+      <Box justifyContent="space-between">
+        <Text bold color={COLORS.text}>
+          {selectedPrefix}🔧 {event.toolName}
+        </Text>
+        <Text color={statusColor}>
+          {statusLabel}
+          {duration ? ` • ${duration}` : ""}
+        </Text>
+      </Box>
+
+      {summary && (
+        <Box>
+          <Text color={COLORS.muted}>{summary}</Text>
+        </Box>
+      )}
+
+      {event.input !== undefined && (
+        <Box flexDirection="column" paddingTop={1} paddingBottom={1}>
+          <Text bold color={COLORS.accent}>Input</Text>
+          <Box paddingLeft={2} paddingY={1}>
+            {highlightJson(stringify(event.input))}
+          </Box>
+        </Box>
+      )}
+
+      {event.result !== undefined && (
+        <Box flexDirection="column" paddingTop={1} paddingBottom={1}>
+          <Text bold color={COLORS.accent}>Result</Text>
+          <Box paddingLeft={2} paddingY={1}>
+            <Text dimColor color={COLORS.dim}>{event.result || "(empty)"}</Text>
+          </Box>
+        </Box>
+      )}
+
+      {!!event.filesChanged?.length && (
+        <Box flexDirection="column" paddingTop={1} paddingBottom={1}>
+          <Text bold color={COLORS.accent}>Files Changed</Text>
+          <Box paddingLeft={1}>
+            {event.filesChanged.map((f) => (
+              <Text key={f} dimColor color={COLORS.dim}>
+                • {f}
+              </Text>
+            ))}
+          </Box>
+        </Box>
+      )}
+
+      <Box paddingTop={1}>
+        <Text dimColor color={COLORS.muted}>
+          Enter/e: toggle details • i: back to input
+        </Text>
+      </Box>
+    </Box>
+  );
+}

package/src/render/components/formatters/confirm.test.ts

@@ -0,0 +1,34 @@
+import { describe, expect, it } from "bun:test";
+
+import {
+  formatConfirmPreview,
+  formatConfirmReason,
+  shouldShowConfirmReason,
+} from "./confirm";
+
+describe("confirm formatter", () => {
+  it("normalizes generic reason", () => {
+    expect(formatConfirmReason("Command execution requires confirmation")).toBe(
+      "Needs approval",
+    );
+  });
+
+  it("normalizes command preview", () => {
+    expect(formatConfirmPreview("Run command:\n  npm run test\n")).toBe(
+      "cmd: npm run test",
+    );
+  });
+
+  it("hides generic reason when command preview exists", () => {
+    expect(
+      shouldShowConfirmReason(
+        "Command execution requires confirmation",
+        "Run command: bun test",
+      ),
+    ).toBe(false);
+  });
+
+  it("shows non-generic reason", () => {
+    expect(shouldShowConfirmReason("Path write required", undefined)).toBe(true);
+  });
+});

package/src/render/components/formatters/confirm.ts

@@ -0,0 +1,32 @@
+const GENERIC_COMMAND_CONFIRM_REASON = "Command execution requires confirmation";
+
+export function formatConfirmReason(reason: string): string {
+  if (reason === GENERIC_COMMAND_CONFIRM_REASON) {
+    return "Needs approval";
+  }
+  return reason;
+}
+
+export function formatConfirmPreview(preview?: string): string | undefined {
+  if (!preview) return undefined;
+  const normalized = preview.trim();
+  if (!normalized) return undefined;
+
+  if (normalized.startsWith("Run command:")) {
+    const command = normalized
+      .slice("Run command:".length)
+      .trim()
+      .replace(/\s*\n\s*/g, " ");
+    return command ? `cmd: ${command}` : undefined;
+  }
+
+  return normalized.replace(/\s*\n\s*/g, " ");
+}
+
+export function shouldShowConfirmReason(
+  reason: string,
+  preview?: string,
+): boolean {
+  const normalizedPreview = formatConfirmPreview(preview);
+  return !(reason === GENERIC_COMMAND_CONFIRM_REASON && normalizedPreview);
+}