@signalcore/ui 1.0.0-beta.0 → 1.0.0-beta.2

package/src/credentials.ts

@@ -27,7 +27,7 @@ export type Credentials =
   | Alone<{ publishableKey: string; visitorId?: string | undefined }>;
 
 /** What one request carries to say who calls, and how to have it anew once it is refused. */
-export interface Signed {
+interface Signed {
   headers: Readonly<Record<string, string>>;
   /** Lets go of a token the API refused, for the next request to ask for another; null: none. */
   renew: (() => void) | null;
@@ -41,7 +41,7 @@ export interface Signed {
 export type Speaker = "business" | "person";
 
 /** How every request and socket of a client says who calls. */
-export interface Signer {
+interface Signer {
   who: Speaker;
   /** What `fetch` sends of the browser's own: the cookie on the page's origin, or nothing. */
   credentials: RequestCredentials;

package/src/dev.ts

@@ -12,7 +12,7 @@ function development(): boolean {
   }
 }
 
-export const DEV = development();
+const DEV = development();
 
 /** A note for the developer of the page, in development only: what the package let pass, and why. */
 export function note(...said: unknown[]): void {

package/src/es.ts

@@ -76,6 +76,7 @@ export const AUTOMATION_MESSAGES_ES: AutomationMessages = {
   on: (often, when) => `${often}, ${when.charAt(0).toLowerCase()}${when.slice(1)}`,
   custom: "Con un horario propio",
   webhook: "Cuando otro sistema la llama",
+  platform: "Cuando llega un mensaje",
   event: (app, event) =>
     event
       ? `Cuando pasa «${event}» en ${app ?? "una app"}`
@@ -114,6 +115,7 @@ export const AUTOMATION_MESSAGES_ES: AutomationMessages = {
       schedule: "horario",
       webhook: "webhook",
       event: app ? `evento de ${app}` : "evento",
+      platform: "un mensaje",
       agent: "se lo pidieron en el chat",
       test: "prueba",
     })[by],
@@ -220,6 +222,12 @@ export const KIT_MESSAGES_ES: KitMessages = {
   pause: "Pausar",
   position: "Posición",
   automation: AUTOMATION_MESSAGES_ES,
+  connect: {
+    authorize: (app) => `Autorizar en ${app}`,
+    connected: "Conectada",
+    failed: "No se ha podido conectar",
+    preparing: "Preparando la conexión",
+  },
 };
 
 export const BROWSER_MESSAGES_ES: BrowserMessages = {

package/src/index.ts

@@ -94,6 +94,7 @@ export type {
   Trigger,
   Use,
 } from "./automation/types";
+export { taskCard } from "./automation/types";
 export { AgentTasks, TASK_MESSAGES, TASKS_POLL_MS, useTasks } from "./AgentTasks";
 export type { AgentTasksProps, TaskMessages, TaskPart } from "./AgentTasks";
 export { AgentCard } from "./AgentCard";
@@ -250,6 +251,7 @@ export type {
   Message,
   Request,
   Step,
+  StepApp,
   StepState,
   StoredFile,
   ToolCall,

package/src/kit/AudioPlayer.tsx

@@ -120,7 +120,7 @@ export function AudioPlayer({ src, label, onError, compact, className }: AudioPl
 }
 
 /** Seconds as a player says them: 0:07, 1:42, 1:02:05. */
-export function clock(seconds: number): string {
+function clock(seconds: number): string {
   const whole = Math.max(0, Math.floor(seconds));
   const hours = Math.floor(whole / 3600);
   const minutes = Math.floor((whole % 3600) / 60);

package/src/kit/Choices.tsx

@@ -42,7 +42,7 @@ export function useRadios(count: number, checked: number, check: (index: number)
 }
 
 /** Few short options with no hints sit side by side in one bar; any other few are cards. */
-export function segmented(options: Option[]): boolean {
+function segmented(options: Option[]): boolean {
   const length = options.reduce((sum, option) => sum + option.label.length, 0);
   return options.length <= 4 && length <= 32 && options.every((option) => !option.hint);
 }

package/src/kit/FileField.tsx

@@ -188,7 +188,7 @@ export interface Uploads {
 let picks = 0;
 
 /** A file already in, by its id: what `useUploads` starts from. */
-export function uploaded(id: string, known: Attachment | undefined): Upload {
+function uploaded(id: string, known: Attachment | undefined): Upload {
   return {
     key: ++picks,
     name: known?.name ?? "",

package/src/kit/Popover.tsx

@@ -55,7 +55,7 @@ export function usePopover(
   return { ...floating, ...interactions };
 }
 
-export type PopoverState = ReturnType<typeof usePopover>;
+type PopoverState = ReturnType<typeof usePopover>;
 
 /**
  * Where the panel goes instead of the page's end: the host's dialog the trigger sits in (a modal

package/src/kit/Tile.tsx

@@ -4,7 +4,7 @@ import { joined, useParts } from "./context";
 
 /**
  * Tiles in a grid that asks its own width, not the window's: two across, one when narrow, three
- * when there is room. What an agent works with, a squad's agents at a glance.
+ * when there is room. What an agent works with, the agents at a glance.
  */
 export function Tiles({
   label,

package/src/kit/messages.ts

@@ -95,6 +95,20 @@ export interface KitMessages {
   position: string;
   /** An automation and its runs: when it runs, how it stands, what each run did. */
   automation: AutomationMessages;
+  /** An app for the person to connect, as its connection stands. */
+  connect: ConnectMessages;
+}
+
+/** The words of an app's card: its button, and what it says where the button isn't. */
+export interface ConnectMessages {
+  /** The button that opens the app's consent page, given the app's name. */
+  authorize: (app: string) => string;
+  /** It works. */
+  connected: string;
+  /** It failed, or the account was lost: the agent asks for it again. */
+  failed: string;
+  /** Before the platform has the consent page. */
+  preparing: string;
 }
 
 const FAMILIES: Readonly<Record<string, string>> = {
@@ -157,4 +171,10 @@ export const KIT_MESSAGES: KitMessages = {
   pause: "Pause",
   position: "Position",
   automation: AUTOMATION_MESSAGES,
+  connect: {
+    authorize: (app) => `Authorize in ${app}`,
+    connected: "Connected",
+    failed: "It couldn't be connected",
+    preparing: "Getting it ready",
+  },
 };

package/src/kit/uploads.ts

@@ -38,14 +38,14 @@ export interface FileHost {
 }
 
 /** A file as picked: its name, its type as the browser gave it ("" when none), its weight. */
-export interface Picked {
+interface Picked {
   name: string;
   type: string;
   size: number;
 }
 
 /** A name's extension, lowercase, without its dot; "" for one without (`README`, `.env`). */
-export function extensionOf(name: string): string {
+function extensionOf(name: string): string {
   const dot = name.lastIndexOf(".");
   return dot <= 0 ? "" : name.slice(dot + 1).toLowerCase();
 }

package/src/kit/waveform.ts

@@ -4,7 +4,7 @@ import { useEffect, useState } from "react";
 const MOST_BYTES = 8 * 1024 * 1024;
 
 /** An audio as drawn: its bars' heights, and how long it is (what an Ogg doesn't say upfront). */
-export interface Waveform {
+interface Waveform {
   heights: number[];
   seconds: number;
 }

package/src/markdown.ts

@@ -8,7 +8,7 @@ export type Inline =
   | { kind: "text" | "strong" | "em" | "code"; text: string }
   | { kind: "link"; text: string; href: string };
 
-export type Node =
+type Node =
   | { kind: "heading"; level: number; inline: Inline[] }
   | { kind: "paragraph"; inline: Inline[] }
   | { kind: "list"; items: Inline[][] };

package/src/marks.tsx

@@ -1,18 +1,10 @@
 import type { ReactNode } from "react";
 
-import type {
-  ActionSource,
-  AutomationKind,
-  ChannelKind,
-  DeviceKind,
-  Icon,
-  Provider,
-} from "./about";
+import type { ActionSource, ChannelKind, DeviceKind, Provider } from "./about";
 
 /**
- * The marks Qué puede draws, each a 16-unit stroke glyph in `currentColor`: the icons a generated
- * line may carry, the shipped actions' marks, the kinds of automation, and the simplest faithful
- * glyph of each app, channel and device. No icon library: a host reads nothing but this package.
+ * The marks Qué puede draws, each a 16-unit stroke glyph in `currentColor`: the shipped actions'
+ * marks and the simplest faithful glyph of each app, channel and device. No icon library: a host reads nothing but this package.
  */
 
 const STROKE = {
@@ -49,36 +41,12 @@ const mail = (
     <path d="m2.5 5.5 5.5 3.7 5.5-3.7" />
   </>
 );
-const calendar = (
-  <>
-    <rect x="2.5" y="3.5" width="11" height="10" rx="1.5" />
-    <path d="M2.5 7h11M5.5 2v3M10.5 2v3" />
-  </>
-);
-const clock = (
-  <>
-    <circle cx="8" cy="8" r="5.75" />
-    <path d="M8 4.75V8l2.2 1.4" />
-  </>
-);
 const search = (
   <>
     <circle cx="7" cy="7" r="4.25" />
     <path d="m10.2 10.2 3.3 3.3" />
   </>
 );
-const file = (
-  <>
-    <path d="M4 2.5h5l3.5 3.5v7.5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-10a1 1 0 0 1 1-1z" />
-    <path d="M9 2.5V6h3.5" />
-  </>
-);
-const table = (
-  <>
-    <rect x="2.5" y="3" width="11" height="10" rx="1.5" />
-    <path d="M2.5 6.5h11M6.5 6.5V13" />
-  </>
-);
 const bell = (
   <>
     <path d="M4 11V7.5a4 4 0 0 1 8 0V11l1 1.5H3z" />
@@ -91,12 +59,6 @@ const hand = (
     <path d="M5.5 8.2 4.4 7a1 1 0 0 0-1.6 1.2L5 11.6a3.6 3.6 0 0 0 3.1 1.9H9a2.5 2.5 0 0 0 2.5-2.5V9.1" />
   </>
 );
-const user = (
-  <>
-    <circle cx="8" cy="5.5" r="2.75" />
-    <path d="M3 13.5a5 5 0 0 1 10 0" />
-  </>
-);
 const globe = (
   <>
     <circle cx="8" cy="8" r="5.75" />
@@ -104,71 +66,6 @@ const globe = (
   </>
 );
 const code = <path d="m5.5 5-3 3 3 3M10.5 5l3 3-3 3M9.3 3.5 6.7 12.5" />;
-const lock = (
-  <>
-    <rect x="3.5" y="7" width="9" height="6.5" rx="1.5" />
-    <path d="M5.5 7V5a2.5 2.5 0 0 1 5 0v2" />
-  </>
-);
-const cart = (
-  <>
-    <path d="M2 3h1.8l1.4 7h7.3l1.3-5H4.4" />
-    <circle cx="6" cy="12.8" r=".9" fill="currentColor" stroke="none" />
-    <circle cx="11.5" cy="12.8" r=".9" fill="currentColor" stroke="none" />
-  </>
-);
-const card = (
-  <>
-    <rect x="2" y="3.5" width="12" height="9" rx="1.5" />
-    <path d="M2 6.5h12M4.5 10h3" />
-  </>
-);
-const map = (
-  <>
-    <path d="m2.5 4.5 3.5-1.5 4 1.5 3.5-1.5v9l-3.5 1.5-4-1.5-3.5 1.5z" />
-    <path d="M6 3v9M10 4.5v9" />
-  </>
-);
-const check = <path d="m3.5 8.5 3 3 6-7" />;
-const warning = (
-  <>
-    <path d="M8 2.5 14 13H2z" />
-    <path d="M8 6.5v3" />
-    <circle cx="8" cy="11.3" r=".8" fill="currentColor" stroke="none" />
-  </>
-);
-const sparkle = (
-  <>
-    <path d="M7 2.5c.4 2.9 1.5 4 4.4 4.4-2.9.4-4 1.5-4.4 4.4-.4-2.9-1.5-4-4.4-4.4C5.5 6.5 6.6 5.4 7 2.5z" />
-    <path d="M12.3 10.5c.2 1 .5 1.3 1.5 1.5-1 .2-1.3.5-1.5 1.5-.2-1-.5-1.3-1.5-1.5 1-.2 1.3-.5 1.5-1.5z" />
-  </>
-);
-
-const ICONS: Readonly<Record<Icon, ReactNode>> = {
-  message,
-  phone,
-  mail,
-  calendar,
-  clock,
-  search,
-  file,
-  table,
-  bell,
-  hand,
-  user,
-  globe,
-  code,
-  lock,
-  cart,
-  card,
-  map,
-  check,
-  warning,
-  sparkle,
-};
-
-/** The mark of a generated line. */
-export const iconOf = (icon: Icon): ReactNode => <Glyph>{ICONS[icon]}</Glyph>;
 
 const pane = (
   <>
@@ -211,23 +108,6 @@ export const actionMark = (name: string, source: ActionSource): ReactNode => (
   <Glyph>{source === "own" ? code : (ACTIONS[name] ?? bolt)}</Glyph>
 );
 
-const hook = (
-  <>
-    <path d="M2.5 8h7M7 5.5 9.5 8 7 10.5" />
-    <path d="M11 3.5h1.5a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H11" />
-  </>
-);
-
-const AUTOMATIONS: Readonly<Record<AutomationKind, ReactNode>> = {
-  schedule: clock,
-  webhook: hook,
-  event: bolt,
-};
-
-export const automationMark = (kind: AutomationKind): ReactNode => (
-  <Glyph>{AUTOMATIONS[kind]}</Glyph>
-);
-
 /** A letter alone: the simplest monogram of an app. */
 function Monogram({ letter }: { letter: string }) {
   return (

package/src/styles.css

@@ -501,6 +501,15 @@
   height: 16px;
 }
 
+/* A connected app's logo, in the same square as a glyph: its own colours, softly cornered. */
+.sc-chat__mark > img {
+  display: block;
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+  object-fit: contain;
+}
+
 .sc-chat__step--waiting .sc-chat__mark {
   color: var(--_accent);
 }
@@ -5148,6 +5157,21 @@ button.sc-attachment__main:focus-visible {
   font-size: var(--_font-size-sm);
 }
 
+/* An app's card, where its button isn't: a quiet word (on its way, failed); once it works, in
+   the ink, after a check. */
+.sc-surface__connect {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin: 0;
+  color: var(--_muted);
+  font-size: var(--_font-size-sm);
+}
+
+.sc-surface__connect--done {
+  color: var(--_fg);
+}
+
 /* An automation that is not there any more: a quiet line in a dashed box where it would be. */
 .sc-automation--gone {
   margin: 0;

package/src/surface/Markdown.tsx

@@ -33,7 +33,7 @@ export function Markdown({ text }: { text: string }) {
 }
 
 /** One line's words, its bold, italic, code and links drawn; a link opens apart, never in place. */
-export function Words({ inline }: { inline: Inline[] }) {
+function Words({ inline }: { inline: Inline[] }) {
   return inline.map((part, index) => {
     switch (part.kind) {
       case "text":

package/src/surface/Surface.tsx

@@ -7,6 +7,7 @@ import type {
   Block,
   ButtonBlock,
   ChoiceBlock,
+  ConnectBlock,
   FieldsBlock,
   ImageBlock,
   ListBlock,
@@ -75,6 +76,7 @@ const BLOCKS: ReadonlySet<string> = new Set([
   "image",
   "automation",
   "file",
+  "connect",
   "button",
   "choice",
   "form",
@@ -90,12 +92,15 @@ export function known(blocks: Block[]): boolean {
 }
 
 /**
- * Whether a screen draws its own edge: one that is a single card (or an automation, a card of
- * its own) needs no panel around it where it is shown.
+ * Whether a screen draws its own edge: one that is a single card (or an automation, or an app
+ * to connect, each a card of its own) needs no panel around it where it is shown.
  */
 export function framesItself(surface: Shown): boolean {
   const [only, ...more] = surface.blocks;
-  return more.length === 0 && (only?.type === "card" || only?.type === "automation");
+  return (
+    more.length === 0 &&
+    (only?.type === "card" || only?.type === "automation" || only?.type === "connect")
+  );
 }
 
 /**
@@ -214,6 +219,8 @@ function Draw({ block }: { block: Block }) {
       return <AutomationShown block={block} />;
     case "file":
       return <FileShown block={block} />;
+    case "connect":
+      return <Connect block={block} />;
     case "button":
       return <Pressable block={block} />;
     case "choice":
@@ -268,7 +275,7 @@ function FileShown({ block }: { block: FileBlock }) {
 type PlayedKind = "image" | "video" | "audio";
 
 /** How a file plays in the page: a picture, a video, a sound; null for any other kind. */
-export function playedAs(mediaType: string): PlayedKind | null {
+function playedAs(mediaType: string): PlayedKind | null {
   const family = mediaType.split("/")[0];
   return family === "image" || family === "video" || family === "audio" ? family : null;
 }
@@ -452,6 +459,48 @@ function AutomationShown({ block }: { block: AutomationBlock }) {
   return <Automation automation={block.view} runs={block.view.runs} />;
 }
 
+/**
+ * An app for the person to connect, as its connection stands: its logo and name over the line
+ * the agent wrote of what it will do with it; while it waits for them, the button that opens
+ * its consent page apart; once it works, or if it failed, a quiet word in its place. Before
+ * the API has asked for it, only the app as the agent named it.
+ */
+function Connect({ block }: { block: ConnectBlock }) {
+  const part = useSurfaceParts();
+  const { messages } = useKit();
+  const { connection } = block;
+  const title = connection?.title ?? block.app;
+  const pending = connection?.status === "pending" ? connection.url : null;
+  const url = pending !== null && https(pending) ? pending : null;
+  const working = connection?.status === "active";
+  const failed = connection !== null && !working && connection.status !== "pending";
+  return (
+    <Card title={title} subtitle={block.purpose} image={connection?.icon ?? undefined}>
+      {url !== null ? (
+        <Button tone="primary" href={url}>
+          {messages.connect.authorize(title)}
+        </Button>
+      ) : (
+        <p
+          className={part(
+            "sc-surface__connect",
+            ...(working ? (["sc-surface__connect--done"] as const) : []),
+          )}
+        >
+          {working && <CheckIcon aria-hidden weight="bold" />}
+          {connectWords(messages.connect, working, failed)}
+        </p>
+      )}
+    </Card>
+  );
+}
+
+/** The quiet word an app's card says where its button isn't: working, failed, or on its way. */
+function connectWords(words: KitMessages["connect"], working: boolean, failed: boolean): string {
+  if (working) return words.connected;
+  return failed ? words.failed : words.preparing;
+}
+
 /**
  * A button that sends its action, marked once it was the one pressed; or a link that opens its
  * page apart (it stays usable on an older turn: it changes nothing here).

package/src/surface/scope.ts

@@ -28,7 +28,9 @@ export type SurfacePart =
   | "sc-surface__form"
   | "sc-surface__submit"
   | "sc-surface__foot"
-  | "sc-surface__sent";
+  | "sc-surface__sent"
+  | "sc-surface__connect"
+  | "sc-surface__connect--done";
 
 export type SurfaceClassNames = Partial<Record<SurfacePart | KitPart, string>> | undefined;
 

package/src/surface/values.ts

@@ -63,7 +63,7 @@ export const FEW_OPTIONS = 5;
 /** Up to this many, a multiselect is chips; more go in a list to search. */
 export const FEW_CHIPS = 8;
 /** What a secret reads as, anywhere it is shown. */
-export const MASK = "••••••••";
+const MASK = "••••••••";
 /** The longest answer label the API takes. */
 const LABEL_MAX = 2000;
 
@@ -139,7 +139,7 @@ export function startValues(fields: FormField[], answered?: Record<string, unkno
 }
 
 /** A field with nothing given: unticked, none picked, a slider at its least, else nothing. */
-export function emptyOf(field: FormField): FieldValue {
+function emptyOf(field: FormField): FieldValue {
   switch (field.kind) {
     case "checkbox":
       return false;
@@ -154,7 +154,7 @@ export function emptyOf(field: FormField): FieldValue {
 }
 
 /** A value read as the field's kind holds it, or null when it does not fit. */
-export function fit(field: FormField, raw: unknown): FieldValue {
+function fit(field: FormField, raw: unknown): FieldValue {
   switch (field.kind) {
     case "checkbox":
       return raw === true || raw === "true"
@@ -310,7 +310,7 @@ export function problemOf(
 }
 
 /** Whether nothing was given: no words, no pick, an unticked box, no stars. */
-export function isEmpty(field: FormField, value: FieldValue): boolean {
+function isEmpty(field: FormField, value: FieldValue): boolean {
   if (value === null) return true;
   if (field.kind === "checkbox") return value !== true;
   if (typeof value === "string") return value.trim() === "";
@@ -352,7 +352,7 @@ function outOfBounds(
   return null;
 }
 
-export function optionOf(field: FormField, id: string): Option | undefined {
+function optionOf(field: FormField, id: string): Option | undefined {
   return field.options?.find((option) => option.id === id);
 }
 

package/src/tint.ts

@@ -4,7 +4,7 @@ export type AgentTint = "sky" | "rose" | "sand";
 const TINTS: readonly AgentTint[] = ["sky", "rose", "sand"];
 
 /**
- * The tint an agent keeps wherever it appears (a squad's map, its profile, its card): picked from
+ * The tint an agent keeps wherever it appears (the agents' day, its profile, its card): picked from
  * its id, so a rename changes nothing, and spread evenly over the three.
  */
 export function agentTint(id: string): AgentTint {

package/src/types.ts

@@ -253,6 +253,14 @@ export interface Step {
   awaits: boolean;
   /** Set while it waits to be allowed: by the person (the turn stopped), or by the business. */
   request: Request | null;
+  /** A connected app's action: the app, its logo an https address; absent for the platform's. */
+  app?: StepApp | null | undefined;
+}
+
+/** The connected app a step's action belongs to: its name and logo. */
+export interface StepApp {
+  name: string;
+  icon: string | null;
 }
 
 /**

package/src/usePolled.ts

@@ -3,14 +3,14 @@ import { useEffect, useRef, useState } from "react";
 import { ApiError } from "./client";
 
 /** What a read gave: the value once it came, why it failed, or that it is no longer there. */
-export interface Polled<T> {
+interface Polled<T> {
   value: T | null;
   problem: unknown;
   gone: boolean;
 }
 
 /** How often something still moving (a run under way) is read again. */
-export const POLL_MS = 3000;
+const POLL_MS = 3000;
 
 /**
  * Reads `load` when `key` changes, and again every `POLL_MS` while `moving` says what it gave is

package/src/voice/webgl.ts

@@ -77,7 +77,7 @@ export function inkOver(color: Rgb, surface: Rgb): Rgb {
 let swatch: CanvasRenderingContext2D | null | undefined;
 
 /** A CSS colour as red, green, blue and alpha, each 0 to 1; null where it can't be read. */
-export function rgbaOf(css: string): readonly [number, number, number, number] | null {
+function rgbaOf(css: string): readonly [number, number, number, number] | null {
   if (swatch === undefined) {
     swatch = document.createElement("canvas").getContext("2d", { willReadFrequently: true });
   }