@eidentic/cli 0.1.0

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@eidentic/cli",
+  "version": "0.1.0",
+  "type": "module",
+  "license": "Apache-2.0",
+  "description": "The eidentic command-line tool — dev server, project init, component scaffolding, and health diagnostics.",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/eidentic/eidentic.git",
+    "directory": "packages/cli"
+  },
+  "main": "./dist/index.js",
+  "exports": {
+    ".": "./dist/index.js"
+  },
+  "bin": {
+    "eidentic": "./dist/index.js"
+  },
+  "files": [
+    "dist",
+    "templates",
+    "LICENSE",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "dependencies": {
+    "@clack/prompts": "^1.5.1",
+    "@hono/node-server": "^2.0.0",
+    "citty": "^0.2.2",
+    "consola": "^3.4.2",
+    "hono": "^4.12.0",
+    "jiti": "^2.7.0",
+    "picocolors": "^1.1.1",
+    "@eidentic/core": "0.1.0",
+    "@eidentic/eval": "0.1.0",
+    "@eidentic/server": "0.1.0",
+    "@eidentic/studio": "0.1.0",
+    "@eidentic/types": "0.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "react": "^19.0.0",
+    "@eidentic/react": "0.1.0",
+    "@eidentic/skills": "^0.1.0"
+  },
+  "keywords": [
+    "ai",
+    "agents",
+    "typescript",
+    "eidentic",
+    "cli",
+    "dev-server",
+    "scaffold"
+  ],
+  "homepage": "https://github.com/eidentic/eidentic#readme",
+  "bugs": {
+    "url": "https://github.com/eidentic/eidentic/issues"
+  },
+  "engines": {
+    "node": ">=22"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format esm --clean",
+    "typecheck": "tsc --noEmit",
+    "typecheck:templates": "tsc --noEmit -p tsconfig.templates.json"
+  }
+}

package/templates/components/chat.tsx

@@ -0,0 +1,226 @@
+// Copied by `eidentic add component` — yours to edit.
+"use client";
+
+import React, { useRef, useEffect, type KeyboardEvent, type FormEvent } from "react";
+import { useAgent } from "@eidentic/react";
+import type { TextMessage, ToolCall } from "@eidentic/react";
+
+// ---------------------------------------------------------------------------
+// Props
+// ---------------------------------------------------------------------------
+
+export interface EidenticChatProps {
+  /** Agent ID registered in the Eidentic server. */
+  agentId: string;
+  /** Base URL of the Eidentic server. Defaults to same-origin (""). */
+  baseUrl?: string;
+  /** Placeholder text for the input field. */
+  placeholder?: string;
+  /** Class name applied to the outermost container. */
+  className?: string;
+}
+
+// ---------------------------------------------------------------------------
+// Sub-components
+// ---------------------------------------------------------------------------
+
+function MessageBubble({ message }: { message: TextMessage }) {
+  return (
+    <div className="flex justify-end">
+      <div className="max-w-[80%] rounded-2xl rounded-br-sm bg-indigo-500 px-4 py-2 text-sm text-white">
+        {message.content}
+      </div>
+    </div>
+  );
+}
+
+function AssistantBubble({ message }: { message: TextMessage }) {
+  return (
+    <div className="flex justify-start">
+      <div className="max-w-[80%] rounded-2xl rounded-bl-sm bg-white px-4 py-2 text-sm text-zinc-800 shadow-sm">
+        {message.content}
+        {message.streaming && (
+          <span className="ml-1 inline-block h-3 w-1 animate-pulse rounded-sm bg-indigo-400" aria-hidden="true" />
+        )}
+      </div>
+    </div>
+  );
+}
+
+function ToolChip({ call }: { call: ToolCall }) {
+  return (
+    <div
+      role="status"
+      aria-label={`Tool call: ${call.name}`}
+      className="flex items-center gap-1.5 rounded-full border border-indigo-200 bg-indigo-50 px-3 py-1 text-xs text-indigo-700"
+    >
+      <span className="h-1.5 w-1.5 rounded-full bg-indigo-400" aria-hidden="true" />
+      <span className="font-mono">{call.name}</span>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// EidenticChat
+// ---------------------------------------------------------------------------
+
+/**
+ * Drop-in chat UI for a Eidentic agent.
+ *
+ * Usage:
+ *   <EidenticChat agentId="my-agent" baseUrl="http://localhost:3000" />
+ */
+export function EidenticChat({
+  agentId,
+  baseUrl = "",
+  placeholder = "Type a message…",
+  className = "",
+}: EidenticChatProps) {
+  const { messages, toolCalls, result, status, error, send, stop } = useAgent(agentId, baseUrl);
+
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  // Autoscroll to bottom on new messages.
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (el) {
+      el.scrollTop = el.scrollHeight;
+    }
+  }, [messages, toolCalls]);
+
+  const isStreaming = status === "streaming";
+
+  function handleSubmit(e: FormEvent) {
+    e.preventDefault();
+    const val = inputRef.current?.value.trim();
+    if (!val || isStreaming) return;
+    if (inputRef.current) inputRef.current.value = "";
+    send(val);
+  }
+
+  function handleKeyDown(e: KeyboardEvent<HTMLTextAreaElement>) {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      const val = inputRef.current?.value.trim();
+      if (!val || isStreaming) return;
+      if (inputRef.current) inputRef.current.value = "";
+      send(val);
+    }
+  }
+
+  // Format USD cost when available.
+  const costDisplay =
+    result?.cost?.usd != null ? `$${result.cost.usd.toFixed(6)}` : null;
+  const usageDisplay =
+    result?.usage != null
+      ? `${result.usage.inputTokens + result.usage.outputTokens} tokens`
+      : null;
+
+  return (
+    <div
+      className={`flex h-full flex-col rounded-2xl border border-zinc-200 bg-zinc-50 shadow-sm ${className}`}
+      role="region"
+      aria-label="Eidentic chat"
+    >
+      {/* Message list */}
+      <div
+        ref={scrollRef}
+        className="flex-1 overflow-y-auto space-y-3 px-4 py-4"
+        role="log"
+        aria-live="polite"
+        aria-label="Conversation"
+      >
+        {messages.length === 0 && !isStreaming && (
+          <p className="text-center text-sm text-zinc-400">
+            Send a message to start the conversation.
+          </p>
+        )}
+
+        {messages.map((msg, i) =>
+          msg.role === "assistant" ? (
+            <AssistantBubble key={i} message={msg} />
+          ) : (
+            <MessageBubble key={i} message={msg} />
+          ),
+        )}
+
+        {/* Tool-call chips */}
+        {toolCalls.length > 0 && (
+          <div className="flex flex-wrap gap-2 pt-1" aria-label="Active tool calls">
+            {toolCalls.map((tc) => (
+              <ToolChip key={tc.callId} call={tc} />
+            ))}
+          </div>
+        )}
+
+        {/* Error */}
+        {error && (
+          <div
+            role="alert"
+            className="rounded-lg border border-red-200 bg-red-50 px-4 py-2 text-sm text-red-700"
+          >
+            {error.message}
+          </div>
+        )}
+      </div>
+
+      {/* Footer: usage + cost */}
+      {(usageDisplay || costDisplay) && (
+        <div
+          className="flex items-center gap-3 border-t border-zinc-100 px-4 py-1.5 text-xs text-zinc-400"
+          aria-label="Usage summary"
+        >
+          {usageDisplay && <span>{usageDisplay}</span>}
+          {costDisplay && <span>{costDisplay}</span>}
+        </div>
+      )}
+
+      {/* Input */}
+      <form
+        onSubmit={handleSubmit}
+        className="flex items-end gap-2 border-t border-zinc-200 px-3 py-3"
+        aria-label="Message input"
+      >
+        <label htmlFor="eidentic-chat-input" className="sr-only">
+          Message
+        </label>
+        <textarea
+          id="eidentic-chat-input"
+          ref={inputRef}
+          rows={1}
+          placeholder={placeholder}
+          disabled={isStreaming}
+          onKeyDown={handleKeyDown}
+          className="flex-1 resize-none rounded-xl border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-800 placeholder-zinc-400 outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 disabled:opacity-60"
+          aria-multiline="true"
+        />
+        {isStreaming ? (
+          <button
+            type="button"
+            onClick={stop}
+            aria-label="Stop generation"
+            className="flex h-9 w-9 items-center justify-center rounded-xl bg-zinc-200 text-zinc-600 hover:bg-zinc-300 focus-visible:outline-2 focus-visible:outline-indigo-500"
+          >
+            <span className="block h-3.5 w-3.5 rounded-sm bg-current" aria-hidden="true" />
+          </button>
+        ) : (
+          <button
+            type="submit"
+            aria-label="Send message"
+            className="flex h-9 w-9 items-center justify-center rounded-xl bg-indigo-500 text-white hover:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-indigo-500 disabled:opacity-50"
+          >
+            <svg
+              viewBox="0 0 16 16"
+              fill="currentColor"
+              className="h-4 w-4"
+              aria-hidden="true"
+            >
+              <path d="M8 2.5a.75.75 0 0 1 .75.75v7.19l2.47-2.47a.75.75 0 1 1 1.06 1.06l-3.75 3.75a.75.75 0 0 1-1.06 0L3.72 9.03a.75.75 0 1 1 1.06-1.06L7.25 10.44V3.25A.75.75 0 0 1 8 2.5Z" />
+            </svg>
+          </button>
+        )}
+      </form>
+    </div>
+  );
+}

package/templates/components/run-status.tsx

@@ -0,0 +1,273 @@
+// Copied by `eidentic add component` — yours to edit.
+"use client";
+
+import React from "react";
+import { useAsyncRun, useRunStatus } from "@eidentic/react";
+import type { AsyncRunStatus } from "@eidentic/react";
+
+// ---------------------------------------------------------------------------
+// Props
+// ---------------------------------------------------------------------------
+
+export interface RunStatusProps {
+  /** Agent ID registered in the Eidentic server. */
+  agentId: string;
+  /**
+   * Run ID to watch. When provided, the component polls that run's status.
+   * Omit (or pass null) to render a start-button that fires a new run.
+   */
+  runId?: string | null;
+  /**
+   * Initial input for new runs. Only used when `runId` is not provided and the
+   * start button is clicked. Required when using the start-button variant.
+   */
+  initialInput?: unknown;
+  /** Base URL of the Eidentic server. Defaults to same-origin (""). */
+  baseUrl?: string;
+  /** Label for the start button. Defaults to "Start run". */
+  startLabel?: string;
+  /** Class name applied to the outermost container. */
+  className?: string;
+}
+
+// ---------------------------------------------------------------------------
+// Spinner
+// ---------------------------------------------------------------------------
+
+function Spinner() {
+  return (
+    <span
+      className="inline-block h-4 w-4 animate-spin rounded-full border-2 border-indigo-200 border-t-indigo-500"
+      role="status"
+      aria-label="Loading"
+    />
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Status badge
+// ---------------------------------------------------------------------------
+
+const STATUS_STYLES: Record<AsyncRunStatus, string> = {
+  idle: "bg-zinc-100 text-zinc-500",
+  running: "bg-indigo-50 text-indigo-600",
+  completed: "bg-emerald-50 text-emerald-700",
+  failed: "bg-red-50 text-red-700",
+  aborted: "bg-amber-50 text-amber-700",
+};
+
+function StatusPill({ status }: { status: AsyncRunStatus }) {
+  return (
+    <span
+      className={`inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium ${STATUS_STYLES[status]}`}
+      aria-live="polite"
+      aria-atomic="true"
+    >
+      {status === "running" && <Spinner />}
+      {status}
+    </span>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Watcher variant (runId provided)
+// ---------------------------------------------------------------------------
+
+function RunWatcher({
+  agentId,
+  runId,
+  baseUrl,
+  className,
+}: {
+  agentId: string;
+  runId: string;
+  baseUrl: string;
+  className: string;
+}) {
+  const { status, output, error, isPolling } = useRunStatus(agentId, runId, { baseUrl });
+
+  const outputText =
+    output != null
+      ? typeof output === "string"
+        ? output
+        : JSON.stringify(output, null, 2)
+      : null;
+
+  return (
+    <div
+      className={`space-y-3 rounded-2xl border border-zinc-200 bg-white p-4 shadow-sm ${className}`}
+      role="region"
+      aria-label="Run status"
+    >
+      {/* Header */}
+      <div className="flex items-center gap-3">
+        <span className="text-sm font-medium text-zinc-700">Run</span>
+        <code className="flex-1 truncate rounded bg-zinc-100 px-2 py-0.5 font-mono text-xs text-zinc-500">
+          {runId}
+        </code>
+        <StatusPill status={status} />
+      </div>
+
+      {/* Polling indicator */}
+      {isPolling && (
+        <p className="text-xs text-zinc-400">Polling for updates…</p>
+      )}
+
+      {/* Output */}
+      {outputText && (
+        <div>
+          <p className="mb-1 text-xs font-medium text-zinc-500">Output</p>
+          <pre className="overflow-x-auto rounded-xl bg-zinc-50 p-3 text-xs text-zinc-700 whitespace-pre-wrap break-all">
+            {outputText}
+          </pre>
+        </div>
+      )}
+
+      {/* Error */}
+      {error && (
+        <div
+          role="alert"
+          className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700"
+        >
+          {error}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Starter variant (no runId — shows a start button)
+// ---------------------------------------------------------------------------
+
+function RunStarter({
+  agentId,
+  baseUrl,
+  initialInput,
+  startLabel,
+  className,
+}: {
+  agentId: string;
+  baseUrl: string;
+  initialInput: unknown;
+  startLabel: string;
+  className: string;
+}) {
+  const { start, runId, status, output, error, isPolling } = useAsyncRun(agentId, { baseUrl });
+
+  async function handleStart() {
+    try {
+      await start(initialInput ?? "");
+    } catch (e) {
+      // error is surfaced via the hook state
+      void e;
+    }
+  }
+
+  const outputText =
+    output != null
+      ? typeof output === "string"
+        ? output
+        : JSON.stringify(output, null, 2)
+      : null;
+
+  const isRunning = status === "running";
+
+  return (
+    <div
+      className={`space-y-3 rounded-2xl border border-zinc-200 bg-white p-4 shadow-sm ${className}`}
+      role="region"
+      aria-label="Run status"
+    >
+      {/* Header */}
+      <div className="flex items-center gap-3">
+        <span className="text-sm font-medium text-zinc-700">Agent run</span>
+        {status !== "idle" && <StatusPill status={status} />}
+        <button
+          type="button"
+          onClick={handleStart}
+          disabled={isRunning}
+          className="ml-auto rounded-xl bg-indigo-500 px-3 py-1.5 text-sm font-medium text-white hover:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-indigo-500 disabled:opacity-50"
+          aria-label={startLabel}
+        >
+          {isRunning ? "Running…" : startLabel}
+        </button>
+      </div>
+
+      {/* Run ID */}
+      {runId && (
+        <p className="font-mono text-xs text-zinc-400">
+          run: <code>{runId}</code>
+        </p>
+      )}
+
+      {/* Polling indicator */}
+      {isPolling && (
+        <p className="text-xs text-zinc-400">Polling for updates…</p>
+      )}
+
+      {/* Output */}
+      {outputText && (
+        <div>
+          <p className="mb-1 text-xs font-medium text-zinc-500">Output</p>
+          <pre className="overflow-x-auto rounded-xl bg-zinc-50 p-3 text-xs text-zinc-700 whitespace-pre-wrap break-all">
+            {outputText}
+          </pre>
+        </div>
+      )}
+
+      {/* Error */}
+      {error && (
+        <div
+          role="alert"
+          className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700"
+        >
+          {error}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// RunStatus — top-level component
+// ---------------------------------------------------------------------------
+
+/**
+ * Displays the status of an async agent run, or a start button that fires one.
+ *
+ * Usage (watch an existing run):
+ *   <RunStatus agentId="my-agent" runId={runId} baseUrl="http://localhost:3000" />
+ *
+ * Usage (start a new run):
+ *   <RunStatus agentId="my-agent" initialInput="Summarise the logs" baseUrl="http://localhost:3000" />
+ */
+export function RunStatus({
+  agentId,
+  runId = null,
+  initialInput,
+  baseUrl = "",
+  startLabel = "Start run",
+  className = "",
+}: RunStatusProps) {
+  if (runId) {
+    return (
+      <RunWatcher
+        agentId={agentId}
+        runId={runId}
+        baseUrl={baseUrl}
+        className={className}
+      />
+    );
+  }
+
+  return (
+    <RunStarter
+      agentId={agentId}
+      baseUrl={baseUrl}
+      initialInput={initialInput}
+      startLabel={startLabel}
+      className={className}
+    />
+  );
+}