arcie 0.1.4 → 0.1.6

package/templates/web-chat/components/input-bar.tsx

@@ -0,0 +1,181 @@
+"use client";
+
+import * as React from "react";
+import { ArrowUp, Paperclip, StopCircle, Trash2, X } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface InputBarProps {
+  onSend(message: string, files?: File[]): void;
+  onStop(): void;
+  onClear?(): void;
+  streaming: boolean;
+  disabled?: boolean;
+  hasMessages?: boolean;
+}
+
+export function InputBar({
+  onSend,
+  onStop,
+  onClear,
+  streaming,
+  disabled,
+  hasMessages,
+}: InputBarProps) {
+  const [value, setValue] = React.useState("");
+  const [files, setFiles] = React.useState<File[]>([]);
+  const textareaRef = React.useRef<HTMLTextAreaElement>(null);
+  const fileInputRef = React.useRef<HTMLInputElement>(null);
+
+  const submit = () => {
+    const trimmed = value.trim();
+    if ((trimmed.length === 0 && files.length === 0) || streaming || disabled) return;
+    onSend(trimmed, files.length > 0 ? files : undefined);
+    setValue("");
+    setFiles([]);
+    if (textareaRef.current) textareaRef.current.style.height = "auto";
+    if (fileInputRef.current) fileInputRef.current.value = "";
+  };
+
+  const onKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (event.key === "Enter" && !event.shiftKey) {
+      event.preventDefault();
+      submit();
+    }
+  };
+
+  const onChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setValue(event.target.value);
+    const el = event.target;
+    el.style.height = "auto";
+    el.style.height = `${Math.min(el.scrollHeight, 160)}px`;
+  };
+
+  const onFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const next = event.target.files;
+    if (next === null) return;
+    setFiles((prev) => [...prev, ...Array.from(next)]);
+  };
+
+  const removeFile = (index: number) => {
+    setFiles((prev) => prev.filter((_, i) => i !== index));
+  };
+
+  const openFilePicker = () => {
+    fileInputRef.current?.click();
+  };
+
+  return (
+    <div className="shrink-0 bg-transparent px-4 pt-4 pb-6">
+      <div className="mx-auto w-full max-w-3xl">
+        <div
+          className={cn(
+            "relative flex flex-col rounded-2xl border border-border/40 bg-muted/10 backdrop-blur-md p-3 transition-all",
+            "hover:border-border/60 hover:bg-muted/20",
+            "focus-within:border-primary/45 focus-within:ring-1 focus-within:ring-primary/20",
+          )}
+        >
+          {files.length > 0 && (
+            <div className="flex flex-wrap gap-1.5 mb-2">
+              {files.map((file, index) => (
+                <div
+                  key={`${file.name}-${index}`}
+                  className="flex items-center gap-1.5 px-2 py-1 rounded-lg bg-card/60 text-[11px] font-medium text-foreground border border-border/30"
+                >
+                  <Paperclip className="h-3 w-3 text-muted-foreground/70" />
+                  <span className="max-w-[160px] truncate">{file.name}</span>
+                  <button
+                    type="button"
+                    onClick={() => removeFile(index)}
+                    className="text-muted-foreground/50 hover:text-foreground transition-colors"
+                    title="Remove attachment"
+                  >
+                    <X className="h-3 w-3" />
+                  </button>
+                </div>
+              ))}
+            </div>
+          )}
+
+          <textarea
+            ref={textareaRef}
+            value={value}
+            onChange={onChange}
+            onKeyDown={onKeyDown}
+            rows={2}
+            placeholder={streaming ? "…" : "Ask a question..."}
+            disabled={disabled}
+            className={cn(
+              "max-h-40 min-h-[48px] w-full resize-none bg-transparent py-1.5 text-xs",
+              "placeholder:text-muted-foreground/50 focus:outline-none leading-relaxed",
+              "disabled:cursor-not-allowed disabled:opacity-50",
+            )}
+          />
+
+          <div className="flex items-center justify-between pt-2.5 mt-2 select-none">
+            <div className="flex items-center gap-1.5">
+              <input
+                ref={fileInputRef}
+                type="file"
+                multiple
+                onChange={onFileChange}
+                className="hidden"
+              />
+              <button
+                type="button"
+                onClick={openFilePicker}
+                disabled={streaming}
+                className={cn(
+                  "h-8 w-8 flex items-center justify-center rounded-full text-muted-foreground/60 transition-colors",
+                  "hover:bg-muted/30 hover:text-foreground",
+                  "disabled:cursor-not-allowed disabled:opacity-40",
+                )}
+                aria-label="Attach files"
+                title="Attach files"
+              >
+                <Paperclip className="h-4 w-4" />
+              </button>
+            </div>
+
+            <div className="flex items-center gap-2 shrink-0">
+              {hasMessages && onClear && (
+                <button
+                  type="button"
+                  onClick={onClear}
+                  className="h-8 w-8 flex items-center justify-center rounded-full text-muted-foreground/60 hover:bg-muted/30 hover:text-foreground transition-colors"
+                  aria-label="New chat"
+                  title="New chat"
+                >
+                  <Trash2 className="h-4 w-4" />
+                </button>
+              )}
+              {streaming ? (
+                <button
+                  type="button"
+                  onClick={onStop}
+                  className="h-8 w-8 flex items-center justify-center rounded-full bg-foreground text-background hover:bg-foreground/90 transition-colors"
+                  aria-label="Stop generation"
+                >
+                  <StopCircle className="h-3.5 w-3.5 fill-current" />
+                </button>
+              ) : (
+                <button
+                  type="button"
+                  onClick={submit}
+                  disabled={(value.trim().length === 0 && files.length === 0) || disabled}
+                  className={cn(
+                    "h-8 w-8 flex items-center justify-center rounded-full bg-foreground text-background transition-colors",
+                    "hover:bg-foreground/90",
+                    "disabled:cursor-not-allowed disabled:opacity-40",
+                  )}
+                  aria-label="Send message"
+                >
+                  <ArrowUp className="h-3.5 w-3.5" />
+                </button>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/web-chat/components/message.tsx

@@ -0,0 +1,123 @@
+"use client";
+
+import * as React from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { AlertTriangle, Copy, RotateCcw } from "lucide-react";
+import { cn } from "@/lib/utils";
+import type { UiMessage } from "@/lib/types";
+import { ToolCall } from "@/components/tool-call";
+
+interface MessageProps {
+  message: UiMessage;
+  isLast?: boolean;
+  onCopy?(text: string): void;
+  onRegenerate?(): void;
+}
+
+export function Message({ message, isLast, onCopy, onRegenerate }: MessageProps) {
+  const isUser = message.role === "user";
+
+  if (isUser) {
+    return (
+      <div className="flex flex-col px-4 items-end">
+        <div className="max-w-[85%] rounded-2xl rounded-tr-sm bg-primary px-3.5 py-2 text-primary-foreground shadow-sm">
+          <p className="text-xs font-medium leading-relaxed whitespace-pre-wrap">
+            {message.content}
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col px-4 items-start">
+      <div className="w-full space-y-2">
+        {message.errored && (
+          <div className="mb-2 flex items-center gap-2 text-xs text-destructive">
+            <AlertTriangle className="h-3 w-3" />
+            <span>Error</span>
+          </div>
+        )}
+
+        {message.reasoning && (
+          <details className="text-[11px] text-muted-foreground/70 border border-border/20 rounded-lg px-2.5 py-1.5 bg-muted/10">
+            <summary className="cursor-pointer select-none font-medium">thinking</summary>
+            <div className="mt-1.5 whitespace-pre-wrap italic leading-relaxed">
+              {message.reasoning}
+            </div>
+          </details>
+        )}
+
+        {message.streaming && message.content.length === 0 && !message.toolCalls?.length ? (
+          <span className="inline-flex items-center gap-[3px]">
+            <span
+              className="w-1.5 h-1.5 rounded-full bg-muted-foreground/40 animate-bounce"
+              style={{ animationDelay: "0ms" }}
+            />
+            <span
+              className="w-1.5 h-1.5 rounded-full bg-muted-foreground/40 animate-bounce"
+              style={{ animationDelay: "150ms" }}
+            />
+            <span
+              className="w-1.5 h-1.5 rounded-full bg-muted-foreground/40 animate-bounce"
+              style={{ animationDelay: "300ms" }}
+            />
+          </span>
+        ) : (
+          message.content.length > 0 && (
+            <div
+              className={cn(
+                "prose prose-sm prose-zinc max-w-none dark:prose-invert",
+                "prose-p:my-2 prose-p:leading-relaxed prose-p:text-xs",
+                "prose-pre:my-2 prose-pre:text-xs",
+                "prose-code:text-xs prose-code:bg-muted prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:before:content-none prose-code:after:content-none",
+                message.errored && "text-destructive",
+              )}
+            >
+              <ReactMarkdown remarkPlugins={[remarkGfm]}>{message.content}</ReactMarkdown>
+            </div>
+          )
+        )}
+
+        {message.toolCalls && message.toolCalls.length > 0 && (
+          <div className="flex flex-col gap-1.5">
+            {message.toolCalls.map((call) => (
+              <ToolCall key={call.callId} call={call} />
+            ))}
+          </div>
+        )}
+
+        {!message.streaming && message.content.length > 0 && (
+          <div className="flex flex-wrap items-center gap-1.5 pt-1">
+            {message.latencyMs !== undefined && (
+              <span className="h-5 rounded border border-border/30 bg-muted/5 px-1.5 font-mono text-[9px] text-muted-foreground/70">
+                {message.latencyMs}ms
+              </span>
+            )}
+            {onCopy && (
+              <button
+                type="button"
+                onClick={() => onCopy(message.content)}
+                className="h-6 w-6 flex items-center justify-center rounded text-muted-foreground/60 hover:text-foreground hover:bg-muted/30 transition-colors"
+                title="Copy to clipboard"
+              >
+                <Copy className="h-3 w-3" />
+              </button>
+            )}
+            {isLast && onRegenerate && (
+              <button
+                type="button"
+                onClick={onRegenerate}
+                className="h-6 w-6 flex items-center justify-center rounded text-muted-foreground/60 hover:text-foreground hover:bg-muted/30 transition-colors"
+                title="Regenerate response"
+              >
+                <RotateCcw className="h-3 w-3" />
+              </button>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/templates/web-chat/components/tool-call.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import * as React from "react";
+import { CheckCircle2, Loader2, XCircle, HelpCircle } from "lucide-react";
+import { cn } from "@/lib/utils";
+import type { UiToolCall } from "@/lib/types";
+
+function summarize(input: unknown, max = 60): string {
+  if (input === undefined || input === null) return "";
+  if (typeof input !== "object") return String(input).slice(0, max);
+  if (Array.isArray(input)) return `[${input.length}]`;
+  const entries = Object.entries(input as Record<string, unknown>);
+  if (entries.length === 0) return "";
+  const parts = entries.map(([key, value]) => {
+    if (typeof value === "string") return `${key}="${value.slice(0, 24)}"`;
+    if (typeof value === "object") {
+      return `${key}=${Array.isArray(value) ? `[${value.length}]` : "{…}"}`;
+    }
+    return `${key}=${String(value)}`;
+  });
+  const joined = parts.join(", ");
+  return joined.length > max ? `${joined.slice(0, max - 1)}…` : joined;
+}
+
+function resultText(call: UiToolCall): string | undefined {
+  if (call.status === "error") return call.errorMessage;
+  if (call.status === "approval") return call.errorMessage ?? "awaiting approval";
+  if (call.output === undefined || call.output === null) return undefined;
+  if (typeof call.output === "string") {
+    return call.output.split("\n").find((line) => line.trim().length > 0) ?? undefined;
+  }
+  if (typeof call.output !== "object") return String(call.output);
+  const record = call.output as Record<string, unknown>;
+  for (const key of ["result", "text", "message", "summary", "value", "output"]) {
+    const value = record[key];
+    if (value !== undefined && typeof value !== "object") return String(value);
+  }
+  return undefined;
+}
+
+export function ToolCall({ call }: { call: UiToolCall }) {
+  const args = summarize(call.input);
+  const result = resultText(call);
+  return (
+    <div
+      className={cn(
+        "flex flex-col gap-1 rounded-lg border border-border/30 bg-muted/10 px-3 py-2 text-xs",
+      )}
+    >
+      <div className="flex items-center gap-2">
+        <StatusGlyph status={call.status} />
+        <span className="font-mono font-medium text-[11px]">{call.name}</span>
+        {args.length > 0 && (
+          <span className="truncate font-mono text-[10px] text-muted-foreground/70">{args}</span>
+        )}
+      </div>
+      {result !== undefined && (
+        <div className="ml-6 truncate text-[10px] text-muted-foreground/70">
+          → <span className="font-mono">{result}</span>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function StatusGlyph({ status }: { status: UiToolCall["status"] }) {
+  switch (status) {
+    case "running":
+      return <Loader2 className="h-3.5 w-3.5 animate-spin text-muted-foreground" />;
+    case "done":
+      return <CheckCircle2 className="h-3.5 w-3.5 text-emerald-500" />;
+    case "error":
+      return <XCircle className="h-3.5 w-3.5 text-destructive" />;
+    case "approval":
+      return <HelpCircle className="h-3.5 w-3.5 text-amber-500" />;
+    default:
+      return null;
+  }
+}

package/templates/web-chat/components/ui/button.tsx

@@ -0,0 +1,46 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: { variant: "default", size: "default" },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, ...props }, ref) => (
+    <button
+      className={cn(buttonVariants({ variant, size, className }))}
+      ref={ref}
+      {...props}
+    />
+  ),
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

package/templates/web-chat/components/ui/input.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+const Input = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(
+  ({ className, type, ...props }, ref) => (
+    <input
+      type={type}
+      className={cn(
+        "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  ),
+);
+Input.displayName = "Input";
+
+export { Input };

package/templates/web-chat/components.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "app/globals.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}

package/templates/web-chat/lib/stream.ts

@@ -0,0 +1,41 @@
+import type { ArcieStreamEvent } from "./types";
+
+/**
+ * Reads an NDJSON stream from `response.body` and yields decoded events.
+ * Tolerates partial lines split across chunks and skips malformed rows so
+ * one bad event doesn't stop the stream.
+ */
+export async function* readArcieStream(
+  response: Response,
+): AsyncIterable<ArcieStreamEvent> {
+  if (response.body === null) return;
+  const reader = response.body.getReader();
+  const decoder = new TextDecoder();
+  let buffer = "";
+
+  while (true) {
+    const { done, value } = await reader.read();
+    if (done) break;
+    buffer += decoder.decode(value, { stream: true });
+    const lines = buffer.split("\n");
+    buffer = lines.pop() ?? "";
+    for (const line of lines) {
+      const trimmed = line.trim();
+      if (trimmed.length === 0) continue;
+      try {
+        yield JSON.parse(trimmed) as ArcieStreamEvent;
+      } catch {
+        // Ignore malformed lines; a partial chunk may still finish next round.
+      }
+    }
+  }
+
+  const tail = buffer.trim();
+  if (tail.length > 0) {
+    try {
+      yield JSON.parse(tail) as ArcieStreamEvent;
+    } catch {
+      /* ignore */
+    }
+  }
+}

package/templates/web-chat/lib/types.ts

@@ -0,0 +1,62 @@
+export type ChatRole = "user" | "assistant";
+
+export interface UiMessage {
+  id: string;
+  role: ChatRole;
+  content: string;
+  toolCalls?: UiToolCall[];
+  reasoning?: string;
+  streaming?: boolean;
+  errored?: boolean;
+  latencyMs?: number;
+}
+
+export interface UiToolCall {
+  callId: string;
+  name: string;
+  input?: unknown;
+  output?: unknown;
+  status: "running" | "done" | "error" | "approval";
+  errorMessage?: string;
+}
+
+export type ArcieStreamEvent =
+  | { type: "session.started"; data: { sessionId: string } }
+  | { type: "turn.started"; data: { turnId: string } }
+  | { type: "message.received"; data: { message: string; turnId: string } }
+  | {
+      type: "message.appended";
+      data: { delta: string; textSoFar: string; turnId: string; stepIndex: number };
+    }
+  | {
+      type: "message.completed";
+      data: { text: string | null; turnId: string; stepIndex: number };
+    }
+  | {
+      type: "reasoning.appended";
+      data: { delta: string; soFar: string; turnId: string; stepIndex: number };
+    }
+  | {
+      type: "reasoning.completed";
+      data: { text: string; turnId: string; stepIndex: number };
+    }
+  | {
+      type: "tool.started";
+      data: { name: string; input: unknown; callId: string; turnId: string };
+    }
+  | {
+      type: "tool.completed";
+      data: {
+        name: string;
+        output: unknown;
+        callId: string;
+        status: string;
+        error?: { code: string; message: string };
+        turnId: string;
+      };
+    }
+  | {
+      type: "step.failed" | "turn.failed" | "session.failed";
+      data: { code: string; message: string };
+    }
+  | { type: string; data: unknown };

package/templates/web-chat/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/templates/web-chat/next.config.mjs

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  devIndicators: false,
+};
+
+export default nextConfig;

package/templates/web-chat/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "web-chat",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --port 3001",
+    "build": "next build",
+    "start": "next start --port 3001",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.475.0",
+    "next": "^15.1.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-markdown": "^9.0.1",
+    "remark-gfm": "^4.0.0",
+    "tailwind-merge": "^2.5.5",
+    "tailwindcss-animate": "^1.0.7"
+  },
+  "devDependencies": {
+    "@tailwindcss/typography": "^0.5.15",
+    "@types/node": "^22.10.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.7.2"
+  }
+}

package/templates/web-chat/postcss.config.mjs

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};