rift-ds 1.0.0

package/components/AgentRail/AgentRail.css

@@ -0,0 +1,282 @@
+/* ============================================
+   AGENT RAIL COMPONENT
+   The companion rail of an agent product: the agent's portrait at the
+   top, and the record of what it has been doing below, split across
+   tabs. Deliberately surface-less — the host paints the band it sits
+   on, the way ThreadPanel's spec describes for the opposite edge.
+
+   One scroll region only: the active pane. The header and the tab strip
+   stay put, so switching tabs never moves the agent's face.
+   ============================================ */
+
+.ds-agent-rail {
+  /* Width and padding combine on the root, so the component declares its
+     own sizing model rather than leaning on a host reset — ThreadPanel's
+     reasoning, and the same failure without it. */
+  box-sizing: border-box;
+  /* The positioning frame for the collapse affordance, which floats over the
+     header rather than sitting in it: the header is a centred identity
+     block, and a control in that column would push the portrait off axis. */
+  position: relative;
+  /* CircularButton's default footprint, named because two rules need it:
+     the control itself, and the row the rail reserves for it when there is
+     no header underneath it to float over. */
+  --ds-agent-rail-control: 40px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-300);
+  /* Set by the widest thing in it, which is the tab strip, not the rows:
+     four labelled tabs measure a little over 310px, and a rail that clips
+     its own navigation is not a rail. The sibling history needs 280
+     because a thread row is one line; here a row carries a title, a second
+     line and a time as well. A host that wants another width overrides it. */
+  width: 360px;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  padding: var(--padding-400) var(--padding-300);
+}
+
+/* ============================================
+   COLLAPSE — the way out, pinned to the LEADING corner. The trailing one
+   belongs to the host: a rail seated at a card's edge puts the card's own
+   controls above it, and the collapse would sit under them. A chevron,
+   never a cross, for the same reason: two crosses a few pixels apart read
+   as two ways to dismiss the same thing.
+   ============================================ */
+
+.ds-agent-rail__collapse {
+  position: absolute;
+  /* CircularButton's default footprint and glyph, so the control sits in
+     the same row of controls the host puts along the card's top edge —
+     `--ds-agent-rail-collapse-top` is the seat, which a host overrides to
+     line the chevron up with its own header row. */
+  top: var(--ds-agent-rail-collapse-top, var(--padding-300));
+  left: var(--padding-300);
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--ds-agent-rail-control);
+  height: var(--ds-agent-rail-control);
+  padding: 0;
+  border: none;
+  border-radius: var(--radius-pill);
+  /* A tertiary CircularButton's exact resting treatment, because that is
+     what it sits in a row with: the host's own controls line up opposite it
+     on the same baseline, and a dimmer icon tier beside them would read as a
+     lesser control rather than the same kind of one. */
+  background-color: var(--color-action-passive-bg);
+  color: var(--color-icon-primary);
+  cursor: pointer;
+  transition: background-color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-agent-rail__collapse .material-symbols-rounded {
+  --icon-size: var(--icon-size-600);
+}
+
+.ds-agent-rail__collapse:hover {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-agent-rail__collapse:active {
+  background-color: var(--color-action-passive-bg-active);
+}
+
+.ds-agent-rail__collapse:focus-visible {
+  outline: var(--border-050) solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}
+
+/* ============================================
+   HEADER — the agent's portrait, name, and state
+   ============================================ */
+
+.ds-agent-rail__header {
+  display: flex;
+  flex: none;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--gap-100);
+  padding: var(--padding-300) var(--padding-200) var(--padding-100);
+  text-align: center;
+}
+
+.ds-agent-rail__portrait {
+  position: relative;
+  display: inline-flex;
+}
+
+/* The stand-in portrait, on Avatar's own `lg` footprint and fill so a rail
+   with a picture and one without sit at exactly the same size. */
+.ds-agent-rail__mark {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 56px;
+  height: 56px;
+  border-radius: var(--radius-pill);
+  background-color: var(--color-bg-container-secondary);
+  color: var(--color-icon-secondary);
+}
+
+.ds-agent-rail__mark .material-symbols-rounded {
+  --icon-size: var(--icon-size-800);
+}
+
+/* The edit affordance overlaps the portrait's lower-right corner, which
+   is where an avatar's own status dot would sit — the two are alternates,
+   never a stack, so the pencil takes the seat outright. It carries the
+   container fill rather than the rail's (which is the host's, and may be
+   anything) so the circle reads as lifted off the face beneath it. */
+.ds-agent-rail__edit {
+  position: absolute;
+  /* Seated ON the portrait's lower-right edge, not inside it: a 24px badge
+     dropped flush into a 56px corner lands on the face it is meant to
+     annotate. The offset puts the circle's centre roughly on the portrait's
+     45-degree point, so it straddles the edge the way a badge should and the
+     glyph underneath stays whole. */
+  right: -6px;
+  bottom: -6px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: var(--border-025) solid var(--color-bg-container-border);
+  border-radius: var(--radius-pill);
+  background-color: var(--color-bg-container-primary);
+  color: var(--color-icon-primary);
+  cursor: pointer;
+  transition: background-color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-agent-rail__edit .material-symbols-rounded {
+  --icon-size: var(--icon-size-500);
+}
+
+.ds-agent-rail__edit:hover {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-agent-rail__edit:focus-visible {
+  outline: var(--border-050) solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}
+
+.ds-agent-rail__name {
+  margin: 0;
+  font-family: var(--font-title-body-family);
+  font-size: var(--font-title-body-size);
+  font-weight: var(--font-title-body-weight);
+  line-height: var(--font-title-body-line-height);
+  letter-spacing: var(--font-title-body-letter-spacing);
+  color: var(--color-text-primary);
+}
+
+.ds-agent-rail__status {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-100);
+  margin: 0;
+  font-family: var(--font-caption-family);
+  font-size: var(--font-caption-size);
+  font-weight: var(--font-caption-weight);
+  line-height: var(--font-caption-line-height);
+  letter-spacing: var(--font-caption-letter-spacing);
+  color: var(--color-text-secondary);
+}
+
+/* ThreadPanel's unread dot, restated at the same size: the gap scale,
+   because no icon token is that small. */
+.ds-agent-rail__status-dot {
+  width: var(--gap-200);
+  height: var(--gap-200);
+  border-radius: var(--radius-pill);
+  background-color: var(--color-status-positive-icon);
+}
+
+.ds-agent-rail__status[data-tone='info'] .ds-agent-rail__status-dot {
+  background-color: var(--color-status-info-icon);
+}
+
+.ds-agent-rail__status[data-tone='warning'] .ds-agent-rail__status-dot {
+  background-color: var(--color-status-warning-icon);
+}
+
+.ds-agent-rail__status[data-tone='error'] .ds-agent-rail__status-dot {
+  background-color: var(--color-status-error-icon);
+}
+
+.ds-agent-rail__status[data-tone='neutral'] .ds-agent-rail__status-dot {
+  background-color: var(--color-status-neutral-icon);
+}
+
+/* ============================================
+   TABS — the strip that switches panes
+   ============================================ */
+
+/* With no identity block above it the strip would sit under the floating
+   collapse control, so the rail reserves the control's own row instead. The
+   header absorbs it whenever there is one. */
+.ds-agent-rail:has(.ds-agent-rail__collapse):not(:has(.ds-agent-rail__header))
+  .ds-agent-rail__tabs {
+  margin-top: var(--ds-agent-rail-control);
+}
+
+.ds-agent-rail__tabs {
+  display: flex;
+  flex: none;
+  justify-content: center;
+  min-width: 0;
+  /* The strip is content-sized and centred, so it reads as one control
+     rather than a stretched band. A host whose labels outrun the rail
+     gets a silent sideways scroll instead of a clipped last tab — every
+     tab stays reachable, which a cut-off one is not. */
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.ds-agent-rail__tabs::-webkit-scrollbar {
+  display: none;
+}
+
+/* ============================================
+   PANE — the one scrolling region
+   ============================================ */
+
+.ds-agent-rail__pane {
+  flex: 1;
+  min-height: 0;
+  /* The pane is the rail's only scroller and may hold nothing focusable,
+     so it takes a tabindex — which means it also takes a focus ring. */
+  overflow-y: auto;
+  /* ThreadPanel's tucked-away thin scrollbar: no track fill, the thumb
+     only showing under the pointer, so a resting rail reads as one
+     surface rather than a framed box. */
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+  transition: scrollbar-color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-agent-rail__pane:hover {
+  scrollbar-color: var(--color-divider) transparent;
+}
+
+.ds-agent-rail__pane:focus-visible {
+  outline: var(--border-050) solid var(--color-action-primary-bg);
+  outline-offset: calc(-1 * var(--border-050));
+  border-radius: var(--radius-300);
+}
+
+/* ============================================
+   FOOTER — host furniture below the scroll
+   ============================================ */
+
+.ds-agent-rail__footer {
+  flex: none;
+  padding-top: var(--padding-200);
+  border-top: var(--border-025) solid var(--color-divider);
+}

package/components/AgentRail/AgentRail.d.ts

@@ -0,0 +1,72 @@
+import { default as React } from 'react';
+export interface AgentRailTab {
+    /** Stable identifier: `activeTab` matches against it and `onTabChange` reports it. */
+    id: string;
+    /** The tab's label, shown beside its icon and used as the pane's accessible name. */
+    label: string;
+    /** Leading icon on the tab — Material Symbol name (string) or custom element (ReactNode). Give every tab one and a squeezed rail can fall back to icons alone; give none and it keeps the labels. */
+    icon?: string | React.ReactNode;
+    /** The pane rendered while this tab is active. */
+    content?: React.ReactNode;
+    /** Whether the tab is selectable. */
+    disabled?: boolean;
+}
+export interface AgentRailProfile {
+    /** The agent's display name, shown under the portrait; also seeds the Avatar's initials. */
+    name: string;
+    /** The portrait's image src, handed to an `lg` Avatar. Without one the rail draws its own agent mark instead, since initials would claim a person. Ignored when `avatar` is given. */
+    avatarSrc?: string;
+    /** Replaces the default portrait with a custom element — a hero portrait, an illustrated mark. */
+    avatar?: React.ReactNode;
+    /** A short line under the name, e.g. "Connected". Renders with a leading status dot. */
+    status?: React.ReactNode;
+    /** Which status role the dot under the name takes. */
+    statusTone?: 'positive' | 'info' | 'warning' | 'error' | 'neutral';
+    /** Fires when the portrait's edit affordance is pressed. The pencil renders only when this is given. */
+    onEdit?: () => void;
+    /** Accessible name for the portrait's edit affordance. */
+    editLabel?: string;
+}
+/** Props owned by AgentRail itself — everything else falls through to the root `<div>`. */
+type AgentRailOwnProps = {
+    /** The agent this rail belongs to, rendered as the header's portrait block. */
+    profile?: AgentRailProfile;
+    /** The rail's tabs, in display order. Each carries its own pane. */
+    tabs: AgentRailTab[];
+    /** Id of the tab on stage. The rail is controlled, so the host owns the state. */
+    activeTab: string;
+    /** Fires with the chosen tab's id. */
+    onTabChange?: (id: string) => void;
+    /** Accessible name for the tab strip. */
+    tabsLabel?: string;
+    /** Accessible name for the rail itself. */
+    ariaLabel?: string;
+    /** Fires when the rail's collapse affordance is pressed. The button renders
+        only when this is given, pinned to the rail's top trailing corner. It is
+        a chevron rather than a cross on purpose: the host's own close control
+        is usually a cross a few pixels away, and two of them side by side read
+        as two ways to dismiss the same thing. */
+    onCollapse?: () => void;
+    /** Accessible name for the collapse affordance. */
+    collapseLabel?: string;
+    /** Rendered under the pane, outside its scroll — a sign-out row, a quiet hint. */
+    footer?: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface AgentRailProps extends AgentRailOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof AgentRailOwnProps> {
+}
+/**
+ * AgentRail is the companion rail of an agent product: who the agent is at
+ * the top, and the record of what it has been doing below, split across
+ * tabs — activity, approvals waiting on a human, standing automations, the
+ * agent's own personalization.
+ *
+ * Surface-less like its sibling ThreadPanel: it fills the band the host
+ * paints and scrolls exactly one region, the active pane. Fully controlled
+ * and hook-free, so a rail whose tabs are links renders from a Server
+ * Component; every affordance takes a callback, which makes the interactive
+ * form a client host's by nature.
+ */
+export declare const AgentRail: React.ForwardRefExoticComponent<AgentRailProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/AgentRail/AgentRail.js

@@ -0,0 +1,101 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+import { Avatar } from "../Avatar/Avatar.js";
+import { SegmentedControl } from "../SegmentedControl/SegmentedControl.js";
+import "./AgentRail.css";
+import "../../fonts/material-symbols.css";
+const baseClass = "ds-agent-rail";
+const AgentRail = React.forwardRef(
+  ({
+    profile,
+    tabs,
+    activeTab,
+    onTabChange,
+    tabsLabel = "Agent views",
+    ariaLabel,
+    onCollapse,
+    collapseLabel = "Collapse the agent panel",
+    footer,
+    className = "",
+    ...rest
+  }, ref) => {
+    const classes = [baseClass, className].filter(Boolean).join(" ");
+    const active = tabs.find((tab) => tab.id === activeTab) ?? tabs[0];
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, "aria-label": ariaLabel, children: [
+      onCollapse && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: `${baseClass}__collapse`,
+          "aria-label": collapseLabel,
+          onClick: onCollapse,
+          children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: "chevron_right" })
+        }
+      ),
+      profile && /* @__PURE__ */ jsxs("header", { className: `${baseClass}__header`, children: [
+        /* @__PURE__ */ jsxs("div", { className: `${baseClass}__portrait`, children: [
+          profile.avatar ?? (profile.avatarSrc ? /* @__PURE__ */ jsx(Avatar, { size: "lg", name: profile.name, src: profile.avatarSrc }) : (
+            /* No portrait means an agent with no face yet, and the
+               placeholder says agent: initials would claim a person,
+               which is the one thing the subject here is not. */
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__mark`, "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", children: "smart_toy" }) })
+          )),
+          profile.onEdit && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: `${baseClass}__edit`,
+              "aria-label": profile.editLabel ?? `Edit ${profile.name}`,
+              onClick: profile.onEdit,
+              children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: "edit" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: `${baseClass}__name`, children: profile.name }),
+        profile.status && /* @__PURE__ */ jsxs(
+          "p",
+          {
+            className: `${baseClass}__status`,
+            "data-tone": profile.statusTone ?? "positive",
+            children: [
+              /* @__PURE__ */ jsx("span", { className: `${baseClass}__status-dot`, "aria-hidden": "true" }),
+              profile.status
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: `${baseClass}__tabs`, children: /* @__PURE__ */ jsx(
+        SegmentedControl,
+        {
+          size: "compact",
+          variant: "neutral",
+          collapse: true,
+          ariaLabel: tabsLabel,
+          activeSegment: active?.id ?? "",
+          onSegmentChange: onTabChange,
+          segments: tabs.map((tab) => ({
+            value: tab.id,
+            label: tab.label,
+            icon: tab.icon,
+            disabled: tab.disabled
+          }))
+        }
+      ) }),
+      active && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `${baseClass}__pane`,
+          role: "tabpanel",
+          "aria-label": active.label,
+          tabIndex: 0,
+          children: active.content
+        }
+      ),
+      footer && /* @__PURE__ */ jsx("div", { className: `${baseClass}__footer`, children: footer })
+    ] });
+  }
+);
+AgentRail.displayName = "AgentRail";
+export {
+  AgentRail
+};