@stigmer/ink 0.0.88

package/src/components/ToolCallItem.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+import { Box, Text } from "ink";
+import type { ToolCall } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/message_pb";
+import { ToolCallStatus } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
+
+/** Props for {@link ToolCallItem}. */
+export interface ToolCallItemProps {
+  /** The tool call to render. */
+  readonly toolCall: ToolCall;
+  /** Whether to show the full args/result (expanded view). */
+  readonly expanded?: boolean;
+}
+
+const STATUS_INDICATOR: Record<number, { symbol: string; color?: string }> = {
+  [ToolCallStatus.TOOL_CALL_RUNNING]: { symbol: "⠋", color: "yellow" },
+  [ToolCallStatus.TOOL_CALL_COMPLETED]: { symbol: "✓", color: "green" },
+  [ToolCallStatus.TOOL_CALL_FAILED]: { symbol: "✗", color: "red" },
+};
+
+/**
+ * Renders a single tool call with a status indicator, name, and
+ * optional expanded args/result preview.
+ */
+export function ToolCallItem({ toolCall, expanded = false }: ToolCallItemProps) {
+  const indicator = STATUS_INDICATOR[toolCall.status] ?? {
+    symbol: "○",
+  };
+
+  const serverSlug = toolCall.mcpServerSlug;
+  const label = serverSlug
+    ? `${serverSlug}/${toolCall.name}`
+    : toolCall.name;
+
+  return (
+    <Box flexDirection="column">
+      <Box gap={1}>
+        <Text color={indicator.color}>{indicator.symbol}</Text>
+        <Text>{label}</Text>
+        {toolCall.status === ToolCallStatus.TOOL_CALL_RUNNING && (
+          <Text dimColor>running</Text>
+        )}
+      </Box>
+      {expanded && toolCall.argsPreview && (
+        <Box paddingLeft={3}>
+          <Text dimColor wrap="truncate-end">
+            {toolCall.argsPreview}
+          </Text>
+        </Box>
+      )}
+      {expanded &&
+        toolCall.status === ToolCallStatus.TOOL_CALL_COMPLETED &&
+        toolCall.result && (
+          <Box paddingLeft={3}>
+            <Text dimColor wrap="truncate-end">
+              {truncateResult(toolCall.result)}
+            </Text>
+          </Box>
+        )}
+      {expanded &&
+        toolCall.status === ToolCallStatus.TOOL_CALL_FAILED &&
+        toolCall.error && (
+          <Box paddingLeft={3}>
+            <Text color="red">{toolCall.error}</Text>
+          </Box>
+        )}
+    </Box>
+  );
+}
+
+function truncateResult(result: string, maxLines = 5): string {
+  const lines = result.split("\n");
+  if (lines.length <= maxLines) return result;
+  return lines.slice(0, maxLines).join("\n") + `\n... (${lines.length - maxLines} more lines)`;
+}

package/src/components/UsageWidget.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { Box, Text } from "ink";
+import type { AgentExecution } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/api_pb";
+import { useSessionUsage, formatCost, formatTokenCount } from "@stigmer/react";
+
+/** Props for {@link UsageWidget}. */
+export interface UsageWidgetProps {
+  /** All executions for the current session (completed + active). */
+  readonly executions: readonly AgentExecution[];
+}
+
+/**
+ * Compact terminal widget showing session-level token usage and cost.
+ *
+ * Aggregates per-message `LlmCallMetrics` across all executions
+ * in the session. Renders nothing when no usage data is available.
+ *
+ * Uses the headless {@link useSessionUsage} hook from `@stigmer/react`.
+ */
+export function UsageWidget({ executions }: UsageWidgetProps) {
+  const usage = useSessionUsage(executions);
+
+  if (!usage.hasUsage) return null;
+
+  return (
+    <Box paddingLeft={1} gap={1}>
+      <Text dimColor>
+        {formatCost(usage.totalCostUsd)} · {formatTokenCount(usage.totalTokens)}{" "}
+        tokens · {usage.llmCallCount}{" "}
+        {usage.llmCallCount === 1 ? "call" : "calls"}
+        {usage.primaryModel ? ` · ${usage.primaryModel}` : ""}
+      </Text>
+    </Box>
+  );
+}

package/src/index.ts

@@ -0,0 +1,28 @@
+// Provider
+export { InkStigmerProvider, type InkStigmerProviderProps } from "./provider.js";
+
+// Transport (re-exported from @stigmer/sdk/node)
+export {
+  createNodeClient,
+  createNodeTransport,
+  type NodeClientConfig,
+} from "@stigmer/sdk/node";
+
+// Markdown
+export { renderMarkdown } from "./markdown.js";
+
+// Components
+export { MessageEntry, type MessageEntryProps } from "./components/MessageEntry.js";
+export { MessageThread, type MessageThreadProps } from "./components/MessageThread.js";
+export { ToolCallItem, type ToolCallItemProps } from "./components/ToolCallItem.js";
+export { ToolCallGroup, type ToolCallGroupProps } from "./components/ToolCallGroup.js";
+export { SubAgentBlock, type SubAgentBlockProps } from "./components/SubAgentBlock.js";
+export { TodoList, type TodoListProps } from "./components/TodoList.js";
+export { ApprovalPrompt, type ApprovalPromptProps } from "./components/ApprovalPrompt.js";
+export { ExecutionProgress, type ExecutionProgressProps } from "./components/ExecutionProgress.js";
+export { FollowUpInput, type FollowUpInputProps } from "./components/FollowUpInput.js";
+export { UsageWidget, type UsageWidgetProps } from "./components/UsageWidget.js";
+
+// Composed views
+export { SessionView, type SessionViewProps } from "./app/SessionView.js";
+export { SessionApp, type SessionAppProps } from "./app/SessionApp.js";

package/src/markdown.ts

@@ -0,0 +1,48 @@
+import { Marked } from "marked";
+import { markedTerminal } from "marked-terminal";
+
+let _marked: Marked | null = null;
+
+function getMarked(width?: number): Marked {
+  if (_marked && !width) return _marked;
+
+  const instance = new Marked();
+  instance.use(
+    markedTerminal({
+      width: width ?? process.stdout.columns ?? 80,
+      reflowText: true,
+      showSectionPrefix: false,
+    }),
+  );
+
+  if (!width) _marked = instance;
+  return instance;
+}
+
+/**
+ * Render a markdown string to ANSI-styled terminal output.
+ *
+ * Uses `marked` with `marked-terminal` to produce styled text suitable
+ * for display in a terminal. Supports headings, code blocks (with syntax
+ * highlighting), lists, bold/italic, links, tables, and blockquotes.
+ *
+ * @param content - Raw markdown string.
+ * @param width - Terminal width for text wrapping. Defaults to `process.stdout.columns` or 80.
+ * @returns ANSI-styled string ready for terminal output.
+ *
+ * @example
+ * ```ts
+ * import { renderMarkdown } from "@stigmer/ink";
+ *
+ * const ansi = renderMarkdown("**Hello** from the agent!");
+ * process.stdout.write(ansi);
+ * ```
+ */
+export function renderMarkdown(content: string, width?: number): string {
+  const marked = getMarked(width);
+  const result = marked.parse(content);
+  if (typeof result !== "string") {
+    return content;
+  }
+  return result.trimEnd();
+}

package/src/provider.tsx

@@ -0,0 +1,62 @@
+import React, { type ReactNode } from "react";
+import { StigmerContext, DeploymentModeContext } from "@stigmer/react";
+import type { Stigmer, DeploymentMode } from "@stigmer/sdk";
+
+/**
+ * Props for {@link InkStigmerProvider}.
+ */
+export interface InkStigmerProviderProps {
+  /** Pre-configured Stigmer client (use {@link createNodeClient} to create one). */
+  client: Stigmer;
+
+  /** Child components to render. */
+  children: ReactNode;
+
+  /**
+   * Deployment mode for feature gating.
+   * - `"cloud"`: All features available (default).
+   * - `"local"`: OSS feature subset only.
+   */
+  deploymentMode?: DeploymentMode;
+}
+
+/**
+ * Stigmer provider for Ink (terminal) environments.
+ *
+ * Provides the same React contexts as `StigmerProvider` from
+ * `@stigmer/react`, but without the DOM `<div>` wrapper used for
+ * CSS scoping (which is not applicable in a terminal).
+ *
+ * All hooks from `@stigmer/react` (`useStigmer`, `useSessionConversation`,
+ * `useExecutionStream`, etc.) work identically under this provider.
+ *
+ * @example
+ * ```tsx
+ * import { render } from "ink";
+ * import { InkStigmerProvider, createNodeClient } from "@stigmer/ink";
+ *
+ * const client = createNodeClient({
+ *   baseUrl: "https://api.stigmer.ai",
+ *   apiKey: process.env.STIGMER_API_KEY,
+ * });
+ *
+ * render(
+ *   <InkStigmerProvider client={client}>
+ *     <MyTerminalApp />
+ *   </InkStigmerProvider>
+ * );
+ * ```
+ */
+export function InkStigmerProvider({
+  client,
+  children,
+  deploymentMode = "cloud",
+}: InkStigmerProviderProps) {
+  return (
+    <StigmerContext.Provider value={client}>
+      <DeploymentModeContext.Provider value={deploymentMode}>
+        {children}
+      </DeploymentModeContext.Provider>
+    </StigmerContext.Provider>
+  );
+}

package/src/types/marked-terminal.d.ts

@@ -0,0 +1,19 @@
+declare module "marked-terminal" {
+  import type { MarkedExtension } from "marked";
+
+  interface MarkedTerminalOptions {
+    width?: number;
+    reflowText?: boolean;
+    showSectionPrefix?: boolean;
+    tab?: number;
+    unescape?: boolean;
+    emoji?: boolean;
+  }
+
+  export function markedTerminal(
+    options?: MarkedTerminalOptions,
+    highlightOptions?: Record<string, unknown>,
+  ): MarkedExtension;
+
+  export default class Renderer {}
+}