@anchrd/intel-ui 0.22.0 → 0.23.0

package/src/resource-menu/resource-menu.tsx

@@ -6,6 +6,7 @@ import { useNavigate, useRouterState } from "@tanstack/react-router";
 import {
   Archive,
   CornerLeftUp,
+  Download,
   Ellipsis,
   FileArchive,
   FolderDown,
@@ -36,6 +37,7 @@ import { useBundleImport } from "@/import-bundle/import-bundle.tsx";
 import { Modal } from "@/modal/modal.tsx";
 import { useIntelRouterContext } from "@/router/router-context.ts";
 import { selectedFrom } from "@/router/selection-search.ts";
+import { useDateTime } from "@/time/time-context.tsx";
 import { useUserName } from "@/user-name/user-name.ts";
 
 /**
@@ -135,6 +137,7 @@ export function ResourceMenu({
 }) {
   const { data } = useIntelRouterContext();
   const i18n = useI18n();
+  const dateTime = useDateTime();
   const queryClient = useQueryClient();
   const navigate = useNavigate();
   const [renaming, setRenaming] = useState(false);
@@ -266,6 +269,37 @@ export function ResourceMenu({
     },
   });
 
+  // #454: a table's CSV export — an ENTRY, not a button of its own. It was the only control WITH
+  // TEXT beside two icon buttons in the title line, and it was needed no more often than what sits
+  // in here anyway; it was merely wider. Intel has made the same decision twice already (#363 for
+  // status and archive, #346 for the import).
+  //
+  // ⚠️ It lives HERE and no longer in `NodeTablePanel`: there it hung off the table query in order
+  // to prevent an empty export. The condition survives the move without a second query — the
+  // canonical content IS the CSV, and if it is empty nothing is downloaded, it is refused instead.
+  // A file of zero bytes is the worse answer.
+  const downloadCsv = useMutation({
+    mutationFn: async () => {
+      if (target.type !== "node") throw new Error("csv export is a node's");
+      const document_ = await data.getNode(target.node.id);
+      const content = document_.content ?? "";
+      if (content === "") throw new Error("nothing to export yet");
+      return new Blob([content], { type: "text/csv;charset=utf-8" });
+    },
+    onSuccess: (blob) => {
+      const url = URL.createObjectURL(blob);
+      const anchor = document.createElement("a");
+      anchor.href = url;
+      // No doubled `.csv` when the title already carries the extension — unchanged from #40.
+      anchor.download = title.toLowerCase().endsWith(".csv") ? title : `${title}.csv`;
+      document.body.append(anchor);
+      anchor.click();
+      anchor.remove();
+      setTimeout(() => URL.revokeObjectURL(url), 0);
+    },
+  });
+  const isTable = target.type === "node" && target.node.kind === "table";
+
   const failure = rename.isError
     ? null // the rename dialog words its own refusal, beside the field that caused it
     : archive.isError
@@ -291,9 +325,25 @@ export function ResourceMenu({
             <Pencil aria-hidden="true" />
             {i18n.t("resource.rename")}
           </DropdownMenuItem>
+          {/* ⚠️ #455: the hint is the actual change of the ticket. Dragging in the tree has been
+              built and shipped since 2026-08-02 — Jack asked for it anyway, so the feature was not
+              the problem, its discoverability was. Nothing about a row says it is movable before you
+              touch it: `cursor-grab` is only visible once the pointer is already on it, and the root
+              drop target appears only while something is being carried.
+
+              A menu is where you learn what can be done with a thing — the same place an application
+              names its keyboard shortcuts. No handle and no extra icon (Jack's instruction), and
+              readable without the pointer ever touching the row.
+
+              ⚠️ The dialog behind it stays the main path, not the fallback: touch has no
+              `dragstart`, and nothing can be dragged by keyboard at all. Dragging is the shortcut
+              for the mouse — the hint says exactly that, in the place that is reachable both ways. */}
           <DropdownMenuItem onSelect={() => move.start(entryOf(target), null)}>
             <CornerLeftUp aria-hidden="true" />
             {i18n.t("tree.move.action")}
+            <span aria-hidden="true" className="ml-auto text-xs text-muted-foreground">
+              {i18n.t("tree.move.hint")}
+            </span>
           </DropdownMenuItem>
           {/* Every kind exports: a folder takes its subtree along, everything else is a bundle of
               one (#136). The entry sits with rename and move because it acts on the whole thing,
@@ -302,6 +352,14 @@ export function ResourceMenu({
             <FolderDown aria-hidden="true" />
             {i18n.t("resource.export")}
           </DropdownMenuItem>
+          {/* Only a table has a CSV — and it stands beside the bundle export because both do the
+              same thing: hand out the whole thing, not a part of its content. */}
+          {isTable ? (
+            <DropdownMenuItem onSelect={() => downloadCsv.mutate()}>
+              <Download aria-hidden="true" />
+              {i18n.t("node.table.download")}
+            </DropdownMenuItem>
+          ) : null}
           {/* The other half of the same round trip, next to it rather than in the tree's plus
               (#346): one word in the menu, both sources under it. */}
           {importable ? (
@@ -367,6 +425,9 @@ export function ResourceMenu({
       {/* Its own sentence, not `resourceErrorKey`'s: nothing was changed, something failed to
           arrive, and "the change was not saved" would send the reader looking for a change. */}
       {exportBundle.isError ? <MenuFailure>{i18n.t("resource.exportFailed")}</MenuFailure> : null}
+      {downloadCsv.isError ? (
+        <MenuFailure>{i18n.t("node.table.downloadFailed")}</MenuFailure>
+      ) : null}
       {/* The import's own sentence, and its own pickers — only where the entry exists, because two
           file inputs on every document's menu would be two elements nothing can ever open. */}
       {bundleImport.isError ? <MenuFailure>{i18n.t("tree.importFailed")}</MenuFailure> : null}
@@ -417,7 +478,7 @@ export function ResourceMenu({
           {/* A snapshot says when it was taken, or it will be read as a standing verdict. */}
           <p className="mt-4 text-xs text-muted-foreground">
             {i18n.t("flows.validateWhen", {
-              when: new Date(validation.checkedAt).toLocaleString(),
+              when: dateTime.at(validation.checkedAt),
             })}
           </p>
         </Modal>

package/src/time/time-context.tsx

@@ -0,0 +1,72 @@
+import { createContext, type ReactNode, useContext, useMemo, useState } from "react";
+import { useI18n } from "@/i18n/i18n-context.tsx";
+import {
+  DeviceZone,
+  formatDate,
+  formatDateTime,
+  readZoneChoice,
+  rememberZoneChoice,
+  type TimeZoneStore,
+  type ZoneChoice,
+} from "./time.ts";
+
+// The React seam for the zone. Like language and appearance it is CLIENT state — a preference in
+// `localStorage`, never on Intel's HTTP surface (`packages/ui/CLAUDE.md`).
+//
+// ⚠️ Deliberately NOT inside the i18n context, although both concern presentation: the language
+// decides HOW a time is written, the zone WHICH time it is. Merged, the zone would hang off the
+// catalogue and a language switch would move the clock.
+
+export interface ZoneSelection {
+  current: ZoneChoice;
+  select(choice: ZoneChoice): void;
+}
+
+const ZoneContext = createContext<ZoneSelection | null>(null);
+
+export function TimeZoneProvider({
+  store,
+  children,
+}: {
+  store?: TimeZoneStore;
+  children: ReactNode;
+}) {
+  const [choice, setChoice] = useState<ZoneChoice>(() => readZoneChoice(store));
+  const selection = useMemo<ZoneSelection>(
+    () => ({
+      current: choice,
+      select: (next) => {
+        rememberZoneChoice(next, store);
+        setChoice(next);
+      },
+    }),
+    [choice, store],
+  );
+  return <ZoneContext value={selection}>{children}</ZoneContext>;
+}
+
+// `null` without a provider — not a stand-in value: the settings dialog asks exactly whether there
+// is anything to choose at all (the same rule `useTheme` follows).
+export function useTimeZone(): ZoneSelection | null {
+  return useContext(ZoneContext);
+}
+
+/**
+ * The formatter every surface showing a time uses.
+ *
+ * ⚠️ A hook rather than a function with parameters: otherwise every cell would have to fetch locale
+ * AND zone itself, and the first one that forgets shows the device's zone again — which is the state
+ * before #467, only harder to find.
+ */
+export function useDateTime(): { at: (value: string) => string; on: (value: string) => string } {
+  const i18n = useI18n();
+  const zone = useContext(ZoneContext);
+  const choice = zone?.current ?? DeviceZone;
+  return useMemo(
+    () => ({
+      at: (value: string) => formatDateTime(value, i18n.locale, choice),
+      on: (value: string) => formatDate(value, i18n.locale, choice),
+    }),
+    [i18n.locale, choice],
+  );
+}

package/src/time/time.ts

@@ -0,0 +1,140 @@
+// The ONE place a timestamp becomes a readable sentence (#467).
+//
+// Every surface used to call `toLocaleString(locale)` for itself, which silently takes the DEVICE's
+// zone. Three things follow that are not true:
+//
+//   1. Whoever travels, or uses a device in another zone, reads different times for the same
+//      events. For a record of what happened that is where it stops being evidence.
+//   2. Nowhere does it say WHICH zone applies. A time without a zone is a number, not a statement —
+//      and it looks exactly like a real one.
+//   3. Two people looking at the same entry see different times and cannot refer to one in
+//      conversation.
+//
+// ⚠️ **The zone is a LENS for reading, never a change to the value.** What is stored and sent stays
+// UTC; this module only formats.
+//
+// ⚠️ The comment in `settings-dialog.tsx` is what this file answers: the timezone left with the
+// Agents (#388) because nothing read it, and "a preference that changes nothing on screen is worse
+// than none". This exists BEFORE the preference does, and that order is the whole of #467.
+
+export interface TimeZoneStore {
+  getItem(key: string): string | null;
+  setItem(key: string, value: string): void;
+}
+
+const StorageKey = "intel.timezone";
+
+// "This device's zone" as an explicit choice rather than an empty field: an empty field would look
+// as if nothing were set, and invite somebody to set what already holds.
+export const DeviceZone = "device";
+export type ZoneChoice = string;
+
+// ⚠️ Falling back to UTC rather than throwing: in an environment without Intl a time in UTC is
+// still a time, while a thrown exception is an empty screen.
+export function deviceZone(): string {
+  try {
+    return Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC";
+  } catch {
+    return "UTC";
+  }
+}
+
+// The stored value comes out of `localStorage` and may have been edited by hand, written by an older
+// build, or name a zone this runtime does not know.
+export function isKnownZone(zone: string): boolean {
+  if (zone === DeviceZone) return true;
+  try {
+    new Intl.DateTimeFormat("en-US", { timeZone: zone });
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+export function readZoneChoice(store?: TimeZoneStore): ZoneChoice {
+  try {
+    const stored = store?.getItem(StorageKey);
+    return stored && isKnownZone(stored) ? stored : DeviceZone;
+  } catch {
+    return DeviceZone;
+  }
+}
+
+export function rememberZoneChoice(choice: ZoneChoice, store?: TimeZoneStore): void {
+  try {
+    store?.setItem(StorageKey, choice);
+  } catch {
+    // Without storage the choice holds for this session. Less than the reader wanted, more than an
+    // error they cannot switch off.
+  }
+}
+
+export function resolveZone(choice: ZoneChoice): string {
+  return choice === DeviceZone || !isKnownZone(choice) ? deviceZone() : choice;
+}
+
+/**
+ * A timestamp as a readable sentence — WITH its zone.
+ *
+ * ⚠️ The abbreviation is not decoration: a shifted time without one is precisely the silent
+ * misstatement this ticket is written against. And it comes from the runtime rather than from a
+ * string in the code — the runtime knows daylight saving, an appended label would be wrong for half
+ * the year.
+ *
+ * ⚠️ Individual components rather than `dateStyle`/`timeStyle`: Intl refuses the two style
+ * shorthands TOGETHER with `timeZoneName` and throws `Invalid option` — inside a table cell that
+ * takes the whole list with it. Found the hard way in `anchrd/gate#286`, where it read as "the row
+ * is missing" rather than as a formatting error.
+ */
+export function formatDateTime(value: string, locale: string, choice: ZoneChoice): string {
+  const date = new Date(value);
+  // An unreadable timestamp travels through rather than rendering as "Invalid Date": the raw value
+  // at least says what stood there.
+  if (Number.isNaN(date.getTime())) return value;
+  return date.toLocaleString(locale, {
+    timeZone: resolveZone(choice),
+    year: "numeric",
+    month: "short",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    timeZoneName: "short",
+  });
+}
+
+/**
+ * The date alone, for the column that only ever showed one (the folder table's "Changed").
+ *
+ * ⚠️ It still resolves through the chosen zone, and that is the point rather than a detail: near
+ * midnight a date is exactly the value that differs between two zones, and a bare date carries no
+ * abbreviation to warn anybody.
+ */
+export function formatDate(value: string, locale: string, choice: ZoneChoice): string {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  return date.toLocaleDateString(locale, { timeZone: resolveZone(choice) });
+}
+
+// ⚠️ A short curated list rather than `Intl.supportedValuesOf("timeZone")` — that is over 400
+// entries, and a dropdown of 400 rows without a search is not a choice but an imposition. A zone
+// missing here is added once it has been missed three times; until then the device's zone is the
+// answer, and it is the right one for almost everybody. Ordered by offset, so the list reads like a
+// map.
+export const ZoneOptions: readonly string[] = [
+  "UTC",
+  "Europe/Lisbon",
+  "Europe/Berlin",
+  "Europe/Athens",
+  "Europe/Moscow",
+  "Asia/Dubai",
+  "Asia/Kolkata",
+  "Asia/Singapore",
+  "Asia/Tokyo",
+  "Australia/Sydney",
+  "Pacific/Auckland",
+  "America/Sao_Paulo",
+  "America/New_York",
+  "America/Chicago",
+  "America/Denver",
+  "America/Los_Angeles",
+];

package/src/components/ui/breadcrumb.tsx

@@ -1,102 +0,0 @@
-import { ChevronRight, MoreHorizontal } from "lucide-react";
-import { Slot } from "radix-ui";
-import type * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
-  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
-}
-
-function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
-  return (
-    <ol
-      data-slot="breadcrumb-list"
-      className={cn(
-        "flex flex-wrap items-center gap-1.5 text-sm break-words text-muted-foreground sm:gap-2.5",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
-  return (
-    <li
-      data-slot="breadcrumb-item"
-      className={cn("inline-flex items-center gap-1.5", className)}
-      {...props}
-    />
-  );
-}
-
-function BreadcrumbLink({
-  asChild,
-  className,
-  ...props
-}: React.ComponentProps<"a"> & {
-  asChild?: boolean;
-}) {
-  const Comp = asChild ? Slot.Root : "a";
-
-  return (
-    <Comp
-      data-slot="breadcrumb-link"
-      className={cn("transition-colors hover:text-foreground", className)}
-      {...props}
-    />
-  );
-}
-
-function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
-  return (
-    <span
-      data-slot="breadcrumb-page"
-      role="link"
-      aria-disabled="true"
-      aria-current="page"
-      className={cn("font-normal text-foreground", className)}
-      {...props}
-    />
-  );
-}
-
-function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<"li">) {
-  return (
-    <li
-      data-slot="breadcrumb-separator"
-      role="presentation"
-      aria-hidden="true"
-      className={cn("[&>svg]:size-3.5", className)}
-      {...props}
-    >
-      {children ?? <ChevronRight />}
-    </li>
-  );
-}
-
-function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<"span">) {
-  return (
-    <span
-      data-slot="breadcrumb-ellipsis"
-      role="presentation"
-      aria-hidden="true"
-      className={cn("flex size-9 items-center justify-center", className)}
-      {...props}
-    >
-      <MoreHorizontal className="size-4" />
-      <span className="sr-only">More</span>
-    </span>
-  );
-}
-
-export {
-  Breadcrumb,
-  BreadcrumbEllipsis,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-};