npm - @brainpilot/web - Versions diffs - 0.0.7 → 0.0.8 - Mend

@brainpilot/web 0.0.7 → 0.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/dist/assets/{index-j3rGyO6m.js → index-162Pskp8.js} +104 -111
package/dist/index.html +1 -1
package/package.json +2 -2
package/src/__tests__/composerSendTools.test.tsx +37 -0
package/src/__tests__/sidebarResize.test.ts +46 -0
package/src/components/chat/ComposerSendTools.tsx +31 -0
package/src/components/chat/PromptComposer.tsx +65 -134
package/src/components/shell/DesktopShell.tsx +15 -8
package/src/components/shell/sidebarResize.ts +49 -0

package/dist/index.html CHANGED Viewed

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="color-scheme" content="light dark" />
     <title>BrainPilot</title>
-    <script type="module" crossorigin src="/assets/index-j3rGyO6m.js"></script>
+    <script type="module" crossorigin src="/assets/index-162Pskp8.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-DWOsU22G.css">
   </head>
   <body>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@brainpilot/web",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "engines": {
     "node": ">=22"
   },
@@ -31,7 +31,7 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "@brainpilot/protocol": "^0.0.7",
+    "@brainpilot/protocol": "^0.0.8",
     "@fontsource-variable/geist": "^5.2.9",
     "@fontsource-variable/geist-mono": "^5.2.8",
     "@types/react": "^18.3.12",

package/src/__tests__/composerSendTools.test.tsx ADDED Viewed

@@ -0,0 +1,37 @@
+import { describe, it, expect } from "vitest";
+import { renderToStaticMarkup } from "react-dom/server";
+import { ComposerSendTools } from "../components/chat/ComposerSendTools";
+// No jsdom/@testing-library in the monorepo, so we render the presentational
+// send cluster to static markup and assert on the output. This guards #160:
+// the file-upload (Paperclip) button + hidden <input type="file"> were removed
+// from the composer's send cluster because upload was never a supported
+// feature. Anyone re-adding an upload control here makes this test fail.
+describe("ComposerSendTools — #160 no file-upload control", () => {
+  const markup = () =>
+    renderToStaticMarkup(
+      <ComposerSendTools
+        modelSelect={<div className="model-select">model</div>}
+        sendButton={<button type="submit">send</button>}
+      />,
+    );
+  it("renders the passed-in model picker and send button", () => {
+    const html = markup();
+    expect(html).toContain("composer__send-tools");
+    expect(html).toContain("model-select");
+    expect(html).toContain("send");
+  });
+  it("renders no file input (upload removed)", () => {
+    const html = markup();
+    expect(html).not.toContain('type="file"');
+  });
+  it("renders only the two nodes it is given — no extra upload button", () => {
+    // The cluster owns no controls of its own; it only lays out what the parent
+    // passes. A stray <input>/upload button would mean upload crept back in.
+    const html = markup();
+    expect(html).not.toContain("<input");
+  });
+});

package/src/__tests__/sidebarResize.test.ts ADDED Viewed

@@ -0,0 +1,46 @@
+import { describe, it, expect } from "vitest";
+import {
+  resolveResize,
+  MIN_SIDEBAR_WIDTH,
+  MAX_SIDEBAR_WIDTH,
+  COLLAPSE_THRESHOLD,
+  DEFAULT_SIDEBAR_WIDTH,
+} from "../components/shell/sidebarResize";
+// #159 — drag-to-collapse geometry. The monorepo has no jsdom, so the real
+// pointer-drag is exercised by DesktopShell at runtime; here we pin the pure
+// decision: when does a drag collapse the rail, and how is width clamped.
+describe("resolveResize — #159 drag-to-collapse", () => {
+  it("collapses when dragged at/below the collapse threshold", () => {
+    expect(resolveResize(COLLAPSE_THRESHOLD).collapse).toBe(true);
+    expect(resolveResize(COLLAPSE_THRESHOLD - 1).collapse).toBe(true);
+    expect(resolveResize(0).collapse).toBe(true);
+    expect(resolveResize(-50).collapse).toBe(true); // dragged past the left edge
+  });
+  it("does NOT collapse between the threshold and the minimum (buffer zone)", () => {
+    // Sitting at the min width is a normal narrow drag, not a collapse intent.
+    expect(resolveResize(MIN_SIDEBAR_WIDTH).collapse).toBe(false);
+    expect(resolveResize(COLLAPSE_THRESHOLD + 1).collapse).toBe(false);
+    expect(resolveResize(200).collapse).toBe(false);
+  });
+  it("clamps expanded width into [MIN, MAX]", () => {
+    // Above threshold but below min → clamp up to min (still expanded).
+    expect(resolveResize(190)).toEqual({ width: MIN_SIDEBAR_WIDTH, collapse: false });
+    // In range → passthrough.
+    expect(resolveResize(300)).toEqual({ width: 300, collapse: false });
+    // Above max → clamp down.
+    expect(resolveResize(999)).toEqual({ width: MAX_SIDEBAR_WIDTH, collapse: false });
+  });
+  it("threshold sits below the minimum so a min-width drag never collapses", () => {
+    expect(COLLAPSE_THRESHOLD).toBeLessThan(MIN_SIDEBAR_WIDTH);
+  });
+  it("default restore width is a valid expanded width", () => {
+    expect(DEFAULT_SIDEBAR_WIDTH).toBeGreaterThanOrEqual(MIN_SIDEBAR_WIDTH);
+    expect(DEFAULT_SIDEBAR_WIDTH).toBeLessThanOrEqual(MAX_SIDEBAR_WIDTH);
+    expect(resolveResize(DEFAULT_SIDEBAR_WIDTH).collapse).toBe(false);
+  });
+});

package/src/components/chat/ComposerSendTools.tsx ADDED Viewed

@@ -0,0 +1,31 @@
+import type { ReactNode } from "react";
+/**
+ * ComposerSendTools — presentational layout for the composer's right-hand send
+ * cluster (model picker + send button). Extracted from PromptComposer so the
+ * cluster can be rendered in isolation under react-dom/server (the monorepo has
+ * no jsdom/@testing-library). The stateful pieces — the model `CustomSelect`
+ * with its async onChange, the `ComposerSendButton` — are built by the parent
+ * and passed in as nodes; this component owns only the wrapper markup.
+ *
+ * #160: the file-upload (Paperclip) button used to live here and was removed —
+ * file upload was never a supported feature (it depended on a sandbox that the
+ * local non-Docker mode never provides). ComposerSendTools.test.tsx asserts the
+ * rendered cluster contains no file input, guarding against it creeping back.
+ */
+export function ComposerSendTools({
+  modelSelect,
+  sendButton,
+}: {
+  /** The model picker node (parent builds the stateful CustomSelect). */
+  modelSelect: ReactNode;
+  /** The send button node. */
+  sendButton: ReactNode;
+}) {
+  return (
+    <div className="composer__send-tools">
+      {modelSelect}
+      {sendButton}
+    </div>
+  );
+}

package/src/components/chat/PromptComposer.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Bot, Paperclip, Square, X } from "lucide-react";
+import { Bot, Square } from "lucide-react";
 import { FormEvent, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import type { ProviderProfile } from "../../contracts/backend";
 import { useSandbox } from "../../contexts/SandboxContext";
@@ -13,6 +13,7 @@ import { CustomSelect } from "../primitives/CustomSelect";
 import { IconButton } from "../primitives/IconButton";
 import { ComposerInput } from "./ComposerInput";
 import { ComposerSendButton } from "./ComposerSendButton";
+import { ComposerSendTools } from "./ComposerSendTools";
 import { MessageStream } from "./MessageStream";
 export function PromptComposer() {
@@ -33,11 +34,6 @@ export function PromptComposer() {
   const commandsRef = useRef<HTMLDivElement | null>(null);
   const menuRef = useRef<HTMLDivElement | null>(null);
   const [menuPos, setMenuPos] = useState<{ top: number; left: number } | null>(null);
-  // #47: file upload — names of files uploaded into the workspace this turn,
-  // shown as removable chips and announced to the agent on send.
-  const fileInputRef = useRef<HTMLInputElement | null>(null);
-  const [attachments, setAttachments] = useState<string[]>([]);
-  const [uploading, setUploading] = useState(false);
   const { status: sandboxStatus, currentSandbox, reloadConfig } = useSandbox();
   const [composerError, setComposerError] = useState<string | null>(null);
   const { currentSession, messages, isSending, error, sendPrompt, isConnected, isDraft, agents, runActive, agentFilters, interruptCurrent, respondToInput, messageFilters } = useSessions();
@@ -224,50 +220,17 @@ export function PromptComposer() {
       return;
     }
     draftStore.set(sessionId, "");
-    // #47: if files were uploaded this turn, prepend a notice so the agent knows
-    // they exist in its workspace and can `read` them. Cleared after send.
-    const notice =
-      attachments.length > 0 ? `${t("chat.upload.notice", { names: attachments.join(", ") })}\n\n` : "";
-    const sentAttachments = attachments;
-    if (attachments.length > 0) setAttachments([]);
     // Carry the chosen provider/model so a freshly-created session records its
     // per-session selection (no-op for an already-running session).
-    const ok = await sendPrompt(`${notice}${content}`, {
+    const ok = await sendPrompt(content, {
       providerId: activeProvider?.id,
       modelId: selectedModel || undefined,
     });
     // #106: a failed/timed-out send must not silently eat the user's input.
-    // Restore the draft (and attachment chips) so they can retry without
-    // retyping. Only restore if they haven't already started typing again.
-    if (!ok) {
-      if (draftStore.get(sessionId).trim().length === 0) {
-        draftStore.set(sessionId, content);
-      }
-      if (sentAttachments.length > 0) {
-        setAttachments((prev) => (prev.length === 0 ? sentAttachments : prev));
-      }
-    }
-  };
-  // #47: upload the chosen files into the session workspace, then track their
-  // names as chips. Uses the current sandbox/session id (single-user: same id).
-  const handleFilesChosen = async (files: FileList | null) => {
-    if (!files || files.length === 0) return;
-    const sandboxId = currentSandbox?.id;
-    if (!sandboxId) return;
-    setUploading(true);
-    setComposerError(null);
-    try {
-      for (const file of Array.from(files)) {
-        await api.sandbox.uploadFile(sandboxId, file.name, file);
-        setAttachments((prev) => (prev.includes(file.name) ? prev : [...prev, file.name]));
-      }
-    } catch (e) {
-      const msg = e instanceof Error ? e.message : String(e);
-      setComposerError(t("chat.upload.failed", { msg }));
-    } finally {
-      setUploading(false);
-      if (fileInputRef.current) fileInputRef.current.value = ""; // allow re-selecting the same file
+    // Restore the draft so they can retry without retyping. Only restore if they
+    // haven't already started typing again.
+    if (!ok && draftStore.get(sessionId).trim().length === 0) {
+      draftStore.set(sessionId, content);
     }
   };
@@ -325,26 +288,6 @@ export function PromptComposer() {
             ariaLabel={t("chat.srAsk")}
           />
-          {attachments.length > 0 || uploading ? (
-            <div className="composer__attachments" aria-label={t("chat.aria.attachFile")}>
-              {attachments.map((name) => (
-                <span className="composer__chip" key={name}>
-                  <Paperclip size={12} />
-                  <span className="composer__chip-name">{name}</span>
-                  <button
-                    type="button"
-                    className="composer__chip-remove"
-                    aria-label={t("chat.aria.removeAttachment")}
-                    onClick={() => setAttachments((prev) => prev.filter((n) => n !== name))}
-                  >
-                    <X size={12} />
-                  </button>
-                </span>
-              ))}
-              {uploading ? <span className="composer__chip composer__chip--pending">{t("chat.upload.uploading")}</span> : null}
-            </div>
-          ) : null}
           <div className="composer__toolbar">
             <div className="composer__tools">
               {/*
@@ -389,76 +332,64 @@ export function PromptComposer() {
               )}
             </div>
-            <div className="composer__send-tools">
-              <CustomSelect
-                ariaLabel={t("chat.modelPlaceholder")}
-                className="model-select"
-                disabled={!currentSandbox || !activeProvider || activeProvider.models.length === 0}
-                onChange={async (model) => {
-                  setSelectedModel(model);
-                  setComposerError(null);
-                  try {
-                    await api.settings.update({ model });
-                  } catch (e) {
-                    const msg = e instanceof Error ? e.message : String(e);
-                    console.error("Failed to save model selection", e);
-                    setComposerError(t("chat.error.saveModel", { msg }));
-                    return;
-                  }
-                  try {
-                    await reloadConfig();
-                  } catch (e) {
-                    const msg = e instanceof Error ? e.message : String(e);
-                    console.error("Failed to reload config after model change", e);
-                    setComposerError(t("chat.error.reloadConfig", { msg }));
-                  }
-                }}
-                options={activeProvider?.models.map((model) => {
-                  const mh = activeProvider.modelHealth?.find((m) => m.model === model);
-                  const status = mh?.status ?? "unknown";
-                  return {
-                    value: model,
-                    label: model,
-                    indicator: (
-                      <span
-                        className={`model-status-dot model-status-dot--${status}`}
-                        title={mh?.error ?? status}
-                      />
-                    ),
-                  };
-                }) ?? []}
-                placeholder={t("chat.modelPlaceholder")}
-                title={activeProvider ? t("chat.providerTitle", { name: activeProvider.name }) : t("chat.noActiveProvider")}
-                value={selectedModel}
-              />
-              {/*
-                issue #47: 语音输入 (Mic) has no capture/permission flow yet —
-                hidden until implemented. The chat.aria.voice i18n key is kept.
-                Re-add the Mic lucide import when restoring this.
-              <IconButton label={t("chat.aria.voice")}>
-                <Mic size={17} />
-              </IconButton>
-              */}
-              <input
-                ref={fileInputRef}
-                type="file"
-                multiple
-                style={{ display: "none" }}
-                onChange={(e) => void handleFilesChosen(e.target.files)}
-              />
-              <IconButton
-                label={t("chat.aria.attachFile")}
-                onClick={() => fileInputRef.current?.click()}
-                disabled={uploading || !currentSandbox}
-              >
-                <Paperclip size={17} />
-              </IconButton>
-              <ComposerSendButton
-                sessionId={sessionId}
-                canSend={canSend}
-                label={t("chat.aria.send")}
-              />
-            </div>
+            {/*
+              issue #47: 语音输入 (Mic) had no capture/permission flow and was
+              never shipped; #160 removed the file-upload (Paperclip) button that
+              also lived in this cluster (upload was never a supported feature).
+              The send cluster is now just the model picker + send button.
+            */}
+            <ComposerSendTools
+              modelSelect={
+                <CustomSelect
+                  ariaLabel={t("chat.modelPlaceholder")}
+                  className="model-select"
+                  disabled={!currentSandbox || !activeProvider || activeProvider.models.length === 0}
+                  onChange={async (model) => {
+                    setSelectedModel(model);
+                    setComposerError(null);
+                    try {
+                      await api.settings.update({ model });
+                    } catch (e) {
+                      const msg = e instanceof Error ? e.message : String(e);
+                      console.error("Failed to save model selection", e);
+                      setComposerError(t("chat.error.saveModel", { msg }));
+                      return;
+                    }
+                    try {
+                      await reloadConfig();
+                    } catch (e) {
+                      const msg = e instanceof Error ? e.message : String(e);
+                      console.error("Failed to reload config after model change", e);
+                      setComposerError(t("chat.error.reloadConfig", { msg }));
+                    }
+                  }}
+                  options={activeProvider?.models.map((model) => {
+                    const mh = activeProvider.modelHealth?.find((m) => m.model === model);
+                    const status = mh?.status ?? "unknown";
+                    return {
+                      value: model,
+                      label: model,
+                      indicator: (
+                        <span
+                          className={`model-status-dot model-status-dot--${status}`}
+                          title={mh?.error ?? status}
+                        />
+                      ),
+                    };
+                  }) ?? []}
+                  placeholder={t("chat.modelPlaceholder")}
+                  title={activeProvider ? t("chat.providerTitle", { name: activeProvider.name }) : t("chat.noActiveProvider")}
+                  value={selectedModel}
+                />
+              }
+              sendButton={
+                <ComposerSendButton
+                  sessionId={sessionId}
+                  canSend={canSend}
+                  label={t("chat.aria.send")}
+                />
+              }
+            />
           </div>
         </form>

package/src/components/shell/DesktopShell.tsx CHANGED Viewed

@@ -17,9 +17,7 @@ import { SandboxStatus } from "./SandboxStatus";
 import { Sidebar } from "../sidebar/Sidebar";
 import { DiskQuotaWarningDialog } from "../quota/DiskQuotaWarningDialog";
 import { DiskQuotaCriticalDialog } from "../quota/DiskQuotaCriticalDialog";
-const MIN_SIDEBAR_WIDTH = 220;
-const MAX_SIDEBAR_WIDTH = 420;
+import { DEFAULT_SIDEBAR_WIDTH, resolveResize } from "./sidebarResize";
 export function DesktopShell() {
   const { isAuthReady } = useAuth();
@@ -87,12 +85,21 @@ export function DesktopShell() {
         return;
       }
+      // #159 — drag the edge left past the collapse threshold and the rail snaps
+      // to the icon rail; otherwise apply the clamped expanded width. resolveResize
+      // owns the geometry (pure + unit-tested in sidebarResize.test.ts).
       const delta = event.clientX - sidebarResizeRef.current.pointerX;
-      const nextWidth = Math.max(
-        MIN_SIDEBAR_WIDTH,
-        Math.min(MAX_SIDEBAR_WIDTH, sidebarResizeRef.current.width + delta),
-      );
-      setSidebarWidth(nextWidth);
+      const outcome = resolveResize(sidebarResizeRef.current.width + delta);
+      if (outcome.collapse) {
+        setUserCollapsed(true);
+        sidebarResizeRef.current = null;
+        setIsSidebarResizing(false);
+        // Restore a sensible width so expanding again (toggle / drag) isn't stuck
+        // at the collapsed remnant.
+        setSidebarWidth(DEFAULT_SIDEBAR_WIDTH);
+        return;
+      }
+      setSidebarWidth(outcome.width);
     };
     const handlePointerUp = () => {

package/src/components/shell/sidebarResize.ts ADDED Viewed

@@ -0,0 +1,49 @@
+/**
+ * sidebarResize.ts — pure geometry for the sidebar resize→collapse interaction
+ * (#159). Kept free of React so it can be unit-tested without jsdom (the
+ * monorepo has no jsdom/@testing-library; DesktopShell drives the real
+ * pointer events, these helpers decide the numbers).
+ *
+ * Behaviour: while dragging the sidebar's right edge leftward, once the would-be
+ * width crosses a collapse threshold that sits *below* the normal minimum, the
+ * rail snaps to the collapsed icon rail (rather than refusing to shrink past the
+ * minimum, which is what made drag-to-collapse impossible before #159).
+ */
+/** Normal drag bounds — the sidebar clamps here while it stays expanded. */
+export const MIN_SIDEBAR_WIDTH = 220;
+export const MAX_SIDEBAR_WIDTH = 420;
+/**
+ * Drag the edge below this (well under MIN, giving a deliberate "drag past the
+ * min a bit more" buffer so a normal min-width drag doesn't accidentally
+ * collapse) and the rail snaps shut.
+ */
+export const COLLAPSE_THRESHOLD = 160;
+/** Width the rail restores to when it expands again (matches the default). */
+export const DEFAULT_SIDEBAR_WIDTH = 268;
+export interface ResizeOutcome {
+  /** Clamped width to apply while expanded (ignored when collapse is true). */
+  width: number;
+  /** True when the drag has gone narrow enough to collapse to the icon rail. */
+  collapse: boolean;
+}
+/**
+ * Given the drag's raw proposed width (start width + pointer delta), decide
+ * whether to collapse and, if not, the clamped expanded width.
+ *
+ * - proposed <= COLLAPSE_THRESHOLD → collapse.
+ * - otherwise clamp into [MIN, MAX].
+ */
+export function resolveResize(proposedWidth: number): ResizeOutcome {
+  if (proposedWidth <= COLLAPSE_THRESHOLD) {
+    return { width: MIN_SIDEBAR_WIDTH, collapse: true };
+  }
+  return {
+    width: Math.max(MIN_SIDEBAR_WIDTH, Math.min(MAX_SIDEBAR_WIDTH, proposedWidth)),
+    collapse: false,
+  };
+}