@nastechai/agent 0.16.0 → 0.17.0

package/src/components/Markdown.tsx

@@ -0,0 +1,383 @@
+import { useMemo, type ReactNode } from "react";
+
+/**
+ * Lightweight markdown renderer for LLM output.
+ * Handles: code blocks, inline code, bold, italic, headers, links, lists, horizontal rules.
+ * NOT a full CommonMark parser — optimized for typical assistant message patterns.
+ *
+ * `streaming` renders a blinking caret at the tail of the last block so it
+ * appears to hug the final character instead of wrapping onto a new line
+ * after a block element (paragraph/list/code/…).
+ */
+export function Markdown({
+  content,
+  highlightTerms,
+  streaming,
+}: {
+  content: string;
+  highlightTerms?: string[];
+  streaming?: boolean;
+}) {
+  const blocks = useMemo(() => parseBlocks(content), [content]);
+  const caret = streaming ? <StreamingCaret /> : null;
+
+  return (
+    <div className="text-sm text-foreground leading-relaxed space-y-2">
+      {blocks.map((block, i) => (
+        <Block
+          key={i}
+          block={block}
+          highlightTerms={highlightTerms}
+          caret={caret && i === blocks.length - 1 ? caret : null}
+        />
+      ))}
+      {blocks.length === 0 && caret}
+    </div>
+  );
+}
+
+function StreamingCaret() {
+  return (
+    <span
+      aria-hidden
+      className="inline-block w-[0.5em] h-[1em] ml-0.5 align-[-0.15em] bg-foreground/50 animate-pulse"
+    />
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Types                                                              */
+/* ------------------------------------------------------------------ */
+
+type BlockNode =
+  | { type: "code"; lang: string; content: string }
+  | { type: "heading"; level: number; content: string }
+  | { type: "hr" }
+  | { type: "list"; ordered: boolean; items: string[] }
+  | { type: "paragraph"; content: string };
+
+/* ------------------------------------------------------------------ */
+/*  Block parser                                                       */
+/* ------------------------------------------------------------------ */
+
+function parseBlocks(text: string): BlockNode[] {
+  const lines = text.split("\n");
+  const blocks: BlockNode[] = [];
+  let i = 0;
+
+  while (i < lines.length) {
+    const line = lines[i];
+
+    // Fenced code block
+    const fenceMatch = line.match(/^```(\w*)/);
+    if (fenceMatch) {
+      const lang = fenceMatch[1] || "";
+      const codeLines: string[] = [];
+      i++;
+      while (i < lines.length && !lines[i].startsWith("```")) {
+        codeLines.push(lines[i]);
+        i++;
+      }
+      i++; // skip closing ```
+      blocks.push({ type: "code", lang, content: codeLines.join("\n") });
+      continue;
+    }
+
+    // Heading
+    const headingMatch = line.match(/^(#{1,4})\s+(.+)/);
+    if (headingMatch) {
+      blocks.push({
+        type: "heading",
+        level: headingMatch[1].length,
+        content: headingMatch[2],
+      });
+      i++;
+      continue;
+    }
+
+    // Horizontal rule
+    if (/^[-*_]{3,}\s*$/.test(line)) {
+      blocks.push({ type: "hr" });
+      i++;
+      continue;
+    }
+
+    // Unordered list
+    if (/^[-*+]\s/.test(line)) {
+      const items: string[] = [];
+      while (i < lines.length && /^[-*+]\s/.test(lines[i])) {
+        items.push(lines[i].replace(/^[-*+]\s/, ""));
+        i++;
+      }
+      blocks.push({ type: "list", ordered: false, items });
+      continue;
+    }
+
+    // Ordered list
+    if (/^\d+[.)]\s/.test(line)) {
+      const items: string[] = [];
+      while (i < lines.length && /^\d+[.)]\s/.test(lines[i])) {
+        items.push(lines[i].replace(/^\d+[.)]\s/, ""));
+        i++;
+      }
+      blocks.push({ type: "list", ordered: true, items });
+      continue;
+    }
+
+    // Empty line
+    if (line.trim() === "") {
+      i++;
+      continue;
+    }
+
+    // Paragraph — collect consecutive non-empty, non-special lines
+    const paraLines: string[] = [];
+    while (
+      i < lines.length &&
+      lines[i].trim() !== "" &&
+      !lines[i].match(/^```/) &&
+      !lines[i].match(/^#{1,4}\s/) &&
+      !lines[i].match(/^[-*+]\s/) &&
+      !lines[i].match(/^\d+[.)]\s/) &&
+      !lines[i].match(/^[-*_]{3,}\s*$/)
+    ) {
+      paraLines.push(lines[i]);
+      i++;
+    }
+    if (paraLines.length > 0) {
+      blocks.push({ type: "paragraph", content: paraLines.join("\n") });
+    }
+  }
+
+  return blocks;
+}
+
+/* ------------------------------------------------------------------ */
+/*  Block renderer                                                     */
+/* ------------------------------------------------------------------ */
+
+function Block({
+  block,
+  highlightTerms,
+  caret,
+}: {
+  block: BlockNode;
+  highlightTerms?: string[];
+  caret?: ReactNode;
+}) {
+  switch (block.type) {
+    case "code":
+      return (
+        <pre className="bg-secondary/60 border border-border px-3 py-2.5 text-xs font-mono leading-relaxed overflow-x-auto">
+          <code>
+            {block.content}
+            {caret}
+          </code>
+        </pre>
+      );
+
+    case "heading": {
+      const Tag = `h${Math.min(block.level, 4)}` as "h1" | "h2" | "h3" | "h4";
+      const sizes: Record<string, string> = {
+        h1: "text-base font-bold",
+        h2: "text-sm font-bold",
+        h3: "text-sm font-semibold",
+        h4: "text-sm font-medium",
+      };
+      return (
+        <Tag className={sizes[Tag]}>
+          <InlineContent text={block.content} highlightTerms={highlightTerms} />
+          {caret}
+        </Tag>
+      );
+    }
+
+    case "hr":
+      return (
+        <>
+          <hr className="border-border" />
+          {caret}
+        </>
+      );
+
+    case "list": {
+      const Tag = block.ordered ? "ol" : "ul";
+      const last = block.items.length - 1;
+      return (
+        <Tag
+          className={`space-y-0.5 ${block.ordered ? "list-decimal" : "list-disc"} pl-5 text-sm`}
+        >
+          {block.items.map((item, i) => (
+            <li key={i}>
+              <InlineContent text={item} highlightTerms={highlightTerms} />
+              {i === last ? caret : null}
+            </li>
+          ))}
+        </Tag>
+      );
+    }
+
+    case "paragraph":
+      return (
+        <p>
+          <InlineContent text={block.content} highlightTerms={highlightTerms} />
+          {caret}
+        </p>
+      );
+  }
+}
+
+/* ------------------------------------------------------------------ */
+/*  Inline parser + renderer                                           */
+/* ------------------------------------------------------------------ */
+
+type InlineNode =
+  | { type: "text"; content: string }
+  | { type: "code"; content: string }
+  | { type: "bold"; content: string }
+  | { type: "italic"; content: string }
+  | { type: "link"; text: string; href: string }
+  | { type: "br" };
+
+function parseInline(text: string): InlineNode[] {
+  const nodes: InlineNode[] = [];
+  // Pattern priority: code > link > bold > italic > bare URL > line break
+  const pattern =
+    /(`[^`]+`)|(\[([^\]]+)\]\(([^)]+)\))|(\*\*([^*]+)\*\*)|(\*([^*]+)\*)|(\bhttps?:\/\/[^\s<>)\]]+)|(\n)/g;
+  let lastIndex = 0;
+  let match: RegExpExecArray | null;
+
+  while ((match = pattern.exec(text)) !== null) {
+    if (match.index > lastIndex) {
+      nodes.push({ type: "text", content: text.slice(lastIndex, match.index) });
+    }
+
+    if (match[1]) {
+      // Inline code
+      nodes.push({ type: "code", content: match[1].slice(1, -1) });
+    } else if (match[2]) {
+      // [text](url) link
+      nodes.push({ type: "link", text: match[3], href: match[4] });
+    } else if (match[5]) {
+      // **bold**
+      nodes.push({ type: "bold", content: match[6] });
+    } else if (match[7]) {
+      // *italic*
+      nodes.push({ type: "italic", content: match[8] });
+    } else if (match[9]) {
+      // Bare URL
+      nodes.push({ type: "link", text: match[9], href: match[9] });
+    } else if (match[10]) {
+      // Line break within paragraph
+      nodes.push({ type: "br" });
+    }
+
+    lastIndex = match.index + match[0].length;
+  }
+
+  if (lastIndex < text.length) {
+    nodes.push({ type: "text", content: text.slice(lastIndex) });
+  }
+
+  return nodes;
+}
+
+function InlineContent({
+  text,
+  highlightTerms,
+}: {
+  text: string;
+  highlightTerms?: string[];
+}) {
+  const nodes = useMemo(() => parseInline(text), [text]);
+
+  return (
+    <>
+      {nodes.map((node, i) => {
+        switch (node.type) {
+          case "text":
+            return (
+              <HighlightedText
+                key={i}
+                text={node.content}
+                terms={highlightTerms}
+              />
+            );
+          case "code":
+            return (
+              <code
+                key={i}
+                className="bg-secondary/60 px-1.5 py-0.5 text-xs font-mono text-primary/90"
+              >
+                {node.content}
+              </code>
+            );
+          case "bold":
+            return (
+              <strong key={i} className="font-semibold">
+                <HighlightedText text={node.content} terms={highlightTerms} />
+              </strong>
+            );
+          case "italic":
+            return (
+              <em key={i}>
+                <HighlightedText text={node.content} terms={highlightTerms} />
+              </em>
+            );
+          case "link": {
+            // Security: only render http(s)/mailto links. Other schemes
+            // (javascript:, data:, vbscript:) are dropped to plain text so a
+            // crafted link in agent/message content can't execute on click.
+            const href = node.href.trim();
+            if (!/^(https?:|mailto:)/i.test(href)) {
+              return (
+                <HighlightedText
+                  key={i}
+                  text={node.text}
+                  terms={highlightTerms}
+                />
+              );
+            }
+            return (
+              <a
+                key={i}
+                href={href}
+                target="_blank"
+                rel="noreferrer"
+                className="text-primary underline underline-offset-2 decoration-primary/30 hover:decoration-primary/60 transition-colors"
+              >
+                {node.text}
+              </a>
+            );
+          }
+          case "br":
+            return <br key={i} />;
+        }
+      })}
+    </>
+  );
+}
+
+/** Highlight search terms within a plain text string. */
+function HighlightedText({ text, terms }: { text: string; terms?: string[] }) {
+  if (!terms || terms.length === 0) return <>{text}</>;
+
+  // Build a regex that matches any of the search terms (case-insensitive)
+  const escaped = terms.map((t) => t.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"));
+  const regex = new RegExp(`(${escaped.join("|")})`, "gi");
+  const parts = text.split(regex);
+
+  return (
+    <>
+      {parts.map((part, i) =>
+        regex.test(part) ? (
+          <mark key={i} className="bg-warning/30 text-warning px-0.5">
+            {part}
+          </mark>
+        ) : (
+          <span key={i}>{part}</span>
+        ),
+      )}
+    </>
+  );
+}

package/src/components/ModelInfoCard.tsx

@@ -0,0 +1,112 @@
+import { useEffect, useRef, useState } from "react";
+import { Brain, Eye, Gauge, Lightbulb, Wrench } from "lucide-react";
+import { Spinner } from "@nastechai/ui/ui/components/spinner";
+import { api } from "@/lib/api";
+import type { ModelInfoResponse } from "@/lib/api";
+import { formatTokenCount } from "@/lib/format";
+
+interface ModelInfoCardProps {
+  /** Current model string from config state — used to detect changes */
+  currentModel: string;
+  /** Bumped after config saves to trigger re-fetch */
+  refreshKey?: number;
+}
+
+export function ModelInfoCard({
+  currentModel,
+  refreshKey = 0,
+}: ModelInfoCardProps) {
+  const [info, setInfo] = useState<ModelInfoResponse | null>(null);
+  const [loading, setLoading] = useState(false);
+  const lastFetchKeyRef = useRef("");
+
+  useEffect(() => {
+    if (!currentModel) return;
+    // Re-fetch when model changes OR when refreshKey bumps (after save)
+    const fetchKey = `${currentModel}:${refreshKey}`;
+    if (fetchKey === lastFetchKeyRef.current) return;
+    lastFetchKeyRef.current = fetchKey;
+    setLoading(true);
+    api
+      .getModelInfo()
+      .then(setInfo)
+      .catch(() => setInfo(null))
+      .finally(() => setLoading(false));
+  }, [currentModel, refreshKey]);
+
+  if (loading) {
+    return (
+      <div className="flex items-center gap-2 py-2 text-xs text-muted-foreground">
+        <Spinner className="text-xs" />
+        Loading model info…
+      </div>
+    );
+  }
+
+  if (!info || !info.model || info.effective_context_length <= 0) return null;
+
+  const caps = info.capabilities;
+  const hasCaps = caps && Object.keys(caps).length > 0;
+
+  return (
+    <div className="border border-border/60 bg-muted/30 px-3 py-2.5 space-y-2">
+      <div className="flex items-center gap-4 text-xs">
+        <div className="flex items-center gap-1.5 text-muted-foreground">
+          <Gauge className="h-3.5 w-3.5" />
+          <span className="font-medium">Context Window</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <span className="font-mono font-semibold text-foreground">
+            {formatTokenCount(info.effective_context_length)}
+          </span>
+          {info.config_context_length > 0 ? (
+            <span className="text-amber-500 text-xs">
+              (override — auto: {formatTokenCount(info.auto_context_length)})
+            </span>
+          ) : (
+            <span className="text-text-tertiary text-xs">
+              auto-detected
+            </span>
+          )}
+        </div>
+      </div>
+
+      {hasCaps && caps.max_output_tokens && caps.max_output_tokens > 0 && (
+        <div className="flex items-center gap-4 text-xs">
+          <div className="flex items-center gap-1.5 text-muted-foreground">
+            <Lightbulb className="h-3.5 w-3.5" />
+            <span className="font-medium">Max Output</span>
+          </div>
+          <span className="font-mono font-semibold text-foreground">
+            {formatTokenCount(caps.max_output_tokens)}
+          </span>
+        </div>
+      )}
+
+      {hasCaps && (
+        <div className="flex flex-wrap items-center gap-1.5 pt-0.5">
+          {caps.supports_tools && (
+            <span className="inline-flex items-center gap-1 bg-emerald-500/10 px-2 py-0.5 text-xs font-medium text-emerald-600 dark:text-emerald-400">
+              <Wrench className="h-2.5 w-2.5" /> Tools
+            </span>
+          )}
+          {caps.supports_vision && (
+            <span className="inline-flex items-center gap-1 bg-blue-500/10 px-2 py-0.5 text-xs font-medium text-blue-600 dark:text-blue-400">
+              <Eye className="h-2.5 w-2.5" /> Vision
+            </span>
+          )}
+          {caps.supports_reasoning && (
+            <span className="inline-flex items-center gap-1 bg-purple-500/10 px-2 py-0.5 text-xs font-medium text-purple-600 dark:text-purple-400">
+              <Brain className="h-2.5 w-2.5" /> Reasoning
+            </span>
+          )}
+          {caps.model_family && (
+            <span className="inline-flex items-center gap-1 bg-muted px-2 py-0.5 text-xs font-medium text-text-secondary">
+              {caps.model_family}
+            </span>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}