@guuey/chat 0.16.8 → 0.16.9

package/src/react/guuey-chat.tsx

@@ -93,7 +93,10 @@ import { oauthPromptAction, useOAuthReturn } from "./oauth-return.js";
 export function viewPropsWithThemeAnnounce(
   viewProps: TranscriptItemContext["viewProps"],
   mode: ThemeMode,
-  defaults: Pick<ViewSlotProps, "onCallTool" | "onUpdateModelContext" | "onUserMessage"> = {},
+  defaults: Pick<
+    ViewSlotProps,
+    "onCallTool" | "onUpdateModelContext" | "onUserMessage" | "onOpenLink"
+  > = {},
 ): TranscriptItemContext["viewProps"] {
   const themed = (base: ViewSlotProps | undefined): ViewSlotProps => ({
     // Kit-default host wires (guuey#335): the ACTION RELAY (Confirm inside
@@ -214,6 +217,19 @@ export interface GuueyChatProps {
   strings?: Partial<ChatStrings>;
   theme?: GuueyChatTheme;
   mode?: ThemeMode;
+  /**
+   * Message-surface presentation (guuey#521). `"card"` (default) keeps
+   * assistant text on its own card; `"bare"` sits the transcript directly
+   * on the host's background so the embed reads native to the page.
+   */
+  surface?: "card" | "bare";
+  /**
+   * Render the built-in composer (default `true`). `false` hides it for
+   * hosts that drive the conversation through the imperative handle
+   * (guuey#210 `ask`/`compose`) or their own input — pairs with the
+   * handle instead of forcing a CSS hide (guuey#521).
+   */
+  composer?: boolean;
   /** DOM windowing (§3.2). `false` renders everything. */
   window?: TranscriptWindowing | false;
   /**
@@ -323,6 +339,8 @@ export const GuueyChat = forwardRef<GuueyChatHandle, GuueyChatProps>(function Gu
     strings: stringOverrides,
     theme = DEFAULT_CHAT_THEME,
     mode = "light",
+    surface = "card",
+    composer = true,
     window: windowing,
     reader,
     onDebugEvent,
@@ -621,14 +639,33 @@ export const GuueyChat = forwardRef<GuueyChatHandle, GuueyChatProps>(function Gu
     void live.invoke.send(next).catch(() => {});
   }, [busy]);
 
+  // guuey#522: the kit default for `ui/open-link` NEVER navigates
+  // sight-unseen — the ask surfaces as a disclosure affordance (host +
+  // full URL + Open/Dismiss) and the OPEN is the human's own anchor
+  // click, so the browser's activation gate and the review posture agree
+  // by construction. ONE pending ask at a time, newest replaces (a
+  // card spamming asks can never grow an unbounded stack).
+  const [pendingLink, setPendingLink] = useState<string | null>(null);
+  const defaultOnOpenLink = useCallback((url: string) => {
+    setPendingLink(url);
+  }, []);
+
   const effectiveViewProps = useMemo<TranscriptItemContext["viewProps"]>(
     () =>
       viewPropsWithThemeAnnounce(viewProps, mode, {
         ...(stagedDefaultOnCallTool !== undefined ? { onCallTool: stagedDefaultOnCallTool } : {}),
         onUpdateModelContext: defaultOnUpdateModelContext,
         onUserMessage: defaultOnUserMessage,
+        onOpenLink: defaultOnOpenLink,
       }),
-    [viewProps, mode, stagedDefaultOnCallTool, defaultOnUpdateModelContext, defaultOnUserMessage],
+    [
+      viewProps,
+      mode,
+      stagedDefaultOnCallTool,
+      defaultOnUpdateModelContext,
+      defaultOnUserMessage,
+      defaultOnOpenLink,
+    ],
   );
 
   // The canvas-host door (guuey#335): a host mounting views DIRECTLY from
@@ -644,6 +681,7 @@ export const GuueyChat = forwardRef<GuueyChatHandle, GuueyChatProps>(function Gu
           ...(stagedDefaultOnCallTool !== undefined ? { onCallTool: stagedDefaultOnCallTool } : {}),
           onUpdateModelContext: defaultOnUpdateModelContext,
           onUserMessage: defaultOnUserMessage,
+          onOpenLink: defaultOnOpenLink,
           hostContext: { theme: mode },
         }
       : (effectiveViewProps ?? {});
@@ -777,6 +815,7 @@ export const GuueyChat = forwardRef<GuueyChatHandle, GuueyChatProps>(function Gu
         strings={strings}
         theme={theme}
         mode={mode}
+        surface={surface}
         {...(windowing !== undefined ? { window: windowing } : {})}
         {...(components !== undefined ? { components } : {})}
         onToggle={toggle}
@@ -789,6 +828,30 @@ export const GuueyChat = forwardRef<GuueyChatHandle, GuueyChatProps>(function Gu
         {...(onViewRef !== undefined ? { onViewRef } : {})}
         viewProps={effectiveViewProps}
       />
+      {pendingLink !== null && (
+        <div role="status" className="guuey-chat-link-ask">
+          <span className="guuey-chat-link-ask-label">
+            {strings.linkAskLabel(new URL(pendingLink).host)}
+          </span>
+          <span className="guuey-chat-link-ask-url">{pendingLink}</span>
+          <a
+            className="guuey-chat-link-ask-open"
+            href={pendingLink}
+            target="_blank"
+            rel="noopener noreferrer"
+            onClick={() => setPendingLink(null)}
+          >
+            {strings.linkOpen}
+          </a>
+          <button
+            type="button"
+            className="guuey-chat-link-ask-dismiss"
+            onClick={() => setPendingLink(null)}
+          >
+            {strings.linkDismiss}
+          </button>
+        </div>
+      )}
       {oauthReturn.notice !== null && (
         <p
           role="status"
@@ -802,6 +865,7 @@ export const GuueyChat = forwardRef<GuueyChatHandle, GuueyChatProps>(function Gu
           </button>
         </p>
       )}
+      {composer && (
       <form
         className="guuey-chat-composer"
         onSubmit={(e) => {
@@ -843,6 +907,7 @@ export const GuueyChat = forwardRef<GuueyChatHandle, GuueyChatProps>(function Gu
           </button>
         )}
       </form>
+      )}
     </div>
   );
 });

package/src/react/markdown.tsx

@@ -32,11 +32,75 @@ import {
 } from "@silverprotocol/richtext";
 import { normalizeTableRow, type RichTextTableBlock } from "../richtext-table.js";
 
+/**
+ * Bare-URL autolink (guuey#515): richtext mints `link` nodes only from
+ * explicit `[text](url)` markdown, so a plain "https://…" in agent prose
+ * parses as a text node and rendered as untappable static text — on a
+ * phone that means retyping a URL out of a chat bubble. Linkify at the
+ * render boundary, conservatively:
+ *  - the scheme is part of the match (http/https only), so no
+ *    `javascript:`/`data:` target can ever qualify — the SAFE_HREF
+ *    property holds by construction;
+ *  - built as React elements (no HTML string exists to inject into),
+ *    same `rel`/`target` contract as explicit links;
+ *  - trailing punctuation stays prose ("see https://guuey.com." must not
+ *    link the dot), while a balanced closing paren/bracket stays in the
+ *    URL (wiki-style paths);
+ *  - schemeless "www.foo.com" is deliberately NOT linkified — guessing
+ *    schemes is how autolinkers start lying;
+ *  - code spans are untouched (they render `node.code`, not this path).
+ */
+const BARE_URL = /https?:\/\/[^\s<>]+/g;
+
+function trimTrailingPunctuation(url: string): string {
+  for (;;) {
+    const last = url[url.length - 1];
+    if (last === undefined) return url;
+    if (last === ")" || last === "]") {
+      const open = last === ")" ? "(" : "[";
+      const opens = url.split(open).length - 1;
+      const closes = url.split(last).length - 1;
+      if (closes > opens) {
+        url = url.slice(0, -1);
+        continue;
+      }
+      return url;
+    }
+    if (".,;:!?'\"»›".includes(last)) {
+      url = url.slice(0, -1);
+      continue;
+    }
+    return url;
+  }
+}
+
+function linkify(text: string): ReactNode {
+  if (!text.includes("http")) return text;
+  const out: ReactNode[] = [];
+  let consumed = 0;
+  for (const match of text.matchAll(BARE_URL)) {
+    const start = match.index;
+    if (start === undefined) continue;
+    const url = trimTrailingPunctuation(match[0]);
+    if (url.length === 0) continue;
+    if (start > consumed) out.push(text.slice(consumed, start));
+    out.push(
+      <a key={`url-${start}`} href={url} target="_blank" rel="noopener noreferrer">
+        {url}
+      </a>,
+    );
+    consumed = start + url.length;
+  }
+  if (out.length === 0) return text;
+  if (consumed < text.length) out.push(text.slice(consumed));
+  return out;
+}
+
 function Inline({ nodes }: { nodes: RichTextInline[] }): ReactNode {
   return nodes.map((node, i) => {
     switch (node.type) {
       case "text":
-        return <span key={i}>{node.text}</span>;
+        return <span key={i}>{linkify(node.text)}</span>;
       case "break":
         return <br key={i} />;
       case "strong":

package/src/react/theme-css.ts

@@ -24,27 +24,35 @@ const DENSITY_GAP: Record<GuueyChatTheme["shape"]["density"], string> = {
  * One mode's tokens as inline custom properties for the transcript root.
  * Returned as a plain record so callers can spread it into `style` or emit
  * a stylesheet from it.
+ *
+ * Stamped under INTERNAL names (`--_guuey-chat-*`), never the documented
+ * `--guuey-chat-*` channel (guuey#521): the stylesheet reads every token
+ * as `var(--guuey-chat-<t>, var(--_guuey-chat-<t>))`, so a host CSS
+ * variable — set on any ancestor — wins per-token over the resolved
+ * theme, and the two theming channels COMPOSE instead of the inline
+ * stamp silently shadowing the documented one (the trap the landing
+ * home-hero embed hit four rounds of).
  */
 export function themeCssVars(theme: GuueyChatTheme, mode: ThemeMode): Record<string, string> {
   const palette = theme.colors[mode];
   const vars: Record<string, string> = {
-    "--guuey-chat-accent": palette.accent,
-    "--guuey-chat-on-accent": palette.onAccent,
-    "--guuey-chat-ink": palette.ink,
-    "--guuey-chat-ink-muted": palette.inkMuted,
-    "--guuey-chat-surface": palette.surface,
-    "--guuey-chat-canvas": palette.canvas,
-    "--guuey-chat-canvas-muted": palette.canvasMuted,
-    "--guuey-chat-error": palette.error,
-    "--guuey-chat-radius": RADIUS_PX[theme.shape.radius],
-    "--guuey-chat-gap": DENSITY_GAP[theme.shape.density],
-    "--guuey-chat-scale": String(theme.typography.scale ?? 1),
+    "--_guuey-chat-accent": palette.accent,
+    "--_guuey-chat-on-accent": palette.onAccent,
+    "--_guuey-chat-ink": palette.ink,
+    "--_guuey-chat-ink-muted": palette.inkMuted,
+    "--_guuey-chat-surface": palette.surface,
+    "--_guuey-chat-canvas": palette.canvas,
+    "--_guuey-chat-canvas-muted": palette.canvasMuted,
+    "--_guuey-chat-error": palette.error,
+    "--_guuey-chat-radius": RADIUS_PX[theme.shape.radius],
+    "--_guuey-chat-gap": DENSITY_GAP[theme.shape.density],
+    "--_guuey-chat-scale": String(theme.typography.scale ?? 1),
   };
   if (theme.typography.fontFamily !== undefined) {
-    vars["--guuey-chat-font"] = theme.typography.fontFamily;
+    vars["--_guuey-chat-font"] = theme.typography.fontFamily;
   }
   if (theme.typography.monoFontFamily !== undefined) {
-    vars["--guuey-chat-mono-font"] = theme.typography.monoFontFamily;
+    vars["--_guuey-chat-mono-font"] = theme.typography.monoFontFamily;
   }
   return vars;
 }

package/src/react/transcript.tsx

@@ -63,6 +63,14 @@ export interface TranscriptProps
   strings?: ChatStrings;
   theme?: GuueyChatTheme;
   mode?: ThemeMode;
+  /**
+   * Message-surface presentation (guuey#521). `"card"` (default) renders
+   * assistant text on its own surface-tinted, hairline-bordered card;
+   * `"bare"` sits the transcript directly on the host's background — the
+   * embed disappears into the page it lives on. The user pill stays a
+   * bubble in both.
+   */
+  surface?: "card" | "bare";
   /** DOM windowing (§3.2). `false` renders everything. Default tail 80. */
   window?: TranscriptWindowing | false;
   className?: string;
@@ -76,6 +84,7 @@ export function Transcript(props: TranscriptProps): ReactNode {
     strings = defaultChatStrings,
     theme = DEFAULT_CHAT_THEME,
     mode = "light",
+    surface = "card",
     window: windowing = { tail: 80 },
     className,
     style,
@@ -169,7 +178,7 @@ export function Transcript(props: TranscriptProps): ReactNode {
 
   return (
     <div
-      className={`guuey-chat${className !== undefined ? ` ${className}` : ""}`}
+      className={`guuey-chat${surface === "bare" ? " guuey-chat--bare" : ""}${className !== undefined ? ` ${className}` : ""}`}
       style={rootStyle}
       data-guuey-chat-mode={mode}
     >

package/src/strings.ts

@@ -128,6 +128,15 @@ export interface ChatStrings {
   /** R16 — the notice row's label (provenance shows only under debug). */
   noticeLabel: string;
 
+  /**
+   * The `ui/open-link` disclosure affordance (guuey#522): a card asked to
+   * open a URL — the kit shows WHERE before anything navigates, and the
+   * human's own click on `linkOpen` is the only door out.
+   */
+  linkAskLabel: (host: string) => string;
+  linkOpen: string;
+  linkDismiss: string;
+
   /** The 3c composer (`<GuueyChat>`). */
   composerPlaceholder: string;
   composerUnavailable: string;
@@ -233,6 +242,10 @@ export const defaultChatStrings: ChatStrings = {
 
   noticeLabel: "Note",
 
+  linkAskLabel: (host) => `This card wants to open ${host}`,
+  linkOpen: "Open",
+  linkDismiss: "Dismiss",
+
   composerPlaceholder: "Message the agent…",
   composerUnavailable: "Chat is unavailable.",
   composerLabel: "Message",

package/src/theme.ts

@@ -130,12 +130,20 @@ export type GuueyChatTheme = z.infer<typeof GuueyChatTheme>;
  * The brand-neutral-but-polished package default — the theme a builder gets
  * before configuring anything, and the per-token fallback floor every other
  * theme resolves against.
+ *
+ * The accent is MONOCHROME (= ink) by founder ruling (guuey#521): an
+ * unthemed embed must never carry a foreign accent into a host's product —
+ * the old `#2f6bff` blue made every zero-config embed read "off-the-shelf
+ * chat vendor" inside someone else's brand (#414's lesson, mirrored). Ink
+ * as accent means the send button and user pill render as neutral
+ * ink-on-canvas and disappear into any host; a brand accent is a CHOICE
+ * (theme prop or one `--guuey-chat-accent` CSS variable), never a default.
  */
 export const DEFAULT_CHAT_THEME: GuueyChatTheme = {
   name: "default",
   colors: {
     light: {
-      accent: "#2f6bff",
+      accent: "#111318",
       onAccent: "#ffffff",
       ink: "#111318",
       inkMuted: "#5b6270",
@@ -145,7 +153,7 @@ export const DEFAULT_CHAT_THEME: GuueyChatTheme = {
       error: "#d64545",
     },
     dark: {
-      accent: "#5c8dff",
+      accent: "#e8e9ee",
       onAccent: "#0b0d12",
       ink: "#e8e9ee",
       inkMuted: "#9aa0ac",
@@ -269,6 +277,44 @@ export function resolveTheme(
   };
 }
 
+/**
+ * The court-override member a theme DOCUMENT may carry (guuey#519).
+ * Values are theme documents themselves (validated by `resolveTheme`'s own
+ * lenient parse at resolution time, so a partial or future-schema court
+ * entry degrades per-token like any stored theme).
+ */
+const CourtOverrides = z
+  .object({ courts: z.record(z.string(), z.unknown()).optional() })
+  .loose();
+
+/**
+ * Per-court theme resolution (guuey#519 — the #414 rule generalized).
+ *
+ * A theme document may carry `courts`: explicit per-court override
+ * documents keyed by serving court (`"guuey"`, `"ggui"`, …). A surface
+ * resolves ITS court: the court's override resolved per-token OVER the
+ * resolved base document when declared, else the base alone. **Brand is
+ * never a default** — an undeclared or unknown court gets the neutral
+ * base by construction, and readers that never heard of `courts`
+ * (lenient parsers projecting only known tokens) keep reading the base
+ * untouched, so no court can inherit another court's brand.
+ *
+ * Resolved themes are court-free: `courts` never survives resolution.
+ * NEVER throws; unparseable input degrades exactly as `resolveTheme`.
+ */
+export function resolveCourtTheme(
+  candidate: unknown,
+  court: string,
+  base: GuueyChatTheme = DEFAULT_CHAT_THEME,
+): GuueyChatTheme {
+  const resolvedBase = resolveTheme(candidate, base);
+  const parsed = CourtOverrides.safeParse(candidate);
+  if (!parsed.success) return resolvedBase;
+  const override = parsed.data.courts?.[court];
+  if (override === undefined) return resolvedBase;
+  return resolveTheme(override, resolvedBase);
+}
+
 /** Slot-level merge of two ramp statements (candidate slots win per slot). */
 function mergeRampSet(
   base: GuueyChatRampSet | undefined,