@nastechai/agent 0.16.0 → 0.17.0

package/src/components/PlatformsCard.tsx

@@ -0,0 +1,97 @@
+import { AlertTriangle, Radio, Wifi, WifiOff } from "lucide-react";
+import type { PlatformStatus } from "@/lib/api";
+import { isoTimeAgo } from "@/lib/utils";
+import { Badge } from "@nastechai/ui/ui/components/badge";
+import { Card, CardContent, CardHeader, CardTitle } from "@nastechai/ui/ui/components/card";
+import { useI18n } from "@/i18n";
+
+export function PlatformsCard({ platforms }: PlatformsCardProps) {
+  const { t } = useI18n();
+  const platformStateBadge: Record<
+    string,
+    { tone: "success" | "warning" | "destructive"; label: string }
+  > = {
+    connected: { tone: "success", label: t.status.connected },
+    disconnected: { tone: "warning", label: t.status.disconnected },
+    fatal: { tone: "destructive", label: t.status.error },
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center gap-2">
+          <Radio className="h-5 w-5 text-muted-foreground" />
+          <CardTitle className="text-base">
+            {t.status.connectedPlatforms}
+          </CardTitle>
+        </div>
+      </CardHeader>
+
+      <CardContent className="grid gap-3">
+        {platforms.map(([name, info]) => {
+          const display = platformStateBadge[info.state] ?? {
+            tone: "outline" as const,
+            label: info.state,
+          };
+          const IconComponent =
+            info.state === "connected"
+              ? Wifi
+              : info.state === "fatal"
+                ? AlertTriangle
+                : WifiOff;
+
+          return (
+            <div
+              key={name}
+              className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 border border-border p-3 w-full"
+            >
+              <div className="flex items-center gap-3 min-w-0 w-full">
+                <IconComponent
+                  className={`h-4 w-4 shrink-0 ${
+                    info.state === "connected"
+                      ? "text-success"
+                      : info.state === "fatal"
+                        ? "text-destructive"
+                        : "text-warning"
+                  }`}
+                />
+
+                <div className="flex flex-col gap-0.5 min-w-0">
+                  <span className="font-mondwest normal-case text-sm font-medium capitalize truncate">
+                    {name}
+                  </span>
+
+                  {info.error_message && (
+                    <span className="font-mondwest normal-case text-xs text-destructive">
+                      {info.error_message}
+                    </span>
+                  )}
+
+                  {info.updated_at && (
+                    <span className="font-mondwest normal-case text-xs text-muted-foreground">
+                      {t.status.lastUpdate}: {isoTimeAgo(info.updated_at)}
+                    </span>
+                  )}
+                </div>
+              </div>
+
+              <Badge
+                tone={display.tone}
+                className="shrink-0 self-start sm:self-center"
+              >
+                {display.tone === "success" && (
+                  <span className="mr-1 inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-current" />
+                )}
+                {display.label}
+              </Badge>
+            </div>
+          );
+        })}
+      </CardContent>
+    </Card>
+  );
+}
+
+interface PlatformsCardProps {
+  platforms: [string, PlatformStatus][];
+}

package/src/components/ScheduleBuilder.tsx

@@ -0,0 +1,273 @@
+import { useCallback } from "react";
+import { Input } from "@nastechai/ui/ui/components/input";
+import { Label } from "@nastechai/ui/ui/components/label";
+import { Select, SelectOption } from "@nastechai/ui/ui/components/select";
+import { Button } from "@nastechai/ui/ui/components/button";
+import { useI18n } from "@/i18n";
+import {
+  buildScheduleString,
+  DEFAULT_SCHEDULE_STATE,
+  type IntervalUnit,
+  type ScheduleBuilderState,
+  type ScheduleMode,
+  type Weekday,
+  WEEKDAY_INDEXES,
+} from "@/lib/schedule";
+
+/**
+ * Human-readable schedule picker for cron job create/edit flows.
+ *
+ * Replaces the raw "type a cron expression" input that lived inline in
+ * ``CronPage``. The picker still emits a single backend-compatible
+ * schedule string (see ``cron/jobs.py::parse_schedule``), but the user
+ * fills out shape-appropriate inputs (time picker, weekday toggles,
+ * datetime-local field) per mode.
+ *
+ * Architecture:
+ *
+ *  - The component is fully controlled. Parent owns the
+ *    ``ScheduleBuilderState`` and the derived schedule string (built
+ *    via ``buildScheduleString`` in render).
+ *  - Mode-specific state slots (``timeOfDay``, ``weekdays``, ...) are
+ *    preserved across mode switches so flipping back to a previous mode
+ *    doesn't erase the user's work.
+ *  - The "Custom" mode is an escape hatch — surfacing it as a normal
+ *    option (instead of hiding it behind an "advanced" toggle) keeps
+ *    power-user workflows discoverable without making everyone scroll
+ *    past it.
+ */
+export function ScheduleBuilder({ onChange, value }: ScheduleBuilderProps) {
+  const { t } = useI18n();
+  const cronStrings = t.cron;
+  const modeStrings = (cronStrings.scheduleModes ?? {}) as Record<string, string>;
+
+  const update = useCallback(
+    (patch: Partial<ScheduleBuilderState>) => {
+      onChange({ ...value, ...patch });
+    },
+    [onChange, value],
+  );
+
+  const toggleWeekday = useCallback(
+    (day: Weekday) => {
+      const present = value.weekdays.includes(day);
+      update({
+        weekdays: present
+          ? value.weekdays.filter((d) => d !== day)
+          : [...value.weekdays, day],
+      });
+    },
+    [update, value.weekdays],
+  );
+
+  return (
+    <div className="grid gap-3">
+      <div className="grid gap-2">
+        <Label htmlFor="cron-schedule-mode">
+          {cronStrings.scheduleMode ?? "Schedule"}
+        </Label>
+        <Select
+          id="cron-schedule-mode"
+          value={value.mode}
+          onValueChange={(v) => update({ mode: v as ScheduleMode })}
+        >
+          <SelectOption value="interval">{modeStrings.interval}</SelectOption>
+          <SelectOption value="daily">{modeStrings.daily}</SelectOption>
+          <SelectOption value="weekly">{modeStrings.weekly}</SelectOption>
+          <SelectOption value="monthly">{modeStrings.monthly}</SelectOption>
+          <SelectOption value="once">{modeStrings.once}</SelectOption>
+          <SelectOption value="custom">{modeStrings.custom}</SelectOption>
+        </Select>
+      </div>
+
+      {value.mode === "interval" && (
+        <div className="grid grid-cols-[1fr_1.4fr] gap-3">
+          <div className="grid gap-2">
+            <Label htmlFor="cron-interval-value">
+              {modeStrings.intervalEvery}
+            </Label>
+            <Input
+              id="cron-interval-value"
+              type="number"
+              min={1}
+              max={9999}
+              value={String(value.intervalValue)}
+              onChange={(e) => {
+                const n = parseInt(e.target.value, 10);
+                update({
+                  intervalValue: Number.isFinite(n) && n > 0 ? n : 1,
+                });
+              }}
+            />
+          </div>
+          <div className="grid gap-2">
+            <Label htmlFor="cron-interval-unit">{modeStrings.intervalUnit}</Label>
+            <Select
+              id="cron-interval-unit"
+              value={value.intervalUnit}
+              onValueChange={(v) => update({ intervalUnit: v as IntervalUnit })}
+            >
+              <SelectOption value="minutes">
+                {modeStrings.unitMinutes}
+              </SelectOption>
+              <SelectOption value="hours">{modeStrings.unitHours}</SelectOption>
+              <SelectOption value="days">{modeStrings.unitDays}</SelectOption>
+            </Select>
+          </div>
+        </div>
+      )}
+
+      {value.mode === "daily" && (
+        <TimeOfDayField
+          id="cron-daily-time"
+          label={modeStrings.timeOfDay}
+          value={value.timeOfDay}
+          onChange={(timeOfDay) => update({ timeOfDay })}
+        />
+      )}
+
+      {value.mode === "weekly" && (
+        <>
+          <div className="grid gap-2">
+            <Label>{modeStrings.weekdays}</Label>
+            <div
+              className="flex flex-wrap gap-1.5"
+              role="group"
+              aria-label={modeStrings.weekdays}
+            >
+              {WEEKDAY_INDEXES.map((d) => {
+                const isOn = value.weekdays.includes(d);
+                return (
+                  <Button
+                    key={d}
+                    type="button"
+                    size="sm"
+                    outlined={!isOn}
+                    aria-pressed={isOn}
+                    onClick={() => toggleWeekday(d)}
+                    className="min-w-[2.5rem] font-mono-ui text-xs uppercase"
+                  >
+                    {modeStrings.weekdaysShort[d]}
+                  </Button>
+                );
+              })}
+            </div>
+          </div>
+          <TimeOfDayField
+            id="cron-weekly-time"
+            label={modeStrings.timeOfDay}
+            value={value.timeOfDay}
+            onChange={(timeOfDay) => update({ timeOfDay })}
+          />
+        </>
+      )}
+
+      {value.mode === "monthly" && (
+        <div className="grid grid-cols-[1fr_1fr] gap-3">
+          <div className="grid gap-2">
+            <Label htmlFor="cron-month-day">{modeStrings.dayOfMonth}</Label>
+            <Input
+              id="cron-month-day"
+              type="number"
+              min={1}
+              max={31}
+              value={String(value.dayOfMonth)}
+              onChange={(e) => {
+                const n = parseInt(e.target.value, 10);
+                update({
+                  dayOfMonth:
+                    Number.isFinite(n) && n >= 1 && n <= 31 ? n : 1,
+                });
+              }}
+            />
+          </div>
+          <TimeOfDayField
+            id="cron-monthly-time"
+            label={modeStrings.timeOfDay}
+            value={value.timeOfDay}
+            onChange={(timeOfDay) => update({ timeOfDay })}
+          />
+        </div>
+      )}
+
+      {value.mode === "once" && (
+        <div className="grid gap-2">
+          <Label htmlFor="cron-once-at">{modeStrings.onceAt}</Label>
+          {/* Native datetime-local — emits the exact "YYYY-MM-DDTHH:MM"
+              shape ``parse_schedule`` accepts on the backend. */}
+          <input
+            id="cron-once-at"
+            type="datetime-local"
+            className="flex h-9 w-full border border-border bg-background/40 px-3 py-2 text-sm font-courier shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-foreground/30 focus-visible:border-foreground/25"
+            value={value.onceAt}
+            onChange={(e) => update({ onceAt: e.target.value })}
+          />
+        </div>
+      )}
+
+      {value.mode === "custom" && (
+        <div className="grid gap-2">
+          <Label htmlFor="cron-custom-expr">{modeStrings.customLabel}</Label>
+          <Input
+            id="cron-custom-expr"
+            placeholder={modeStrings.customPlaceholder}
+            value={value.custom}
+            onChange={(e) => update({ custom: e.target.value })}
+            className="font-mono-ui"
+          />
+          <p className="text-xs text-muted-foreground">
+            {modeStrings.customHint}
+          </p>
+        </div>
+      )}
+
+      {/* Inline preview of what we'll send to the backend. Helps users
+          eyeball the result before hitting Create, and keeps the
+          schedule grammar discoverable for the custom mode. */}
+      <p className="text-xs text-muted-foreground">
+        <span className="opacity-70">{modeStrings.preview}: </span>
+        <span className="font-mono-ui text-foreground">
+          {buildScheduleString(value) || modeStrings.previewEmpty}
+        </span>
+      </p>
+    </div>
+  );
+}
+
+function TimeOfDayField({
+  id,
+  label,
+  onChange,
+  value,
+}: TimeOfDayFieldProps) {
+  return (
+    <div className="grid gap-2">
+      <Label htmlFor={id}>{label}</Label>
+      {/* Native time picker is the right tool for "HH:MM" — saves us
+          two separate hour/minute selects, respects user locale's
+          AM/PM preference, and round-trips with ``buildScheduleString``
+          without parsing. */}
+      <input
+        id={id}
+        type="time"
+        className="flex h-9 w-full border border-border bg-background/40 px-3 py-2 text-sm font-courier shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-foreground/30 focus-visible:border-foreground/25"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+      />
+    </div>
+  );
+}
+
+export { DEFAULT_SCHEDULE_STATE };
+
+interface ScheduleBuilderProps {
+  onChange: (state: ScheduleBuilderState) => void;
+  value: ScheduleBuilderState;
+}
+
+interface TimeOfDayFieldProps {
+  id: string;
+  label: string;
+  onChange: (value: string) => void;
+  value: string;
+}

package/src/components/SidebarFooter.tsx

@@ -0,0 +1,42 @@
+import { Typography } from "@nastechai/ui/ui/components/typography/index";
+import type { StatusResponse } from "@/lib/api";
+import { cn } from "@/lib/utils";
+import { useI18n } from "@/i18n";
+
+export function SidebarFooter({ status }: SidebarFooterProps) {
+  const { t } = useI18n();
+
+  return (
+    <div
+      className={cn(
+        "flex shrink-0 items-center justify-between gap-2",
+        "px-5 py-2.5",
+        "border-t border-current/10",
+      )}
+    >
+      <Typography
+        className="font-mono-ui text-xs tabular-nums tracking-[0.08em] text-text-tertiary lowercase"
+      >
+        {status?.version != null ? `v${status.version}` : "—"}
+      </Typography>
+
+      <a
+        href="https://nastech.com"
+        target="_blank"
+        rel="noopener noreferrer"
+        className={cn(
+          "font-mondwest text-display text-xs tracking-[0.12em] text-midground",
+          "transition-opacity hover:opacity-90",
+          "focus-visible:rounded-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-midground/40",
+        )}
+        style={{ mixBlendMode: "plus-lighter" }}
+      >
+        {t.app.footer.org}
+      </a>
+    </div>
+  );
+}
+
+interface SidebarFooterProps {
+  status: StatusResponse | null;
+}

package/src/components/SidebarStatusStrip.tsx

@@ -0,0 +1,72 @@
+import { Link } from "react-router-dom";
+import type { StatusResponse } from "@/lib/api";
+import { cn } from "@/lib/utils";
+import { useI18n } from "@/i18n";
+
+/** Gateway + session summary for the System sidebar block (no separate strip chrome). */
+export function SidebarStatusStrip({ status }: SidebarStatusStripProps) {
+  const { t } = useI18n();
+
+  if (status === null) {
+    return (
+      <div className="px-5 py-1.5" aria-hidden>
+        <div className="h-2 w-[80%] max-w-full animate-pulse rounded-sm bg-midground/10" />
+      </div>
+    );
+  }
+
+  const gw = gatewayLine(status, t);
+  const { activeSessionsLabel, gatewayStatusLabel } = t.app;
+
+  return (
+    <Link
+      to="/sessions"
+      title={t.app.statusOverview}
+      className={cn(
+        "block text-left",
+        "px-5 pb-2 pt-0.5",
+        "text-text-secondary",
+        "transition-colors hover:text-midground",
+        "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-midground/40",
+        "focus-visible:ring-inset",
+      )}
+    >
+      <div className="flex flex-col gap-1 font-mondwest text-xs leading-snug tracking-[0.08em]">
+        <p className="break-words">
+          <span className="text-text-tertiary">{gatewayStatusLabel}</span>{" "}
+          <span className={cn("font-medium", gw.tone)}>{gw.label}</span>
+        </p>
+
+        <p className="break-words">
+          <span className="text-text-tertiary">{activeSessionsLabel}</span>{" "}
+          <span className="tabular-nums text-text-secondary">
+            {status.active_sessions}
+          </span>
+        </p>
+      </div>
+    </Link>
+  );
+}
+
+export function gatewayLine(
+  status: StatusResponse,
+  t: ReturnType<typeof useI18n>["t"],
+): { label: string; tone: string } {
+  const g = t.app.gatewayStrip;
+  const byState: Record<string, { label: string; tone: string }> = {
+    running: { label: g.running, tone: "text-success" },
+    starting: { label: g.starting, tone: "text-warning" },
+    startup_failed: { label: g.failed, tone: "text-destructive" },
+    stopped: { label: g.stopped, tone: "text-muted-foreground" },
+  };
+  if (status.gateway_state && byState[status.gateway_state]) {
+    return byState[status.gateway_state];
+  }
+  return status.gateway_running
+    ? { label: g.running, tone: "text-success" }
+    : { label: g.off, tone: "text-muted-foreground" };
+}
+
+interface SidebarStatusStripProps {
+  status: StatusResponse | null;
+}

package/src/components/SlashPopover.tsx

@@ -0,0 +1,171 @@
+import type { GatewayClient } from "@/lib/gatewayClient";
+import { ListItem } from "@nastechai/ui/ui/components/list-item";
+import { ChevronRight } from "lucide-react";
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "react";
+
+/**
+ * Slash-command autocomplete popover, rendered above the composer in ChatPage.
+ * Mirrors the completion UX of the Ink TUI — type `/`, see matching commands,
+ * arrow keys or click to select, Tab to apply, Enter to submit.
+ *
+ * The parent owns all keyboard handling via `ref.handleKey`, which returns
+ * true when the popover consumed the event, so the composer's Enter/arrow
+ * logic stays in one place.
+ */
+
+export interface CompletionItem {
+  display: string;
+  text: string;
+  meta?: string;
+}
+
+export interface SlashPopoverHandle {
+  /** Returns true if the key was consumed by the popover. */
+  handleKey(e: React.KeyboardEvent<HTMLTextAreaElement>): boolean;
+}
+
+interface Props {
+  input: string;
+  gw: GatewayClient | null;
+  onApply(nextInput: string): void;
+}
+
+interface CompletionResponse {
+  items?: CompletionItem[];
+  replace_from?: number;
+}
+
+const DEBOUNCE_MS = 60;
+
+export const SlashPopover = forwardRef<SlashPopoverHandle, Props>(
+  function SlashPopover({ input, gw, onApply }, ref) {
+    const [items, setItems] = useState<CompletionItem[]>([]);
+    const [selected, setSelected] = useState(0);
+    const [replaceFrom, setReplaceFrom] = useState(1);
+    const lastInputRef = useRef<string>("");
+
+    // Debounced completion fetch. We never clear `items` in the effect body
+    // (doing so would flag react-hooks/set-state-in-effect); instead the
+    // render guard below hides stale items once the input stops matching.
+    useEffect(() => {
+      const trimmed = input ?? "";
+
+      if (!gw || !trimmed.startsWith("/") || trimmed === lastInputRef.current) {
+        if (!trimmed.startsWith("/")) lastInputRef.current = "";
+        return;
+      }
+      lastInputRef.current = trimmed;
+
+      const timer = window.setTimeout(async () => {
+        if (lastInputRef.current !== trimmed) return;
+        try {
+          const r = await gw.request<CompletionResponse>("complete.slash", {
+            text: trimmed,
+          });
+          if (lastInputRef.current !== trimmed) return;
+          setItems(r?.items ?? []);
+          setReplaceFrom(r?.replace_from ?? 1);
+          setSelected(0);
+        } catch {
+          if (lastInputRef.current === trimmed) setItems([]);
+        }
+      }, DEBOUNCE_MS);
+
+      return () => window.clearTimeout(timer);
+    }, [input, gw]);
+
+    const apply = useCallback(
+      (item: CompletionItem) => {
+        onApply(input.slice(0, replaceFrom) + item.text);
+      },
+      [input, replaceFrom, onApply],
+    );
+
+    // Only consume keys when the popover is actually visible. Stale items from
+    // a previous slash prefix are ignored once the user deletes the "/".
+    const visible = items.length > 0 && input.startsWith("/");
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        handleKey: (e) => {
+          if (!visible) return false;
+
+          switch (e.key) {
+            case "ArrowDown":
+              e.preventDefault();
+              setSelected((s) => (s + 1) % items.length);
+              return true;
+
+            case "ArrowUp":
+              e.preventDefault();
+              setSelected((s) => (s - 1 + items.length) % items.length);
+              return true;
+
+            case "Tab": {
+              e.preventDefault();
+              const item = items[selected];
+              if (item) apply(item);
+              return true;
+            }
+
+            case "Escape":
+              e.preventDefault();
+              setItems([]);
+              return true;
+
+            default:
+              return false;
+          }
+        },
+      }),
+      [visible, items, selected, apply],
+    );
+
+    if (!visible) return null;
+
+    return (
+      <div
+        className="absolute bottom-full left-0 right-0 mb-2 max-h-64 overflow-y-auto rounded-md border border-border bg-popover shadow-xl text-sm"
+        role="listbox"
+      >
+        {items.map((it, i) => {
+          const active = i === selected;
+
+          return (
+            <ListItem
+              key={`${it.text}-${i}`}
+              active={active}
+              role="option"
+              aria-selected={active}
+              onMouseEnter={() => setSelected(i)}
+              onClick={() => apply(it)}
+              className="px-3 py-1.5"
+            >
+              <ChevronRight
+                className={`h-3 w-3 shrink-0 ${active ? "text-primary" : "text-transparent"}`}
+              />
+
+              <span className="font-mono text-xs shrink-0 truncate">
+                {it.display}
+              </span>
+
+              {it.meta && (
+                <span className="text-xs text-text-tertiary truncate ml-auto">
+                  {it.meta}
+                </span>
+              )}
+            </ListItem>
+          );
+        })}
+      </div>
+    );
+  },
+);