@crievo/omni 0.1.2 → 0.1.4

package/studio/web/components/icons.tsx

@@ -96,6 +96,19 @@ import {
   CarouselHorizontalIcon,
   ArrowLeft02Icon,
   ArrowRight02Icon,
+  Folder01Icon,
+  Home01Icon,
+  Search01Icon,
+  UserIcon,
+  File01Icon,
+  Grid2x2Icon,
+  CheckmarkCircle02Icon,
+  CancelCircleIcon,
+  Alert02Icon,
+  PreviousIcon,
+  NextIcon,
+  Settings02Icon,
+  GitCommitHorizontalIcon,
 } from "@hugeicons/core-free-icons";
 
 type Props = Omit<SVGProps<SVGSVGElement>, "ref" | "strokeWidth" | "size"> & {
@@ -225,6 +238,20 @@ export const TrendUp = icon(ChartIncreaseIcon, "TrendUp");
 export const TrendDown = icon(ChartDecreaseIcon, "TrendDown");
 export const Columns = icon(ColumnInsertIcon, "Columns");
 
+export const Folder = icon(Folder01Icon, "Folder");
+export const House = icon(Home01Icon, "House");
+export const MagnifyingGlass = icon(Search01Icon, "MagnifyingGlass");
+export const User = icon(UserIcon, "User");
+export const FileText = icon(File01Icon, "FileText");
+export const GridFour = icon(Grid2x2Icon, "GridFour");
+export const CheckCircle = icon(CheckmarkCircle02Icon, "CheckCircle");
+export const XCircle = icon(CancelCircleIcon, "XCircle");
+export const Warning = icon(Alert02Icon, "Warning");
+export const SkipBack = icon(PreviousIcon, "SkipBack");
+export const SkipForward = icon(NextIcon, "SkipForward");
+export const Gear2 = icon(Settings02Icon, "Gear2");
+export const GitCommit = icon(GitCommitHorizontalIcon, "GitCommit");
+
 /* the state of a queue run (ok, error, interrupted, waiting) */
 export const STATE_ICON: Record<string, ReactNode> = {
   ok: <Check weight="bold" />,

package/studio/web/components/ui/slider.tsx

@@ -4,12 +4,15 @@
    The look comes from CSS (.tdc-slider in styles/components/ui/slider.css), keyed on `data-variant`:
    - `line`: the thin rule;
    - `fill`: the tall track where the fill is the value and the text (`label`) lives inside.
-     It is channels' shape and that of every volume, gain and position control here.
+     It is channels' shape and that of every volume, gain and position control here. It is drawn by the Bencho
+     SloshSlider (liquid fill, rigid handle) behind the same props; the Radix root only renders the `line` variant.
    `markValue` draws a dashed line at a reference value (0 dB, 100 %), and
    `snapToMark` snaps the drag to it when close. */
 
 import { forwardRef, type ComponentPropsWithoutRef, type ElementRef, type ReactNode } from "react";
 import * as SliderPrimitive from "@radix-ui/react-slider";
+import { BenchoScope } from "../bencho/BenchoScope";
+import { SloshSlider } from "../bencho/SloshSlider";
 
 type SliderVariant = "line" | "fill";
 
@@ -25,6 +28,36 @@ interface SliderProps extends ComponentPropsWithoutRef<typeof SliderPrimitive.Ro
 
 export const Slider = forwardRef<ElementRef<typeof SliderPrimitive.Root>, SliderProps>(
   ({ className, variant = "line", label, markValue, snapToMark, min = 0, max = 100, onValueChange, ...props }, ref) => {
+    if (variant === "fill") {
+      /* One handle: every caller passes a one-entry array. The Radix props the liquid has no use for (orientation,
+         dir, inverted, minStepsBetweenThumbs, asChild) and the ref were never set on a fill slider. */
+      return (
+        <BenchoScope>
+          <SloshSlider
+            fluid
+            className={className ? `tdc-slider ${className}` : "tdc-slider"}
+            data-slot="slider"
+            data-variant="fill"
+            id={props.id}
+            value={props.value}
+            defaultValue={props.defaultValue}
+            min={min}
+            max={max}
+            step={props.step ?? 1}
+            disabled={props.disabled}
+            label={label}
+            markValue={markValue}
+            snapToMark={snapToMark}
+            onValueChange={onValueChange}
+            onValueCommit={props.onValueCommit}
+            ariaLabel={props["aria-label"] ?? ""}
+            ariaLabelledBy={props["aria-labelledby"]}
+            ariaDescribedBy={props["aria-describedby"]}
+          />
+        </BenchoScope>
+      );
+    }
+
     const markPercent = markValue !== undefined ? ((markValue - min) / (max - min)) * 100 : null;
 
     const handleValueChange = (values: number[]) => {

package/studio/web/components/ui/switch.tsx

@@ -1,13 +1,26 @@
 import { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from "react";
-import * as SwitchPrimitive from "@radix-ui/react-switch";
+import type * as SwitchPrimitive from "@radix-ui/react-switch";
+import { BenchoScope } from "../bencho/BenchoScope";
+import { LiquidSwitch } from "../bencho/LiquidToggle";
 import { cx } from "./cx";
 
+/* The footprint the studio's rows were laid out for: 20px tall, which is 20/46 of the liquid toggle's own 92x46. */
+const SCALE = 20 / 46;
+
+/* Same props as the Radix switch it replaced (callers did not change); only what it draws is Bencho's liquid toggle. */
 export const Switch = forwardRef<
   ElementRef<typeof SwitchPrimitive.Root>,
   ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <SwitchPrimitive.Root ref={ref} data-slot="switch" className={cx("ui-switch", className)} {...props}>
-    <SwitchPrimitive.Thumb className="ui-switch-thumb" />
-  </SwitchPrimitive.Root>
+>(({ className, asChild: _asChild, children: _children, value, ...props }, ref) => (
+  <BenchoScope>
+    <LiquidSwitch
+      ref={ref}
+      data-slot="switch"
+      className={cx("ui-switch", className)}
+      scale={SCALE}
+      value={value === undefined ? undefined : String(value)}
+      {...props}
+    />
+  </BenchoScope>
 ));
 Switch.displayName = "Switch";

package/studio/web/hooks/useOnboarding.ts

@@ -1,15 +1,27 @@
-/* Getting started (/api/onboarding): the docs/onboarding.md guide in steps, each with the
-   tools/setup.mjs check. `reload(true)` asks for a fresh check (?fresh=1). */
+/* Getting started (/api/onboarding): the docs/onboarding.md guide in steps, each with its state, and
+   this computer (what the CLI is still downloading, the skills' permission). While the computer isn't
+   ready the page asks again every 5 s, so "preparando…" turns into "Computador pronto" on its own.
+   `reload(true)` asks for a fresh check (?fresh=1). */
 
 import { useCallback, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
 import { api, errorText, read } from "../lib/api";
 import { queryClient, queryKeys } from "../lib/query-client";
 import type { Onboarding } from "../types/api";
-import { useLiveQuery } from "./useLiveQuery";
+
+const POLL_MS = 5_000;
+
+/** the computer still has something to answer for (a program downloading, the skills' rules) */
+export const computerPending = (o: Onboarding | null | undefined) =>
+  !!o?.computer && (!o.computer.ready || (!o.computer.dev && o.computer.missing_rules.length > 0));
 
 export function useOnboarding() {
-  const { data, error, isFetching } = useLiveQuery(queryKeys.onboarding, () => api.onboarding.$get({ query: {} }));
-  const onboarding: Onboarding | null = data;
+  const q = useQuery({
+    queryKey: queryKeys.onboarding,
+    queryFn: (): Promise<Onboarding> => read(api.onboarding.$get({ query: {} })),
+    refetchInterval: query => (computerPending(query.state.data) ? POLL_MS : false),
+  });
+  const onboarding: Onboarding | null = q.data ?? null;
   const [freshError, setFreshError] = useState<string | null>(null);
   const [checking, setChecking] = useState(false);
   const reload = useCallback(async (fresh = false) => {
@@ -23,5 +35,11 @@ export function useOnboarding() {
     }
     setChecking(false);
   }, []);
-  return { onboarding, error: freshError ?? error, checking: checking || isFetching, reload };
+  return {
+    onboarding,
+    error: freshError ?? (q.error ? errorText(q.error) : null),
+    /* the 5 s poll doesn't count as "Conferindo…" */
+    checking,
+    reload,
+  };
 }

package/studio/web/index.html

@@ -9,7 +9,7 @@
   <link rel="icon" type="image/png" media="(prefers-color-scheme: dark)" href="data:image/png;base64,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">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;500;600;700&family=Geist+Mono:wght@400;500&family=Inter:wght@300..700&display=swap">
   <link rel="stylesheet" href="./styles/index.css">
 </head>
 <body>

package/studio/web/lib/alerts.ts

@@ -119,6 +119,16 @@ function agentAlerts(agents: AgentsSettings, now: number): Alert[] {
   if (on.some(a => a.login && !limited(a))) return [];
   const until = on.filter(a => a.login && limited(a)).map(a => a.limited_until!);
   if (!until.length) {
+    /* the default account (~/.claude) without a login: the Claude Code may live in another folder */
+    if (on.length === 1 && on[0].implicit && on[0].provider === "claude")
+      return [
+        {
+          key: "agents:no-claude",
+          label: "Não achei o login do Claude Code",
+          message: `Em ${on[0].dir}: entre, ou coloque a pasta dele em Configurações`,
+          link,
+        },
+      ];
     return [
       {
         key: "agents:no-login",

package/studio/web/lib/omni-panel.ts

@@ -13,11 +13,13 @@ export type OmniPanelState = {
   available: boolean;
   face: string | null;
   open: boolean;
+  /* a call is on (even minimized): the sidebar card shows the expand icon only then */
+  active: boolean;
   ring: OmniStatus;
   glow: OmniGlowState;
 };
 
-let state: OmniPanelState = { available: false, face: null, open: false, ring: "idle", glow: "off" };
+let state: OmniPanelState = { available: false, face: null, open: false, active: false, ring: "idle", glow: "off" };
 let toggler: (() => void) | null = null;
 let leveler: (() => number) | null = null;
 const listeners = new Set<() => void>();
@@ -27,6 +29,7 @@ export function publishOmniPanel(next: OmniPanelState) {
     next.available === state.available &&
     next.face === state.face &&
     next.open === state.open &&
+    next.active === state.active &&
     next.ring === state.ring &&
     next.glow === state.glow
   )

package/studio/web/lib/toast.ts

@@ -0,0 +1,196 @@
+/* The studio's toasts: a short result that shows up in a corner and goes away on its own, instead of an inline
+   `.response` line that stays until the next save. `toast.success("Salvo")` works anywhere (a hook, a callback, a
+   module), because the list lives here and not in React; components/Toaster.tsx, mounted once in the app shell, draws it.
+
+   The list is a queue: the newest toast is in front, three are shown, the older ones wait behind and come up as the
+   front ones go. A toast's timer only runs while it is one of the three shown, and every timer stops while the stack
+   is open (the reader is looking at it), then picks up with the time each one had left. */
+
+import { useSyncExternalStore } from "react";
+import type { ActionResult } from "./api";
+
+export type ToastKind = "success" | "info" | "error" | "warning";
+export type ToastAction = { label: string; onClick: () => void };
+export type ToastOptions = {
+  body?: string;
+  /* a button on the toast; clicking it runs `onClick` and dismisses the toast */
+  action?: ToastAction;
+  /* ms on screen; Infinity stays until dismissed. The default depends on the kind: an error is read slower */
+  duration?: number;
+  /* a toast with the same id is replaced in place (and brought to the front) instead of stacking a copy */
+  id?: string;
+};
+export type ToastItem = {
+  id: string;
+  kind: ToastKind;
+  title: string;
+  body?: string;
+  action?: ToastAction;
+  duration: number;
+};
+
+/* the stack draws this many; the rest of the queue waits */
+export const TOAST_LIMIT = 3;
+
+export const TOAST_DURATION: Record<ToastKind, number> = {
+  success: 4000,
+  info: 5000,
+  warning: 7000,
+  error: 9000,
+};
+
+/* the clock and the timers, injectable so a test can drive time by hand */
+export type ToastClock = {
+  now: () => number;
+  setTimer: (fn: () => void, ms: number) => unknown;
+  clearTimer: (handle: unknown) => void;
+};
+
+const realClock: ToastClock = {
+  now: () => Date.now(),
+  setTimer: (fn, ms) => setTimeout(fn, ms),
+  clearTimer: handle => clearTimeout(handle as ReturnType<typeof setTimeout>),
+};
+
+export function createToastStore(clock: ToastClock = realClock) {
+  /* newest first */
+  let items: ToastItem[] = [];
+  let shown: ToastItem[] = [];
+  let paused = false;
+  let seq = 0;
+  const listeners = new Set<() => void>();
+  /* ms still to go for each toast, and the timer of the ones counting down right now */
+  const remaining = new Map<string, number>();
+  const running = new Map<string, { handle: unknown; since: number }>();
+
+  const stop = (id: string) => {
+    const r = running.get(id);
+    if (!r) return;
+    clock.clearTimer(r.handle);
+    running.delete(id);
+    remaining.set(id, Math.max(0, (remaining.get(id) ?? 0) - (clock.now() - r.since)));
+  };
+
+  /* after any change: the timers of the toasts not shown (or all of them, while paused) stop; the shown ones start */
+  const sync = () => {
+    const visible = new Set(items.slice(0, TOAST_LIMIT).map(t => t.id));
+    for (const id of [...running.keys()]) if (paused || !visible.has(id)) stop(id);
+    if (!paused) {
+      for (const id of visible) {
+        const left = remaining.get(id) ?? Number.POSITIVE_INFINITY;
+        if (running.has(id) || !Number.isFinite(left)) continue;
+        running.set(id, { handle: clock.setTimer(() => dismiss(id), left), since: clock.now() });
+      }
+    }
+    shown = items.slice(0, TOAST_LIMIT);
+    for (const l of listeners) l();
+  };
+
+  const dismiss = (id: string) => {
+    stop(id);
+    remaining.delete(id);
+    if (!items.some(t => t.id === id)) return;
+    items = items.filter(t => t.id !== id);
+    sync();
+  };
+
+  const add = (kind: ToastKind, title: string, opts: ToastOptions = {}): string => {
+    const id = opts.id ?? `toast-${++seq}`;
+    const action = opts.action && {
+      label: opts.action.label,
+      onClick: () => {
+        opts.action?.onClick();
+        dismiss(id);
+      },
+    };
+    const duration = opts.duration ?? TOAST_DURATION[kind];
+    stop(id);
+    items = [{ id, kind, title, body: opts.body, action, duration }, ...items.filter(t => t.id !== id)];
+    remaining.set(id, duration);
+    sync();
+    return id;
+  };
+
+  return {
+    success: (title: string, opts?: ToastOptions) => add("success", title, opts),
+    info: (title: string, opts?: ToastOptions) => add("info", title, opts),
+    error: (title: string, opts?: ToastOptions) => add("error", title, opts),
+    warning: (title: string, opts?: ToastOptions) => add("warning", title, opts),
+    dismiss,
+    clear() {
+      for (const id of [...running.keys()]) stop(id);
+      items = [];
+      remaining.clear();
+      sync();
+    },
+    /* the stack is open (hovered, focused): time stops for every toast */
+    pause() {
+      if (paused) return;
+      paused = true;
+      sync();
+    },
+    resume() {
+      if (!paused) return;
+      paused = false;
+      sync();
+    },
+    /* the toasts to draw, front first; the same array until something changes */
+    getSnapshot: () => shown,
+    /* how many are waiting behind the ones shown */
+    queued: () => items.length - shown.length,
+    subscribe(listener: () => void) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+  };
+}
+
+/* the studio's one list */
+export const toast = createToastStore();
+
+const serverSnapshot: ToastItem[] = [];
+export const useToasts = () => useSyncExternalStore(toast.subscribe, toast.getSnapshot, () => serverSnapshot);
+
+/* A result is a one-line confirmation or a short error, or it is a long text the reader has to be able to come back to
+   (command output, a multi-line failure). Only the first becomes a toast. */
+const SHORT = 140;
+/* a title is one line of a 300px toast */
+const TITLE_FIT = 34;
+
+export const isToastable = (result: NonNullable<ActionResult>) => {
+  const text = (result.ok ? result.output : result.error)?.trim() ?? "";
+  return text.length <= SHORT && !text.includes("\n");
+};
+
+type ResultSink = {
+  success: (title: string, opts?: ToastOptions) => unknown;
+  error: (title: string, opts?: ToastOptions) => unknown;
+};
+
+const announced = new WeakSet<object>();
+
+/* Shows the outcome of an action (what `send()` returns) as a toast: an ok as a success, an error as an error. The same
+   result object is announced once, however many components render it or how often they remount. Returns false when it
+   was not toasted (nothing, already shown, or a long text that stays inline unless `always`). */
+export function toastResult(
+  result: ActionResult,
+  store: ResultSink = toast,
+  { always = false }: { always?: boolean } = {},
+): boolean {
+  if (!result || announced.has(result) || !(always || isToastable(result))) return false;
+  announced.add(result);
+  const raw = (result.ok ? result.output : result.error)?.trim() ?? "";
+  /* `always` is for a caller with no inline fallback: a long text is cut to its first line instead of being lost */
+  const first = raw.split("\n")[0];
+  const text = always && first.length > SHORT ? `${first.slice(0, SHORT - 1)}…` : always ? first : raw;
+  if (result.ok) {
+    /* the same text again (save, save, save) refreshes the toast it already has */
+    if (text.length <= TITLE_FIT) store.success(text || "Pronto", { id: `result:${text}` });
+    else store.success("Pronto", { body: text, id: `result:${text}` });
+  } else {
+    store.error("Algo deu errado", { body: text.charAt(0).toUpperCase() + text.slice(1), id: `result:${text}` });
+  }
+  return true;
+}

package/studio/web/lib/upload.ts

@@ -22,3 +22,27 @@ export function uploadStyleFile(file: File, progress: (pct: number) => void): Pr
     x.send(file);
   });
 }
+
+/* The user's own track for the editor (POST /api/sound/upload): the same raw body, with the video in x-video.
+   The answer's output starts with the name the track got in the video's sfx/. */
+export type TrackUploadResult = { ok: boolean; output?: string; error?: string };
+
+export function uploadTrackFile(slug: string, file: File, progress: (pct: number) => void): Promise<TrackUploadResult> {
+  return new Promise(resolve => {
+    const x = new XMLHttpRequest();
+    x.open("POST", "/api/sound/upload");
+    x.setRequestHeader("content-type", "application/octet-stream");
+    x.setRequestHeader("x-file-name", encodeURIComponent(file.name));
+    x.setRequestHeader("x-video", encodeURIComponent(slug));
+    x.upload.onprogress = e => e.lengthComputable && progress(Math.round((e.loaded / e.total) * 100));
+    x.onerror = () => resolve({ ok: false, error: "O envio falhou" });
+    x.onload = () => {
+      try {
+        resolve(JSON.parse(x.responseText));
+      } catch {
+        resolve({ ok: false, error: `${x.status}: ${x.statusText}` });
+      }
+    };
+    x.send(file);
+  });
+}

package/studio/web/pages/BenchoPage/index.tsx

@@ -0,0 +1,74 @@
+/* /bencho: the components ported from bencho.dev side by side, in their own colors (styles/components/bencho/
+   tokens.css), to judge look and motion before deciding what the studio keeps. Not in the menu: reached by the
+   address. "Fundo" picks the card color every stage gives its component (data-fill); "Tema" the page's palette. */
+
+import { Suspense, useState } from "react";
+import { BENCHO } from "./registry";
+
+type Fill = "light" | "dark";
+type Theme = "light" | "dark";
+
+function Choice<T extends string>({
+  label,
+  value,
+  options,
+  onChange,
+}: {
+  label: string;
+  value: T;
+  options: { id: T; name: string }[];
+  onChange: (v: T) => void;
+}) {
+  return (
+    <div className="bn-choice" role="group" aria-label={label}>
+      <span>{label}</span>
+      {options.map(o => (
+        <button key={o.id} type="button" aria-pressed={value === o.id} onClick={() => onChange(o.id)}>
+          {o.name}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+export function BenchoPage() {
+  const [fill, setFill] = useState<Fill>("light");
+  const [theme, setTheme] = useState<Theme>("light");
+  /* ?only=<id> shows a single card, for looking at one port on its own */
+  const only = new URLSearchParams(window.location.search).get("only");
+  const shown = only ? BENCHO.filter(b => b.id === only) : BENCHO;
+  const choices = [
+    { id: "light" as const, name: "Claro" },
+    { id: "dark" as const, name: "Escuro" },
+  ];
+  return (
+    <div className="bencho" data-theme={theme}>
+      <header className="bn-top">
+        <div>
+          <h1>Componentes do Bencho</h1>
+          <p>{BENCHO.length} peças portadas para o código do studio (Motion e ícones nossos), nas cores originais.</p>
+        </div>
+        <div className="bn-controls">
+          <Choice label="Fundo" value={fill} options={choices} onChange={setFill} />
+          <Choice label="Tema" value={theme} options={choices} onChange={setTheme} />
+        </div>
+      </header>
+      <div className="bn-grid">
+        {shown.map(({ id, title, description, category, glass, Component }) => (
+          <section key={id} className="bn-card" aria-labelledby={`bn-${id}`}>
+            <header>
+              <h2 id={`bn-${id}`}>{title}</h2>
+              <span className="bn-cat">{category}</span>
+            </header>
+            <p>{description}</p>
+            <div className="bn-stage" data-fill={fill} data-surface={glass ? "glass" : undefined}>
+              <Suspense fallback={null}>
+                <Component />
+              </Suspense>
+            </div>
+          </section>
+        ))}
+      </div>
+    </div>
+  );
+}