raft-ui 0.0.1

package/src/legacy/QuotedMessageCard.tsx

@@ -0,0 +1,181 @@
+import type { ReactNode } from "react";
+import { Hash, MessageSquare } from "lucide-react";
+import AvatarSlot from "./AvatarSlot.tsx";
+
+export interface QuotedMessageCardProps {
+  channelName: string;
+  channelKind?: "channel" | "dm";
+  isThread?: boolean;
+  isArchived?: boolean;
+  timestamp: string;
+  author: {
+    name: string;
+    avatar?: string;
+    gravatarHash?: string;
+    kind: "agent" | "user";
+    subtitle?: string;
+  };
+  content: string;
+  attachments?: { label: string }[];
+  onClick?: () => void;
+  unavailable?: boolean;
+}
+
+export function Tag({ children, className }: { children: ReactNode; className: string }) {
+  return (
+    <span
+      className={`inline-flex items-center gap-1 border-[1.5px] border-black px-1.5 py-0.5 text-[11px] font-bold leading-none ${className}`}
+    >
+      {children}
+    </span>
+  );
+}
+
+export function ThreadMarker() {
+  return (
+    <span className="inline-flex items-center gap-1 font-bold text-brutal-pink">
+      <MessageSquare size={10} className="shrink-0" />
+      Thread
+    </span>
+  );
+}
+
+function CompactUserAvatar({ author }: { author: QuotedMessageCardProps["author"] }) {
+  if (author.kind === "agent") {
+    return (
+      <AvatarSlot context="compact-list" type="agent" agentAvatarUrl={author.avatar ?? null} />
+    );
+  }
+
+  return (
+    <AvatarSlot
+      context="compact-list"
+      type="human"
+      humanAvatarUrl={author.avatar ?? null}
+      gravatarHash={author.gravatarHash ?? null}
+    />
+  );
+}
+
+function InlineMarkdownPreview({ markdown }: { markdown: string }) {
+  return <>{markdown}</>;
+}
+
+type PreviewShellProps = {
+  variant?: "default" | "muted";
+  onClick?: () => void;
+  className?: string;
+  "data-testid"?: string;
+  children: ReactNode;
+};
+
+function PreviewShell({
+  variant = "default",
+  onClick,
+  className,
+  children,
+  ...rest
+}: PreviewShellProps) {
+  const Root = onClick ? "button" : "div";
+  const skin =
+    variant === "muted"
+      ? "border-2 border-black/30 bg-black/5 italic text-black/40 hover:shadow-brutal-sm"
+      : "border border-black/15 bg-white hover:border-black/30 hover:bg-black/5";
+
+  return (
+    <Root
+      {...(onClick ? { type: "button" as const, onClick } : {})}
+      {...rest}
+      className={`${skin}${className ? ` ${className}` : ""}`}
+    >
+      {children}
+    </Root>
+  );
+}
+
+export default function QuotedMessageCard({
+  channelName,
+  channelKind = "channel",
+  isThread = false,
+  isArchived = false,
+  timestamp,
+  author,
+  content,
+  attachments,
+  onClick,
+  unavailable = false,
+}: QuotedMessageCardProps) {
+  if (unavailable) {
+    return (
+      <PreviewShell
+        variant="muted"
+        onClick={onClick}
+        data-testid="quoted-message-card"
+        className="group block w-full text-left"
+      >
+        <div className="px-2.5 py-2 sm:px-3 sm:py-2.5">
+          <div className="text-[13px] leading-snug">Message unavailable</div>
+        </div>
+      </PreviewShell>
+    );
+  }
+
+  return (
+    <PreviewShell
+      onClick={onClick}
+      data-testid="quoted-message-card"
+      className="group block w-full text-left"
+    >
+      <div className="px-2.5 py-2 sm:px-3 sm:py-2.5">
+        <div className="mb-1 flex items-start gap-2 sm:mb-1.5">
+          <div className="min-w-0 flex flex-1 flex-wrap items-center gap-x-1.5 gap-y-1 text-xs leading-none">
+            <span className="inline-flex items-center gap-1 font-bold text-black/70">
+              {channelKind === "dm" ? null : <Hash size={11} className="shrink-0" />}
+              {channelKind === "dm" ? `@${channelName}` : channelName}
+            </span>
+            <span className="text-black/30">·</span>
+            <span className="inline-flex min-w-0 items-center gap-1.5">
+              <CompactUserAvatar author={author} />
+              <span className="truncate font-bold text-black/70">{author.name}</span>
+              {author.subtitle ? (
+                <span className="truncate font-mono text-[10px] text-black/40">
+                  {author.subtitle}
+                </span>
+              ) : null}
+            </span>
+            {isThread ? (
+              <>
+                <span className="text-black/30">·</span>
+                <ThreadMarker />
+              </>
+            ) : null}
+            {isArchived ? (
+              <>
+                <span className="text-black/30">·</span>
+                <Tag className="bg-brutal-orange/30 text-black">Archived</Tag>
+              </>
+            ) : null}
+          </div>
+          <span className="shrink-0 font-mono text-[10px] text-black/40">{timestamp}</span>
+        </div>
+        <div className="min-w-0">
+          <div className="line-clamp-2 text-xs leading-snug text-black sm:text-[13px]">
+            <InlineMarkdownPreview markdown={content} />
+          </div>
+          {attachments?.length ? (
+            <div className="mt-2 flex flex-wrap gap-1.5">
+              {attachments.map((attachment) => (
+                <Tag
+                  key={attachment.label}
+                  className="bg-brutal-lavender font-mono text-[10px] font-bold text-black"
+                >
+                  {attachment.label}
+                </Tag>
+              ))}
+            </div>
+          ) : null}
+        </div>
+      </div>
+    </PreviewShell>
+  );
+}

package/src/legacy/ReorderablePanelTabs.tsx

@@ -0,0 +1,151 @@
+import { useCallback, useMemo, type ComponentType, type RefObject } from "react";
+import {
+  closestCenter,
+  DndContext,
+  PointerSensor,
+  TouchSensor,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+} from "@dnd-kit/core";
+import {
+  arrayMove,
+  horizontalListSortingStrategy,
+  SortableContext,
+  useSortable,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+
+export interface PanelTabItem<T extends string> {
+  id: T;
+  label: string;
+  icon: ComponentType<{ size?: number; className?: string }>;
+}
+
+function reconcilePanelTabOrder<T extends string>(
+  tabs: readonly PanelTabItem<T>[],
+  order: readonly string[],
+): PanelTabItem<T>[] {
+  const byId = new Map(tabs.map((tab) => [tab.id, tab]));
+  const next: PanelTabItem<T>[] = [];
+  const seen = new Set<string>();
+
+  for (const id of order) {
+    const tab = byId.get(id as T);
+    if (!tab || seen.has(tab.id)) continue;
+    next.push(tab);
+    seen.add(tab.id);
+  }
+
+  for (const tab of tabs) {
+    if (seen.has(tab.id)) continue;
+    next.push(tab);
+    seen.add(tab.id);
+  }
+
+  return next;
+}
+
+export function useOrderedPanelTabs<T extends string>(
+  tabs: readonly PanelTabItem<T>[],
+  storedOrder: readonly string[],
+) {
+  return useMemo(() => reconcilePanelTabOrder(tabs, storedOrder), [tabs, storedOrder]);
+}
+
+function SortablePanelTab<T extends string>({
+  tab,
+  active,
+  activeRef,
+  onClick,
+}: {
+  tab: PanelTabItem<T>;
+  active: boolean;
+  activeRef?: RefObject<HTMLButtonElement | null>;
+  onClick: () => void;
+}) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: tab.id,
+  });
+  const Icon = tab.icon;
+  const horizontalTransform = transform ? { ...transform, y: 0 } : null;
+  const style = {
+    transform: CSS.Transform.toString(horizontalTransform),
+    transition,
+    zIndex: isDragging ? 20 : undefined,
+  };
+
+  return (
+    <button
+      ref={(node) => {
+        setNodeRef(node);
+        if (activeRef) activeRef.current = node;
+      }}
+      type="button"
+      onClick={onClick}
+      className={`flex shrink-0 touch-manipulation items-center gap-1.5 whitespace-nowrap border-r-2 border-black px-4 py-1.5 text-xs font-bold transition-colors ${
+        active ? "bg-brutal-yellow" : "bg-white hover:bg-black/5"
+      }`}
+      style={style}
+      data-testid={`panel-tab-${tab.id}`}
+      {...attributes}
+      {...listeners}
+    >
+      <Icon size={12} />
+      <span>{tab.label}</span>
+    </button>
+  );
+}
+
+export default function ReorderablePanelTabs<T extends string>({
+  tabs,
+  activeTab,
+  activeTabRef,
+  onSelectTab,
+  onReorderTabs,
+}: {
+  tabs: readonly PanelTabItem<T>[];
+  activeTab: T;
+  activeTabRef?: RefObject<HTMLButtonElement | null>;
+  onSelectTab: (tab: T) => void;
+  onReorderTabs: (tabs: T[]) => void;
+}) {
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 6 } }),
+    useSensor(TouchSensor, { activationConstraint: { delay: 350, tolerance: 8 } }),
+  );
+
+  const tabIds = useMemo(() => tabs.map((tab) => tab.id), [tabs]);
+  const handleDragEnd = useCallback(
+    ({ active, over }: DragEndEvent) => {
+      if (!over || active.id === over.id) return;
+      const activeId = String(active.id) as T;
+      const overId = String(over.id) as T;
+      const oldIndex = tabIds.indexOf(activeId);
+      const newIndex = tabIds.indexOf(overId);
+      if (oldIndex === -1 || newIndex === -1) return;
+      onReorderTabs(arrayMove(tabIds, oldIndex, newIndex));
+    },
+    [onReorderTabs, tabIds],
+  );
+
+  return (
+    <div className="overflow-x-auto border-b-2 border-black bg-white scrollbar-none">
+      <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+        <SortableContext items={tabIds} strategy={horizontalListSortingStrategy}>
+          <div className="flex min-w-max">
+            {tabs.map((tab) => (
+              <SortablePanelTab
+                key={tab.id}
+                tab={tab}
+                active={activeTab === tab.id}
+                activeRef={activeTab === tab.id ? activeTabRef : undefined}
+                onClick={() => onSelectTab(tab.id)}
+              />
+            ))}
+          </div>
+        </SortableContext>
+      </DndContext>
+    </div>
+  );
+}

package/src/legacy/SandboxedPreviewFrame.tsx

@@ -0,0 +1,59 @@
+import type { CSSProperties } from "react";
+
+/**
+ * Shared isolation primitive for previewing attacker-controlled content
+ * (anyone — human or agent — can upload a hostile attachment, or author a
+ * markdown ```mermaid block).
+ *
+ * The iframe is the real security boundary: with no `allow-same-origin` in
+ * `sandbox`, the framed content runs in an opaque origin and cannot touch
+ * Raft's DOM / cookies / localStorage. This is strictly stronger than
+ * sanitizing a string and hoping the sanitizer has no gaps.
+ *
+ * Two callsites share this one implementation so the isolation config can't
+ * drift between them:
+ *  - HTML attachment preview: `src` (scoped backend URL) + `sandbox="allow-scripts"`
+ *    (interactive HTML/diagrams need scripts; still no same-origin).
+ *  - Mermaid diagram: `srcDoc` (front-end-generated SVG doc) + empty `sandbox`
+ *    (static SVG needs zero scripts — the most locked-down setting).
+ *
+ * @Bugen security review 2026-05-18 #proj-uiux:df4d393b.
+ */
+export interface SandboxedPreviewFrameProps {
+  /** External (scoped) URL to frame. Mutually exclusive with `srcDoc`. */
+  src?: string;
+  /** Inline document to frame. Mutually exclusive with `src`. */
+  srcDoc?: string;
+  /**
+   * iframe `sandbox` token list. Default `""` = maximally locked (no scripts,
+   * no same-origin). Never pass `allow-same-origin` for untrusted content —
+   * it dissolves the origin boundary.
+   */
+  sandbox?: string;
+  title: string;
+  className?: string;
+  style?: CSSProperties;
+  referrerPolicy?: React.HTMLAttributeReferrerPolicy;
+}
+
+export default function SandboxedPreviewFrame({
+  src,
+  srcDoc,
+  sandbox = "",
+  title,
+  className,
+  style,
+  referrerPolicy = "no-referrer",
+}: SandboxedPreviewFrameProps) {
+  return (
+    <iframe
+      title={title}
+      src={src}
+      srcDoc={srcDoc}
+      sandbox={sandbox}
+      referrerPolicy={referrerPolicy}
+      className={className}
+      style={style}
+    />
+  );
+}

package/src/legacy/SearchInput.tsx

@@ -0,0 +1,23 @@
+import type { InputHTMLAttributes } from "react";
+import { Search } from "lucide-react";
+
+type SearchInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "className"> & {
+  className?: string;
+  inputClassName?: string;
+};
+
+export default function SearchInput({
+  className = "",
+  inputClassName = "",
+  ...props
+}: SearchInputProps) {
+  return (
+    <div className={`input-brutal flex w-full items-center gap-2 ${className}`.trim()}>
+      <Search size={15} className="shrink-0 text-black/50" />
+      <input
+        {...props}
+        className={`min-w-0 flex-1 bg-transparent font-heading outline-none ${inputClassName}`.trim()}
+      />
+    </div>
+  );
+}

package/src/legacy/SectionEyebrow.tsx

@@ -0,0 +1,60 @@
+/**
+ * Canonical section-eyebrow label — replaces the inline
+ * `text-xs font-bold uppercase text-black/60 tracking-widest` pattern
+ * that appears 40+ times across panels, dialogs, and list headers.
+ *
+ * stdrc 2026-05-11 #wg-theme:93c5897c assigned this to @Wug as the
+ * next Tier 1 component after PanelHeader / AvatarSlot / AvatarListRow /
+ * Banner. Per @Duoyu audit msg=cc6f5542 the eyebrow class string was the
+ * single biggest repeated typographic pattern in the codebase.
+ *
+ * The component renders the locked typographic token and accepts:
+ * - `as` — element type (`"span"` | `"div"` | `"label"`, default `"span"`)
+ * - `className` — callsite-specific additions (margin, padding, bg, color)
+ * - `htmlFor` — forwarded when `as="label"`
+ * - `children` — label text
+ *
+ * Do NOT inline new section eyebrows — use this primitive instead.
+ *
+ * Default color is `text-black/60`. To get a fully-black eyebrow
+ * (e.g. Sidebar section toggle, MachineDetailPanel running label),
+ * pass `className="!text-black"` to override.
+ */
+
+import type { LabelHTMLAttributes, ReactNode } from "react";
+
+const BASE_CLASS = "text-xs font-bold uppercase text-black/60 tracking-widest";
+
+export type SectionEyebrowProps = {
+  /** HTML element to render. Default `"span"`. Use `"div"` for block-level
+   *  eyebrows (e.g. with `mb-3`), `"label"` for form field labels. */
+  as?: "span" | "div" | "label";
+  /** Additional classes — appended to the base token. Useful for margin
+   *  (`mb-3`), padding (`px-3 py-1.5`), background (`bg-white/50`), or
+   *  color overrides (`!text-black`). */
+  className?: string;
+  /** Eyebrow text / nodes. */
+  children?: ReactNode;
+  /** When `as="label"`, forward to the `<label htmlFor>` attribute. */
+  htmlFor?: LabelHTMLAttributes<HTMLLabelElement>["htmlFor"];
+};
+
+export default function SectionEyebrow({
+  as: Tag = "span",
+  className = "",
+  children,
+  htmlFor,
+}: SectionEyebrowProps) {
+  const cls = `${BASE_CLASS} ${className}`.trim();
+  if (Tag === "label") {
+    return (
+      <label className={cls} htmlFor={htmlFor}>
+        {children}
+      </label>
+    );
+  }
+  if (Tag === "div") {
+    return <div className={cls}>{children}</div>;
+  }
+  return <span className={cls}>{children}</span>;
+}

package/src/legacy/SectionHeader.tsx

@@ -0,0 +1,68 @@
+/**
+ * Canonical section header — eyebrow label + optional count badge + optional
+ * trailing action button.
+ *
+ * Generalizes the inline `flex items-center justify-between` + `SectionEyebrow`
+ * + counter + action button pattern that appears 15+ times across detail
+ * panels, settings, channel members, agent reminders, etc.
+ *
+ * Background: stdrc 2026-05-12 #wg-theme:a987f888 asked for strong-signal
+ * primitives to be lifted in one PR. SectionHeader is the third of the three.
+ * It composes the existing `SectionEyebrow` primitive (so the eyebrow token
+ * stays canonical) rather than duplicating its class string.
+ *
+ * Slots:
+ * - `label`     — the eyebrow text
+ * - `icon`      — optional leading icon node (e.g. `<Bell size={16} />`),
+ *                 rendered in `text-black/60` next to the eyebrow
+ * - `count`     — optional integer badge rendered after the label in
+ *                 `text-black/40 font-mono` (rendered only when defined and
+ *                 ≥ 0; pass `undefined` / `null` to hide)
+ * - `action`    — optional right-aligned action node (e.g. `<button>` to add)
+ * - `htmlFor`   — when set, the eyebrow becomes a `<label htmlFor>` for the
+ *                 region's main control
+ * - `className` — additional classes on the outer wrapper (e.g. `mb-2`,
+ *                 `border-b-2 border-black pb-2`)
+ *
+ * Typography is locked via `SectionEyebrow`; do NOT pass eyebrow class
+ * overrides here — if a section needs a different style, it shouldn't be a
+ * SectionHeader.
+ */
+
+import type { ReactNode } from "react";
+import SectionEyebrow from "./SectionEyebrow.tsx";
+
+export type SectionHeaderProps = {
+  label: ReactNode;
+  icon?: ReactNode;
+  count?: number | null;
+  action?: ReactNode;
+  htmlFor?: string;
+  className?: string;
+};
+
+export default function SectionHeader({
+  label,
+  icon,
+  count,
+  action,
+  htmlFor,
+  className,
+}: SectionHeaderProps) {
+  const wrapperCls = `flex items-center justify-between gap-2${className ? ` ${className}` : ""}`;
+  const eyebrowAs: "label" | "div" = htmlFor ? "label" : "div";
+  return (
+    <div className={wrapperCls}>
+      <div className="flex min-w-0 items-center gap-2">
+        {icon ? <span className="shrink-0 text-black/60">{icon}</span> : null}
+        <SectionEyebrow as={eyebrowAs} htmlFor={htmlFor}>
+          {label}
+          {typeof count === "number" && count >= 0 ? (
+            <span className="ml-2 font-mono text-black/40">{count}</span>
+          ) : null}
+        </SectionEyebrow>
+      </div>
+      {action ? <div className="shrink-0">{action}</div> : null}
+    </div>
+  );
+}

package/src/legacy/SegmentedControl.tsx

@@ -0,0 +1,74 @@
+import type { ReactNode } from "react";
+
+export interface SegmentedControlOption<T extends string> {
+  value: T;
+  label: ReactNode;
+  count?: number;
+  icon?: ReactNode;
+  testId?: string;
+}
+
+export interface SegmentedControlProps<T extends string> {
+  value: T;
+  options: SegmentedControlOption<T>[];
+  onChange: (value: T) => void;
+  ariaLabel?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+export default function SegmentedControl<T extends string>({
+  value,
+  options,
+  onChange,
+  ariaLabel,
+  disabled = false,
+  className = "",
+}: SegmentedControlProps<T>) {
+  return (
+    <div
+      role="radiogroup"
+      aria-label={ariaLabel}
+      aria-disabled={disabled || undefined}
+      className={`inline-flex max-w-full flex-wrap items-center gap-1 ${
+        disabled ? "opacity-50" : ""
+      } ${className}`}
+    >
+      {options.map((option) => {
+        const active = option.value === value;
+        return (
+          <button
+            key={option.value}
+            type="button"
+            role="radio"
+            aria-checked={active}
+            data-testid={option.testId}
+            disabled={disabled}
+            onClick={() => onChange(option.value)}
+            className={`flex h-7 min-w-0 shrink-0 items-center gap-1 border-2 border-black px-2 text-xs font-bold transition-colors ${
+              disabled ? "cursor-not-allowed" : ""
+            } ${
+              active
+                ? "bg-brutal-yellow text-black shadow-brutal-sm"
+                : disabled
+                  ? "bg-white text-black"
+                  : "bg-white text-black hover:bg-brutal-yellow/30"
+            }`}
+          >
+            {option.icon}
+            <span className="truncate">{option.label}</span>
+            {typeof option.count === "number" && option.count > 0 ? (
+              <span
+                className={`font-mono text-[10px] leading-none ${
+                  active ? "text-black/60" : "text-black/40"
+                }`}
+              >
+                {option.count}
+              </span>
+            ) : null}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/src/legacy/SlugInput.tsx

@@ -0,0 +1,29 @@
+import type { InputHTMLAttributes } from "react";
+
+type SlugInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "className"> & {
+  className?: string;
+  inputClassName?: string;
+};
+
+export default function SlugInput({
+  className = "",
+  inputClassName = "",
+  ...props
+}: SlugInputProps) {
+  return (
+    <div
+      className={`input-brutal flex w-full items-stretch overflow-hidden px-0 py-0 focus-within:shadow-brutal ${className}`.trim()}
+    >
+      <span
+        aria-hidden="true"
+        className="flex shrink-0 items-center border-r-2 border-black bg-brutal-yellow/30 px-3 font-heading font-bold text-black/70"
+      >
+        /
+      </span>
+      <input
+        {...props}
+        className={`min-w-0 flex-1 bg-transparent px-3 py-2 font-heading outline-none ${inputClassName}`.trim()}
+      />
+    </div>
+  );
+}