@opengeni/react 0.57.0 → 2.2.0-canary.0

package/src/components/enrollment-consent.tsx

@@ -1,4 +1,5 @@
 import { type ReactNode, useState } from "react";
+import type { ResourceAuthorityScope } from "@opengeni/sdk";
 import {
   CircleAlertIcon,
   LaptopIcon,
@@ -30,8 +31,10 @@ export type EnrollmentConsentProps = {
   userCode: string;
   machine: EnrollmentConsentMachine;
   phase?: EnrollmentConsentPhase | undefined;
-  /** Approve with the chosen screen-control consent. */
-  onApprove?: ((allowScreenControl: boolean) => void) | undefined;
+  /** Whether this caller may publish the machine to the whole organization. */
+  allowOrganizationScope?: boolean | undefined;
+  /** Approve with the chosen screen-control consent and explicit access scope. */
+  onApprove?: ((allowScreenControl: boolean, scope: ResourceAuthorityScope) => void) | undefined;
   onDeny?: (() => void) | undefined;
   /** Error message when phase === "error". */
   errorMessage?: string | undefined;
@@ -61,13 +64,29 @@ export function EnrollmentConsent({
   userCode,
   machine,
   phase = "review",
+  allowOrganizationScope = false,
   onApprove,
   onDeny,
   errorMessage,
   className,
 }: EnrollmentConsentProps) {
   const [allowScreenControl, setAllowScreenControl] = useState(machine.requestsScreenControl);
+  const [scope, setScope] = useState<ResourceAuthorityScope>("user");
   const busy = phase === "approving";
+  const scopeCopy = {
+    user: {
+      label: "Personal",
+      body: "Only you can use this machine, from any workspace you can access in this organization.",
+    },
+    workspace: {
+      label: "Workspace",
+      body: "Everyone with access to this workspace can use this machine.",
+    },
+    organization: {
+      label: "Organization",
+      body: "Members of this organization can use this machine from their workspaces.",
+    },
+  } satisfies Record<ResourceAuthorityScope, { label: string; body: string }>;
 
   if (phase === "approved") {
     return (
@@ -75,7 +94,7 @@ export function EnrollmentConsent({
         className={className}
         tone="ok"
         title="Machine connected"
-        body={`${machine.machineName} is now enrolled in this workspace. You can close this page — it will appear in your Machines dashboard.`}
+        body={`${machine.machineName} is now connected with ${scopeCopy[scope].label.toLowerCase()} access. You can close this page — it will appear in your Machines dashboard.`}
       />
     );
   }
@@ -156,11 +175,50 @@ export function EnrollmentConsent({
         ) : null}
         <Capability
           icon={<UsersIcon className="size-4" aria-hidden />}
-          title="Shared while connected"
-          body="Any session in this workspace can use this machine while it is online. Disconnect the agent to revoke access instantly."
+          title={`${scopeCopy[scope].label} access while connected`}
+          body={`${scopeCopy[scope].body} Disconnect the agent to revoke access instantly.`}
         />
       </ul>
 
+      <fieldset className="flex flex-col gap-2" disabled={busy}>
+        <legend className="mb-1 text-og-sm font-medium text-og-fg">
+          Who can use this machine?
+        </legend>
+        {(["user", "workspace", "organization"] as const).map((candidate) => {
+          const disabled = candidate === "organization" && !allowOrganizationScope;
+          return (
+            <label
+              key={candidate}
+              data-enrollment-scope={candidate}
+              data-disabled={disabled ? "true" : "false"}
+              className={cn(
+                "flex items-start gap-2.5 rounded-og-md border border-og-border bg-og-bg px-3 py-2.5",
+                disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
+              )}
+            >
+              <input
+                type="radio"
+                name="enrollment-scope"
+                value={candidate}
+                checked={scope === candidate}
+                disabled={disabled || busy}
+                onChange={() => setScope(candidate)}
+                className="mt-0.5 size-4 accent-og-accent"
+              />
+              <span className="min-w-0">
+                <span className="block text-og-base font-medium text-og-fg">
+                  {scopeCopy[candidate].label}
+                  {disabled ? " · organization admin required" : ""}
+                </span>
+                <span className="block text-og-sm text-og-fg-muted">
+                  {scopeCopy[candidate].body}
+                </span>
+              </span>
+            </label>
+          );
+        })}
+      </fieldset>
+
       {machine.canOfferDisplay ? (
         <label
           data-screen-control-toggle
@@ -206,7 +264,7 @@ export function EnrollmentConsent({
           type="button"
           data-approve
           disabled={busy}
-          onClick={() => onApprove?.(allowScreenControl)}
+          onClick={() => onApprove?.(allowScreenControl, scope)}
           className="flex-1 rounded-og-sm bg-og-status-failed px-3 py-2 text-og-sm font-semibold text-og-accent-fg transition-colors hover:opacity-90 disabled:opacity-50 pointer-coarse:min-h-11"
         >
           {busy ? "Connecting…" : "Grant full access"}

package/src/components/file-browser.tsx

@@ -43,6 +43,12 @@ export type FileBrowserProps = {
   /** Selection callback for the preview pane. */
   onSelectFile?: ((path: string) => void) | undefined;
   selectedPath?: string | undefined;
+  /** Deliberately reveal this selected path by lazily opening every loaded
+   * ancestor and scrolling its row into view. The path is opaque and is never
+   * normalized or re-rooted here. */
+  revealPath?: string | undefined;
+  /** Increment/change to reveal the same path again after a user collapses it. */
+  revealPathRequestId?: string | number | undefined;
   /** Render-prop to theme/replace a row entirely (the Pierre-swap escape hatch). */
   renderNode?: ((node: FileTreeNode, depth: number, expanded: boolean) => ReactNode) | undefined;
   /** Shown when the tree is empty (no files / not loaded yet). */
@@ -96,11 +102,18 @@ function itemKey(item: RenderItem): string {
   }
 }
 
-/** Walk the tree to find a node by path. */
+function pathIsInsideDirectory(path: string, directory: string): boolean {
+  if (!path.startsWith(directory) || path === directory) return false;
+  if (directory.endsWith("/") || directory.endsWith("\\")) return true;
+  const boundary = path[directory.length];
+  return boundary === "/" || boundary === "\\";
+}
+
+/** Walk the authoritative tree without assuming its target-owned separator. */
 function findNode(nodes: FileTreeNode[], path: string): FileTreeNode | undefined {
   for (const node of nodes) {
     if (node.path === path) return node;
-    if (node.kind === "dir" && node.children && path.startsWith(`${node.path}/`)) {
+    if (node.kind === "dir" && node.children && pathIsInsideDirectory(path, node.path)) {
       const hit = findNode(node.children, path);
       if (hit) return hit;
     }
@@ -108,6 +121,34 @@ function findNode(nodes: FileTreeNode[], path: string): FileTreeNode | undefined
   return undefined;
 }
 
+type RevealTrace = {
+  directories: string[];
+  frontier: string | null;
+};
+
+/** Follow only paths already named by the authoritative tree. This deliberately
+ * avoids manufacturing ancestors from a platform-specific path string. */
+function traceRevealPath(nodes: FileTreeNode[], targetPath: string): RevealTrace {
+  for (const node of nodes) {
+    if (node.path === targetPath) {
+      return {
+        directories: node.kind === "dir" ? [node.path] : [],
+        frontier: node.kind === "dir" && node.children === undefined ? node.path : null,
+      };
+    }
+    if (node.kind !== "dir" || !pathIsInsideDirectory(targetPath, node.path)) continue;
+    if (node.children === undefined) {
+      return { directories: [node.path], frontier: node.path };
+    }
+    const child = traceRevealPath(node.children, targetPath);
+    return {
+      directories: [node.path, ...child.directories],
+      frontier: child.frontier,
+    };
+  }
+  return { directories: [], frontier: null };
+}
+
 /** A pending inline-create: a phantom input row under `parent`. */
 type DraftCreate = { parent: string; kind: "file" | "dir" };
 /** A pending inline-rename of an existing node. */
@@ -142,6 +183,8 @@ export function FileBrowser({
   fallback,
   onSelectFile,
   selectedPath,
+  revealPath,
+  revealPathRequestId,
   renderNode,
   emptyState,
   editable = true,
@@ -158,6 +201,15 @@ export function FileBrowser({
   const [pendingDelete, setPendingDelete] = useState<FileTreeNode | null>(null);
   const [busy, setBusy] = useState(false);
   const [coarsePointer, setCoarsePointer] = useState(false);
+  const [revealRequest, setRevealRequest] = useState<{
+    path: string;
+    requestId: string | number;
+  } | null>(null);
+  const handledRevealRequestRef = useRef<{
+    path: string;
+    requestId: string | number;
+  } | null>(null);
+  const attemptedRevealPathsRef = useRef<Set<string>>(new Set());
   const treeId = useId();
   const container = usePortalTokenSource<HTMLDivElement>();
   const containerRef = container.currentRef;
@@ -184,6 +236,23 @@ export function FileBrowser({
     }
   }, []);
 
+  const effectiveRevealRequestId = revealPath ? (revealPathRequestId ?? revealPath) : null;
+  useEffect(() => {
+    if (!revealPath || effectiveRevealRequestId === null) {
+      setRevealRequest(null);
+      return;
+    }
+    const handled = handledRevealRequestRef.current;
+    if (handled?.path === revealPath && handled.requestId === effectiveRevealRequestId) return;
+    handledRevealRequestRef.current = {
+      path: revealPath,
+      requestId: effectiveRevealRequestId,
+    };
+    attemptedRevealPathsRef.current = new Set();
+    setActive(null);
+    setRevealRequest({ path: revealPath, requestId: effectiveRevealRequestId });
+  }, [effectiveRevealRequestId, revealPath]);
+
   // The keyboard cursor: an explicitly-navigated node falls back to the
   // externally-selected file so arrow keys pick up where the preview pane is.
   const cursor = active ?? selectedPath ?? null;
@@ -215,6 +284,34 @@ export function FileBrowser({
     [expand],
   );
 
+  useEffect(() => {
+    if (!revealRequest) return;
+    const trace = traceRevealPath(result.tree, revealRequest.path);
+    if (trace.directories.length > 0) {
+      setExpanded((previous) => {
+        const next = new Set(previous);
+        let changed = false;
+        for (const path of trace.directories) {
+          if (next.has(path)) continue;
+          next.add(path);
+          changed = true;
+        }
+        return changed ? next : previous;
+      });
+    }
+    const frontier = trace.frontier;
+    if (
+      !frontier ||
+      attemptedRevealPathsRef.current.has(frontier) ||
+      loadingPaths.has(frontier) ||
+      result.expandingPaths.has(frontier)
+    ) {
+      return;
+    }
+    attemptedRevealPathsRef.current.add(frontier);
+    void expand(frontier);
+  }, [expand, loadingPaths, result.expandingPaths, result.tree, revealRequest]);
+
   const toggle = useCallback(
     async (node: FileTreeNode) => {
       if (node.kind !== "dir") return;
@@ -800,6 +897,24 @@ export function FileBrowser({
     if (index >= 0) vlistRef.current?.scrollToIndex(index);
   }, [cursor, renderItems]);
 
+  useEffect(() => {
+    if (!revealRequest) return;
+    const index = renderItems.findIndex(
+      (item) => item.type === "node" && item.node.path === revealRequest.path,
+    );
+    if (index < 0) return;
+    if (usesVirtualTree) {
+      vlistRef.current?.scrollToIndex(index);
+    } else {
+      document.getElementById(`${treeId}-item-${index}`)?.scrollIntoView?.({ block: "nearest" });
+    }
+    setRevealRequest((current) =>
+      current?.path === revealRequest.path && current.requestId === revealRequest.requestId
+        ? null
+        : current,
+    );
+  }, [renderItems, revealRequest, treeId, usesVirtualTree]);
+
   return (
     <div className={cn("flex min-h-0 min-w-0 flex-col", className)}>
       {showToolbar && (

package/src/components/human-input-form.tsx

@@ -40,7 +40,7 @@ export const defaultHumanInputFormMessages: HumanInputFormMessages = {
   title: "Input required",
   /** Multi-question chrome has no default subtitle; hosts may still override. */
   description: "",
-  submit: "Continue",
+  submit: "Send answers",
   skip: "Skip",
   submitting: "Submitting…",
   other: "Other",
@@ -87,7 +87,15 @@ export type HumanInputFormProps = {
  * options, sticky ask/submit chrome. Hosts can replace title/description or
  * use `useHumanInputRequests` headlessly.
  */
-export function HumanInputForm({
+export function HumanInputForm(props: HumanInputFormProps) {
+  // The pending-request read model is refreshed after session events and
+  // returns newly allocated question arrays for the same durable request.
+  // Key the state owner by that request's lifecycle identity so reconciliation
+  // cannot erase an answer that the operator is still typing.
+  return <HumanInputRequestForm key={props.request.id} {...props} />;
+}
+
+function HumanInputRequestForm({
   request,
   onSubmit,
   submitting = false,
@@ -135,16 +143,6 @@ export function HumanInputForm({
   const submissionGeneration = useRef(0);
   const busy = submitting || submittingInternally;
 
-  useEffect(() => {
-    submissionGeneration.current += 1;
-    submissionInFlight.current = false;
-    setDrafts(initialDrafts(request.questions));
-    setValidationErrors({});
-    setSubmissionError(null);
-    setSubmittingInternally(false);
-    setCollapsed(defaultCollapsed);
-  }, [request.id, request.questions, defaultCollapsed]);
-
   useEffect(() => {
     if (collapsed) {
       setOverflowBelow(false);
@@ -369,6 +367,8 @@ export function HumanInputForm({
                   <div key={question.id} data-human-input-question={question.id}>
                     <QuestionControls
                       question={question}
+                      questionNumber={null}
+                      labelledBy={titleId}
                       draft={drafts[question.id] ?? emptyDraft()}
                       fieldId={`${formId}-${index}`}
                       error={validationErrors[question.id]}
@@ -391,6 +391,8 @@ export function HumanInputForm({
                 >
                   <QuestionControls
                     question={question}
+                    questionNumber={index + 1}
+                    labelledBy={undefined}
                     draft={drafts[question.id] ?? emptyDraft()}
                     fieldId={`${formId}-${index}`}
                     error={validationErrors[question.id]}
@@ -443,7 +445,7 @@ export function HumanInputForm({
         <button
           type="submit"
           disabled={busy}
-          className="inline-flex min-h-9 items-center rounded-og-md bg-og-accent px-3 py-1.5 text-og-sm font-medium text-og-accent-fg transition-colors hover:bg-og-accent-strong disabled:opacity-50"
+          className="inline-flex min-h-9 items-center rounded-og-md bg-og-accent-deep px-3 py-1.5 text-og-sm font-medium text-og-accent-fg transition hover:brightness-110 disabled:opacity-50"
         >
           {busy ? messages.submitting : resolvedSubmitLabel}
         </button>
@@ -454,6 +456,8 @@ export function HumanInputForm({
 
 function QuestionControls({
   question,
+  questionNumber,
+  labelledBy,
   draft,
   fieldId,
   error,
@@ -466,6 +470,8 @@ function QuestionControls({
   onUpdate,
 }: {
   question: HumanInputQuestion;
+  questionNumber: number | null;
+  labelledBy: string | undefined;
   draft: HumanInputAnswerDraft;
   fieldId: string;
   error: string | undefined;
@@ -479,6 +485,13 @@ function QuestionControls({
 }) {
   const errorId = `${fieldId}-error`;
   const helpId = `${fieldId}-help`;
+  const labelId = `${fieldId}-label`;
+  const promptId = `${fieldId}-prompt`;
+  const otherChoiceId = `${fieldId}-other-choice`;
+  const otherLabelId = `${fieldId}-other-label`;
+  const otherTextId = `${fieldId}-other-text`;
+  const visibleLabel = question.label ?? question.prompt;
+  const controlLabelId = showPromptChrome ? labelId : labelledBy;
   const hint =
     question.kind === "multi_select"
       ? messages.selectionHint(
@@ -488,6 +501,7 @@ function QuestionControls({
       : null;
   const describedBy =
     [
+      question.label && showPromptChrome ? promptId : null,
       question.helpText && showPromptChrome ? helpId : null,
       hint ? `${fieldId}-hint` : null,
       error ? errorId : null,
@@ -500,10 +514,15 @@ function QuestionControls({
         <>
           <div className="flex flex-wrap items-baseline gap-x-2">
             <label
+              id={labelId}
               htmlFor={question.kind === "text" ? fieldId : undefined}
               className="text-og-sm font-medium text-og-fg"
             >
-              {question.label ?? question.prompt}
+              {questionNumber === null ? null : (
+                <span className="mr-1.5 tabular-nums text-og-fg-muted">{questionNumber}.</span>
+              )}
+              {questionNumber === null ? null : " "}
+              {visibleLabel}
               {question.required && !allowSkip ? (
                 <span aria-hidden className="ml-1 text-og-status-failed">
                   *
@@ -515,7 +534,11 @@ function QuestionControls({
               ) : null}
             </label>
           </div>
-          {question.label ? <p className="text-og-sm text-og-fg-muted">{question.prompt}</p> : null}
+          {question.label ? (
+            <p id={promptId} className="text-og-sm text-og-fg-muted">
+              {question.prompt}
+            </p>
+          ) : null}
           {question.helpText ? (
             <p id={helpId} className="text-og-xs text-og-fg-subtle">
               {question.helpText}
@@ -556,6 +579,7 @@ function QuestionControls({
             }))
           }
           aria-invalid={Boolean(error)}
+          aria-labelledby={controlLabelId}
           aria-describedby={describedBy}
           autoFocus={autoFocus}
           rows={2}
@@ -564,6 +588,7 @@ function QuestionControls({
       ) : (
         <div
           role={question.kind === "single_select" ? "radiogroup" : "group"}
+          aria-labelledby={controlLabelId}
           aria-describedby={describedBy}
           className="flex flex-col gap-0.5"
         >
@@ -613,49 +638,59 @@ function QuestionControls({
               </label>
             );
           })}
-          {question.allowOther ? (
-            <label
-              className={cn(
-                "flex items-start gap-2.5 rounded-og-md px-2.5 py-2 transition-colors",
-                draft.otherSelected
-                  ? "bg-og-status-waiting/12 text-og-fg"
-                  : "text-og-fg hover:bg-og-surface-1/80",
-              )}
-            >
+          <div
+            className={cn(
+              "flex items-start gap-2.5 rounded-og-md px-2.5 py-2 transition-colors",
+              draft.otherSelected
+                ? "bg-og-status-waiting/12 text-og-fg"
+                : "text-og-fg hover:bg-og-surface-1/80",
+            )}
+          >
+            <input
+              id={otherChoiceId}
+              type={question.kind === "single_select" ? "radio" : "checkbox"}
+              name={question.kind === "single_select" ? fieldId : undefined}
+              aria-labelledby={otherLabelId}
+              checked={draft.otherSelected}
+              autoFocus={autoFocus && firstOption && question.options.length === 0}
+              onChange={(event) =>
+                onUpdate((current) => ({
+                  ...current,
+                  otherSelected: event.target.checked,
+                  ...(question.kind === "single_select" && event.target.checked
+                    ? { values: [] }
+                    : {}),
+                }))
+              }
+              className="mt-2 accent-og-accent"
+            />
+            <span className="min-w-0 flex-1">
+              <label
+                id={otherLabelId}
+                htmlFor={otherChoiceId}
+                className="block text-og-sm font-medium"
+              >
+                {messages.other}
+              </label>
+              <label htmlFor={otherTextId} className="sr-only">
+                {messages.other} answer for {visibleLabel}
+              </label>
               <input
-                type={question.kind === "single_select" ? "radio" : "checkbox"}
-                name={question.kind === "single_select" ? fieldId : undefined}
-                checked={draft.otherSelected}
-                autoFocus={autoFocus && firstOption && question.options.length === 0}
+                id={otherTextId}
+                type="text"
+                value={draft.other}
+                disabled={!draft.otherSelected || busy}
+                placeholder="Type a value…"
                 onChange={(event) =>
                   onUpdate((current) => ({
                     ...current,
-                    otherSelected: event.target.checked,
-                    ...(question.kind === "single_select" && event.target.checked
-                      ? { values: [] }
-                      : {}),
+                    other: event.target.value,
                   }))
                 }
-                className="mt-2 accent-og-accent"
+                className="mt-1.5 w-full rounded-og-sm border border-og-border bg-og-surface-1 px-2 py-1.5 text-og-sm text-og-fg outline-hidden focus:border-og-accent disabled:opacity-50"
               />
-              <span className="min-w-0 flex-1">
-                <span className="block text-og-sm font-medium">{messages.other}</span>
-                <input
-                  type="text"
-                  value={draft.other}
-                  disabled={!draft.otherSelected || busy}
-                  placeholder="Type a value…"
-                  onChange={(event) =>
-                    onUpdate((current) => ({
-                      ...current,
-                      other: event.target.value,
-                    }))
-                  }
-                  className="mt-1.5 w-full rounded-og-sm border border-og-border bg-og-surface-1 px-2 py-1.5 text-og-sm text-og-fg outline-hidden focus:border-og-accent disabled:opacity-50"
-                />
-              </span>
-            </label>
-          ) : null}
+            </span>
+          </div>
         </div>
       )}
       {error ? (
@@ -678,12 +713,13 @@ export function answersFromDrafts(
   for (const question of questions) {
     const draft = drafts[question.id] ?? emptyDraft();
     const values = question.kind === "text" ? draft.values.filter(Boolean) : draft.values;
-    const other = draft.otherSelected ? draft.other.trim() : "";
-    const supplied = values.length + (other ? 1 : 0);
+    const other = draft.otherSelected ? draft.other : "";
+    const hasOther = Boolean(other.trim());
+    const supplied = values.length + (hasOther ? 1 : 0);
 
     // Other-selected-but-empty must win over generic "required" — otherwise the
     // user sees the wrong diagnosis next to a clearly selected control.
-    if (question.kind !== "text" && draft.otherSelected && !other) {
+    if (question.kind !== "text" && draft.otherSelected && !hasOther) {
       errors[question.id] = messages.otherRequired;
       continue;
     }
@@ -708,7 +744,7 @@ export function answersFromDrafts(
       answers.push({
         questionId: question.id,
         values,
-        ...(other ? { other } : {}),
+        ...(hasOther ? { other } : {}),
       });
     }
   }

package/src/components/human-input-surface.tsx

@@ -20,7 +20,7 @@ export type HumanInputSurfaceProps = {
 
 /**
  * One decision shell for pending structured human-input requests. Parallel
- * freezes are shown one at a time (oldest first) as “N of M”; Continue/Skip
+ * freezes are shown one at a time (oldest first) as “N of M”; Send answers/Skip
  * settles the active request and the next remaining set advances automatically
  * when the authoritative pending list updates.
  */