@cianfrani/ai-ui 0.1.0-alpha.0

package/src/semantic/ai-tool-result.ts

@@ -0,0 +1,239 @@
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { HasSlotController } from "../lib/has-slot-controller";
+
+export type ToolResultStatus = "success" | "error" | "cancelled" | "unknown";
+export type ToolResultChannel = "result" | "stdout" | "stderr" | "log" | "unknown";
+
+function isStructuredValue(value: unknown): value is string | unknown[] | Record<string, unknown> {
+  return (
+    typeof value === "string" ||
+    Array.isArray(value) ||
+    (Boolean(value) && typeof value === "object")
+  );
+}
+
+function extractFirstStructuredField(
+  record: Record<string, unknown>,
+  keys: string[],
+): string[] | undefined {
+  for (const key of keys) {
+    const candidate = record[key];
+    if (!isStructuredValue(candidate)) {
+      continue;
+    }
+    const parts = extractStructuredText(candidate);
+    if (parts.length > 0) {
+      return parts;
+    }
+  }
+}
+
+function extractStructuredText(value: unknown): string[] {
+  if (typeof value === "string") {
+    const trimmed = value.trim();
+    return trimmed ? [trimmed] : [];
+  }
+
+  if (Array.isArray(value)) {
+    return value.flatMap((item) => extractStructuredText(item));
+  }
+
+  if (value && typeof value === "object") {
+    const record = value as Record<string, unknown>;
+    const extracted = extractFirstStructuredField(record, [
+      "text",
+      "message",
+      "content",
+      "result",
+      "output",
+      "error",
+    ]);
+    return extracted ?? [JSON.stringify(value, undefined, 2)];
+  }
+
+  if (value === null || value === undefined) {
+    return [];
+  }
+  return [String(value)];
+}
+
+export function normalizeToolOutput(content: string): string {
+  const trimmed = content.trim();
+  if (!trimmed) {
+    return "";
+  }
+
+  try {
+    const parsed = JSON.parse(trimmed) as unknown;
+    const lines = extractStructuredText(parsed).filter(Boolean);
+    if (lines.length > 0) {
+      return lines.join("\n\n");
+    }
+  } catch {
+    // fall through to raw content
+  }
+
+  return trimmed;
+}
+
+/**
+ * Specialized runtime/tool output content block.
+ *
+ * @slot - Output content. If absent and content is set, renders normalized output in <pre>.
+ * @slot meta - Optional source/channel/truncation metadata.
+ *
+ * @cssprop --ai-tool-result-color - Output text color.
+ * @cssprop --ai-tool-result-background - Output background.
+ * @cssprop --ai-tool-result-meta-color - Meta slot text color.
+ * @cssprop --ai-tool-result-error-color - Error text color.
+ * @cssprop --ai-tool-result-code-color - Code/output text color.
+ * @cssprop --ai-tool-result-code-font - Code/output font family.
+ * @cssprop --ai-tool-result-max-height - Maximum output height. Default: 240px
+ */
+@customElement("ai-tool-result")
+export class AiToolResult extends LitElement {
+  /** Associated ai-tool-call[id]. Missing/mismatched ids are allowed. */
+  @property({ reflect: true, attribute: "for" })
+  htmlFor = "";
+
+  /** Tool/result source name. */
+  @property({ reflect: true })
+  name = "";
+
+  /** Result status. */
+  @property({ reflect: true })
+  status: "success" | "error" | "cancelled" | "unknown" = "unknown";
+
+  /** Output channel. */
+  @property({ reflect: true })
+  channel: "result" | "stdout" | "stderr" | "log" | "unknown" = "unknown";
+
+  /** MIME/content type hint. */
+  @property({ reflect: true, attribute: "content-type" })
+  contentType = "text/plain";
+
+  /** Raw output content. Prefer property binding for large content. */
+  @property({ type: String })
+  content = "";
+
+  /** Whether the rendered output was truncated upstream. */
+  @property({ reflect: true, type: Boolean })
+  truncated = false;
+
+  private readonly hasSlot = new HasSlotController(this, "[default]", "meta");
+
+  static override styles = css`
+    :host {
+      box-sizing: border-box;
+      display: block;
+      margin: 0;
+      padding: 0;
+      min-width: 0;
+      max-width: 100%;
+      background: var(--ai-tool-result-background, transparent);
+      color: var(--ai-tool-result-color, var(--text, var(--ai-color-text, inherit)));
+    }
+
+    *,
+    *::before,
+    *::after {
+      box-sizing: inherit;
+    }
+
+    .container {
+      display: flex;
+      flex-direction: column;
+      gap: var(--ai-space-sm, 8px);
+      min-width: 0;
+      max-width: 100%;
+    }
+
+    .meta {
+      display: flex;
+      align-items: center;
+      gap: var(--ai-space-xs, 4px);
+      color: var(--ai-tool-result-meta-color, var(--text-muted, var(--ai-color-text-muted, #888)));
+      font-size: var(--font-size-caption, var(--ai-font-size-xs, 0.75rem));
+    }
+
+    .content {
+      min-width: 0;
+      max-width: 100%;
+      color: var(--ai-tool-result-color, var(--text, var(--ai-color-text, inherit)));
+    }
+
+    pre {
+      margin: 0;
+      max-width: 100%;
+      max-height: var(--ai-tool-result-max-height, 240px);
+      overflow-x: auto;
+      overflow-y: auto;
+      -webkit-overflow-scrolling: touch;
+      color: var(
+        --ai-tool-result-code-color,
+        color-mix(in oklch, var(--text, currentColor) 82%, var(--text-muted, currentColor))
+      );
+      font-family: var(--ai-tool-result-code-font, var(--font-family-mono, monospace));
+      font-size: var(--font-size-caption, 0.75rem);
+      line-height: var(--line-height-body, 1.5);
+      white-space: pre-wrap;
+      word-break: break-word;
+    }
+
+    :host([channel="stderr"]) .content,
+    :host([status="error"]) .content {
+      color: var(--ai-tool-result-error-color, var(--error, var(--ai-color-error, #dc2626)));
+    }
+
+    :host([channel="log"]) .content {
+      color: var(--ai-tool-result-meta-color, var(--text-muted, var(--ai-color-text-muted, #888)));
+    }
+
+    .truncation-indicator::after {
+      content: " (truncated)";
+      color: var(--ai-tool-result-meta-color, var(--text-muted, var(--ai-color-text-muted, #888)));
+      font-style: italic;
+    }
+  `;
+
+  private get hasDefaultContent(): boolean {
+    return this.hasSlot.test("[default]");
+  }
+
+  private get hasMetaContent(): boolean {
+    return this.hasSlot.test("meta");
+  }
+
+  override render() {
+    const body = normalizeToolOutput(this.content);
+    return html`
+      <div class="container">
+        ${
+          this.hasMetaContent
+            ? html`
+                <div class="meta"><slot name="meta"></slot></div>
+              `
+            : nothing
+        }
+        <div class="content ${this.truncated ? "truncation-indicator" : ""}">
+          ${
+            this.hasDefaultContent
+              ? html`
+                  <slot></slot>
+                `
+              : body
+                ? html`<pre>${body}</pre>`
+                : nothing
+          }
+        </div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ai-tool-result": AiToolResult;
+  }
+}

package/src/semantic/index.ts

@@ -0,0 +1,6 @@
+export * from "./ai-conversation";
+export * from "./ai-message";
+export * from "./ai-tool-call";
+export * from "./ai-tool-result";
+export * from "./ai-thinking";
+export * from "./ai-event";

package/src/visual/avatar.ts

@@ -0,0 +1,163 @@
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+const SIZE_MAP: Record<string, string> = {
+  sm: "1.5rem",
+  md: "2rem",
+  lg: "2.5rem",
+};
+
+const FONT_SIZE_MAP: Record<string, string> = {
+  sm: "0.625rem",
+  md: "0.75rem",
+  lg: "0.875rem",
+};
+
+/**
+ * Actor/agent identity marker.
+ *
+ * @slot - Custom avatar content/icon.
+ *
+ * @cssprop --size - Avatar width/height.
+ * @cssprop --background-color - Fallback background.
+ * @cssprop --text-color - Initials/icon color.
+ * @cssprop --border-color - Border color.
+ * @cssprop --border-radius - Avatar radius.
+ * @cssprop --font-size - Initials font size.
+ * @cssprop --font-weight - Initials font weight. Default: 700
+ */
+@customElement("ai-avatar")
+export class AiAvatar extends LitElement {
+  /** Image source URL. When set, renders an <img>. */
+  @property({ reflect: true }) src = "";
+  /** Display name. Used for initials fallback and img alt text. */
+  @property({ reflect: true }) name = "";
+  /** Size preset. */
+  @property({ reflect: true }) size: "sm" | "md" | "lg" = "md";
+  /** Semantic color tone. */
+  @property({ reflect: true }) tone: "neutral" | "accent" | "user" | "assistant" | "agent" =
+    "neutral";
+
+  static override styles = css`
+    :host {
+      box-sizing: border-box;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--size, 2rem);
+      height: var(--size, 2rem);
+      border-radius: var(--border-radius, 50%);
+      background: var(--background-color, rgba(128, 128, 128, 0.15));
+      color: var(--text-color, inherit);
+      border: 1px solid var(--border-color, transparent);
+      overflow: hidden;
+      flex-shrink: 0;
+      margin: 0;
+      padding: 0;
+    }
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      display: block;
+    }
+
+    .initials {
+      font-size: var(--font-size, 0.75rem);
+      font-weight: var(--font-weight, 700);
+      line-height: 1;
+      text-transform: uppercase;
+      letter-spacing: 0.02em;
+      user-select: none;
+    }
+
+    *,
+    *::before,
+    *::after {
+      box-sizing: inherit;
+    }
+  `;
+
+  override render() {
+    if (this.src) {
+      return html`<img src="${this.src}" alt="${this.name || ""}" part="image" />`;
+    }
+
+    const initials = this.getInitials();
+    if (initials) {
+      return html`<span class="initials" part="initials">${initials}</span>`;
+    }
+
+    return html`
+      <slot></slot>
+    `;
+  }
+
+  protected override updated(): void {
+    const size = SIZE_MAP[this.size] ?? "2rem";
+    const fontSize = FONT_SIZE_MAP[this.size] ?? "0.75rem";
+
+    this.style.setProperty("--size", `var(--size, ${size})`);
+    this.style.setProperty("--font-size", `var(--font-size, ${fontSize})`);
+
+    const toneColors = this.getToneColors();
+    this.style.setProperty("--background-color", `var(--background-color, ${toneColors.bg})`);
+    this.style.setProperty("--text-color", `var(--text-color, ${toneColors.text})`);
+    this.style.setProperty("--border-color", `var(--border-color, ${toneColors.border})`);
+  }
+
+  private getInitials(): string {
+    if (!this.name) {
+      return "";
+    }
+    const words = this.name.trim().split(/\s+/);
+    if (words.length >= 2) {
+      const first = words[0]?.[0] ?? "";
+      const last = words[words.length - 1]?.[0] ?? "";
+      return (first + last).toUpperCase();
+    }
+    return (words[0]?.[0] ?? "").toUpperCase();
+  }
+
+  private getToneColors(): { bg: string; text: string; border: string } {
+    switch (this.tone) {
+      case "accent":
+        return {
+          bg: "rgba(74, 144, 217, 0.15)",
+          text: "var(--ai-color-accent, #4a90d9)",
+          border: "rgba(74, 144, 217, 0.25)",
+        };
+      case "user":
+        return {
+          bg: "rgba(74, 144, 217, 0.12)",
+          text: "var(--ai-color-accent, #4a90d9)",
+          border: "rgba(74, 144, 217, 0.2)",
+        };
+      case "assistant":
+        return {
+          bg: "rgba(128, 128, 128, 0.12)",
+          text: "var(--ai-color-text-muted, rgba(128, 128, 128, 0.8))",
+          border: "rgba(128, 128, 128, 0.2)",
+        };
+      case "agent":
+        return {
+          bg: "rgba(46, 160, 67, 0.12)",
+          text: "var(--ai-color-success, #2ea043)",
+          border: "rgba(46, 160, 67, 0.2)",
+        };
+      default:
+        return {
+          bg: "rgba(128, 128, 128, 0.15)",
+          text: "inherit",
+          border: "transparent",
+        };
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ai-avatar": AiAvatar;
+  }
+}

package/src/visual/badge.ts

@@ -0,0 +1,141 @@
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+/**
+ * Compact semantic label/status chip.
+ *
+ * @slot - Badge label.
+ *
+ * @cssprop --background-color - Badge background.
+ * @cssprop --text-color - Badge text color.
+ * @cssprop --border-color - Badge border color.
+ * @cssprop --border-radius - Badge radius.
+ * @cssprop --dot-color - Leading dot color.
+ * @cssprop --font-size - Font size.
+ * @cssprop --font-weight - Font weight. Default: 600
+ * @cssprop --inline-gap - Gap between dot/content.
+ */
+@customElement("ai-badge")
+export class AiBadge extends LitElement {
+  /** Semantic color tone. */
+  @property({ reflect: true }) tone:
+    | "neutral"
+    | "accent"
+    | "success"
+    | "warning"
+    | "error"
+    | "info" = "neutral";
+  /** Size preset. */
+  @property({ reflect: true }) size: "sm" | "md" = "md";
+  /** Whether to show a leading dot indicator. */
+  @property({ reflect: true, type: Boolean }) dot = false;
+
+  static override styles = css`
+    :host {
+      box-sizing: border-box;
+      display: inline-flex;
+      align-items: center;
+      gap: var(--inline-gap, 4px);
+      margin: 0;
+      padding: var(--_padding, 3px 8px);
+      font-size: var(--font-size, 0.75rem);
+      font-weight: var(--font-weight, 600);
+      line-height: 1;
+      color: var(--text-color, inherit);
+      background: var(--background-color, rgba(128, 128, 128, 0.1));
+      border: 1px solid var(--border-color, transparent);
+      border-radius: var(--border-radius, 999px);
+      white-space: nowrap;
+    }
+
+    :host([size="sm"]) {
+      --_padding: 2px 6px;
+    }
+
+    :host([size="md"]) {
+      --_padding: 3px 8px;
+    }
+
+    .dot {
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      background: var(--dot-color, var(--text-color, inherit));
+      flex-shrink: 0;
+    }
+
+    *,
+    *::before,
+    *::after {
+      box-sizing: inherit;
+    }
+  `;
+
+  override render() {
+    return html`
+      ${
+        this.dot
+          ? html`
+              <span class="dot" part="dot"></span>
+            `
+          : ""
+      }
+      <slot></slot>
+    `;
+  }
+
+  protected override updated(): void {
+    const colors = this.getToneColors();
+    this.style.setProperty("--background-color", `var(--background-color, ${colors.bg})`);
+    this.style.setProperty("--text-color", `var(--text-color, ${colors.text})`);
+    this.style.setProperty("--border-color", `var(--border-color, ${colors.border})`);
+    this.style.setProperty("--dot-color", `var(--dot-color, ${colors.text})`);
+  }
+
+  private getToneColors(): { bg: string; text: string; border: string } {
+    switch (this.tone) {
+      case "accent":
+        return {
+          bg: "rgba(74, 144, 217, 0.12)",
+          text: "var(--ai-color-accent, #4a90d9)",
+          border: "rgba(74, 144, 217, 0.2)",
+        };
+      case "success":
+        return {
+          bg: "rgba(46, 160, 67, 0.12)",
+          text: "var(--ai-color-success, #2ea043)",
+          border: "rgba(46, 160, 67, 0.2)",
+        };
+      case "warning":
+        return {
+          bg: "rgba(210, 153, 34, 0.12)",
+          text: "var(--ai-color-warning, #d29922)",
+          border: "rgba(210, 153, 34, 0.2)",
+        };
+      case "error":
+        return {
+          bg: "rgba(227, 62, 51, 0.12)",
+          text: "var(--ai-color-error, #e33e33)",
+          border: "rgba(227, 62, 51, 0.2)",
+        };
+      case "info":
+        return {
+          bg: "rgba(80, 160, 220, 0.12)",
+          text: "var(--ai-color-info, #50a0dc)",
+          border: "rgba(80, 160, 220, 0.2)",
+        };
+      default:
+        return {
+          bg: "rgba(128, 128, 128, 0.1)",
+          text: "inherit",
+          border: "rgba(128, 128, 128, 0.15)",
+        };
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ai-badge": AiBadge;
+  }
+}

package/src/visual/divider.ts

@@ -0,0 +1,97 @@
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+const TONE_OPACITY: Record<string, number> = {
+  subtle: 0.08,
+  default: 0.16,
+  strong: 0.32,
+};
+
+/**
+ * Separator/section marker.
+ *
+ * @slot - Optional label/content centered in divider.
+ *
+ * @cssprop --line-color - Divider line color.
+ * @cssprop --line-width - Divider thickness.
+ * @cssprop --text-color - Label text color.
+ * @cssprop --label-background-color - Label background to mask line.
+ * @cssprop --label-gap - Gap between line and label.
+ */
+@customElement("ai-divider")
+export class AiDivider extends LitElement {
+  /** Axis of the divider line. */
+  @property({ reflect: true }) orientation: "horizontal" | "vertical" = "horizontal";
+  /** Visual prominence of the divider. */
+  @property({ reflect: true }) tone: "subtle" | "default" | "strong" = "default";
+
+  static override styles = css`
+    :host {
+      box-sizing: border-box;
+      display: flex;
+      margin: 0;
+      padding: 0;
+      color: var(--text-color, inherit);
+    }
+
+    :host([orientation="horizontal"]) {
+      flex-direction: row;
+      align-items: center;
+      width: 100%;
+    }
+
+    :host([orientation="vertical"]) {
+      flex-direction: column;
+      justify-content: center;
+      height: 100%;
+      align-self: stretch;
+    }
+
+    .line {
+      flex: 1;
+      background: var(--line-color, rgba(128, 128, 128, 0.16));
+    }
+
+    :host([orientation="horizontal"]) .line {
+      height: var(--line-width, 1px);
+    }
+
+    :host([orientation="vertical"]) .line {
+      width: var(--line-width, 1px);
+    }
+
+    ::slotted(*) {
+      padding: 0 var(--label-gap, 0.5rem);
+      white-space: nowrap;
+    }
+
+    :host([orientation="vertical"]) ::slotted(*) {
+      padding: var(--label-gap, 0.5rem) 0;
+    }
+
+    *,
+    *::before,
+    *::after {
+      box-sizing: inherit;
+    }
+  `;
+
+  override render() {
+    return html`
+      <span class="line" part="line-before"></span>
+      <slot></slot>
+      <span class="line" part="line-after"></span>
+    `;
+  }
+
+  protected override updated(): void {
+    const opacity = TONE_OPACITY[this.tone] ?? 0.16;
+    this.style.setProperty("--line-color", `var(--line-color, rgba(128, 128, 128, ${opacity}))`);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ai-divider": AiDivider;
+  }
+}