@cairnvibe/sdk 0.2.2 → 0.2.4

package/dist/index.js

@@ -22,6 +22,21 @@ function Copilot({ endpoint = "/api/copilot", registeredActions = [], onDo, repo
     // completion, so the exchange stays paired on screen the way a caption
     // track shows the current line, not a scrolling transcript.
     const [lastQuestion, setLastQuestion] = (0, react_1.useState)(null);
+    // Persistent scroll-back log: previous exchanges get archived here (see
+    // archiveCurrentExchange below) the instant a new one starts, so they
+    // stay visible — scrolled up, not gone — instead of the old behavior of
+    // silently overwriting `answer`/`caption` with nothing left to look back
+    // at once the next question began.
+    const [transcript, setTranscript] = (0, react_1.useState)([]);
+    const transcriptIdRef = (0, react_1.useRef)(0);
+    const panelRef = (0, react_1.useRef)(null);
+    // Mirror the values archiveCurrentExchange needs to read from inside
+    // stale closures (the realtime WebSocket's onmessage handler is created
+    // once per call and doesn't see later renders' state directly — same
+    // reason the rest of the realtime path already uses refs like
+    // rtStateRef instead of reading state).
+    const userCaptionRef = (0, react_1.useRef)("");
+    const answerRef = (0, react_1.useRef)(null);
     const [rtMicMuted, setRtMicMuted] = (0, react_1.useState)(false);
     const [rtSpeakerMuted, setRtSpeakerMuted] = (0, react_1.useState)(false);
     // Set while a "tour" verb's steps are being narrated/highlighted one at a
@@ -99,6 +114,37 @@ function Copilot({ endpoint = "/api/copilot", registeredActions = [], onDo, repo
     // slot falls back to the last typed question.
     const tourChip = touring ? caption : "";
     const userCaption = !touring && (recording || realtimeActive) ? caption : lastQuestion ?? "";
+    (0, react_1.useEffect)(() => {
+        userCaptionRef.current = userCaption;
+    }, [userCaption]);
+    (0, react_1.useEffect)(() => {
+        answerRef.current = answer;
+    }, [answer]);
+    // Auto-scroll to the newest content whenever the transcript grows or the
+    // live (not-yet-archived) bubble's text changes.
+    (0, react_1.useEffect)(() => {
+        const el = panelRef.current;
+        if (el)
+            el.scrollTop = el.scrollHeight;
+    }, [transcript, answer, userCaption, busy]);
+    /**
+     * Moves whatever's currently showing as the "live" exchange into the
+     * permanent transcript log, right before it's about to be overwritten by
+     * a new turn — called at the start of ask(), at the start of each
+     * realtime "final" transcript, and at the start of a tour/tour step. Its
+     * effect is exactly "previous goes up, recent shows": the outgoing
+     * text becomes a fixed history entry the instant the incoming one starts
+     * replacing it, instead of just vanishing.
+     */
+    function archiveText(role, text) {
+        if (!text)
+            return;
+        setTranscript((prev) => [...prev, { id: transcriptIdRef.current++, role, text }]);
+    }
+    function archiveCurrentExchange() {
+        archiveText("user", userCaptionRef.current);
+        archiveText("agent", answerRef.current ?? "");
+    }
     function setRtStatus(next) {
         rtStateRef.current = next;
         setStatus(next);
@@ -147,6 +193,7 @@ function Copilot({ endpoint = "/api/copilot", registeredActions = [], onDo, repo
         touringRef.current = true;
         if (wasRealtimeListening)
             setRtStatus("rt-speaking");
+        archiveCurrentExchange();
         setAnswer(null);
         // Tracked locally rather than reading the component's `pathname` —
         // that's only current as of this render, and a step below can navigate
@@ -159,6 +206,10 @@ function Copilot({ endpoint = "/api/copilot", registeredActions = [], onDo, repo
                 if (tourGenerationRef.current !== myGeneration)
                     return; // superseded — e.g. widget closed or a new question came in
                 const step = steps[i];
+                // Move the previous step's narration into history before this one replaces it —
+                // agent-only, since the tour's triggering question was already archived once, above.
+                if (i > 0)
+                    archiveText("agent", answerRef.current ?? "");
                 setTourStep({ index: i, total: steps.length });
                 setCaption(`Step ${i + 1} of ${steps.length}`);
                 setAnswer(step.text);
@@ -214,6 +265,7 @@ function Copilot({ endpoint = "/api/copilot", registeredActions = [], onDo, repo
     // Typed / push-to-talk question flow
     // ---------------------------------------------------------------------
     async function ask(q) {
+        archiveCurrentExchange();
         setStatus("asking");
         setAnswer(null);
         setLastQuestion(q);
@@ -410,6 +462,7 @@ function Copilot({ endpoint = "/api/copilot", registeredActions = [], onDo, repo
         if (!realtimeUrl || !micSupported || realtimeActive || rtStartingRef.current)
             return;
         rtStartingRef.current = true;
+        archiveCurrentExchange(); // preserve whatever typed/mic exchange preceded switching into a live call
         setAnswer(null);
         setCaption("");
         setRtStatus("rt-connecting");
@@ -553,6 +606,7 @@ function Copilot({ endpoint = "/api/copilot", registeredActions = [], onDo, repo
                     setCaption(msg.text);
                 }
                 else if (msg.type === "final") {
+                    archiveCurrentExchange(); // the previous turn's pair is complete — move it into history before this one starts overwriting caption/answer
                     setCaption(msg.text);
                     setRtStatus("rt-thinking");
                     armThinkingWatchdog();
@@ -683,7 +737,7 @@ function Copilot({ endpoint = "/api/copilot", registeredActions = [], onDo, repo
         "rt-thinking": "Thinking…",
         "rt-speaking": "Speaking…",
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("style", { suppressHydrationWarning: true, dangerouslySetInnerHTML: { __html: COPILOT_STYLES } }), (0, jsx_runtime_1.jsx)("button", { className: status === "rt-speaking" ? "cairn-fab cairn-fab-speaking" : "cairn-fab", "aria-label": open ? `Close ${persona} help` : `Open ${persona} help`, onClick: () => setOpen((v) => !v), children: open ? (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 22 }) : (0, jsx_runtime_1.jsx)(CairnMark, {}) }), open && ((0, jsx_runtime_1.jsxs)("div", { className: "cairn-panel", role: "dialog", "aria-label": `${persona} help panel`, children: [(userCaption || answer || busy) && ((0, jsx_runtime_1.jsxs)("div", { className: "cairn-stack", children: [userCaption && ((0, jsx_runtime_1.jsx)("div", { className: "cairn-bubble cairn-bubble-user", children: userCaption }, `u-${userCaption}`)), (answer || busy) && ((0, jsx_runtime_1.jsxs)("div", { className: "cairn-bubble cairn-bubble-agent", children: [tourChip && (0, jsx_runtime_1.jsx)("span", { className: "cairn-chip", children: tourChip }), answer ? ((0, jsx_runtime_1.jsx)("span", { className: "cairn-bubble-text", children: renderCaptionWords(answer) })) : ((0, jsx_runtime_1.jsxs)("span", { className: "cairn-thinking", "aria-label": "Thinking", children: [(0, jsx_runtime_1.jsx)("span", { className: "cairn-thinking-dot" }), (0, jsx_runtime_1.jsx)("span", { className: "cairn-thinking-dot" }), (0, jsx_runtime_1.jsx)("span", { className: "cairn-thinking-dot" })] }))] }, `a-${answer ?? status}`))] })), realtimeActive ? ((0, jsx_runtime_1.jsxs)("div", { className: "cairn-rt-bar", children: [(0, jsx_runtime_1.jsx)("span", { className: `cairn-rt-dot cairn-rt-dot-${status}` }), (0, jsx_runtime_1.jsx)("span", { className: "cairn-rt-label", children: statusLabel[status] }), (0, jsx_runtime_1.jsxs)("div", { className: "cairn-rt-controls", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: status === "rt-speaking" ? "cairn-icon-btn cairn-icon-btn-speaking" : "cairn-icon-btn", "aria-label": rtMicMuted ? "Unmute microphone" : "Mute microphone", onClick: toggleRtMic, children: rtMicMuted ? (0, jsx_runtime_1.jsx)(lucide_react_1.MicOff, { size: 16 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Mic, { size: 16 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: status === "rt-speaking" ? "cairn-icon-btn cairn-icon-btn-speaking" : "cairn-icon-btn", "aria-label": rtSpeakerMuted ? "Unmute speaker" : "Mute speaker", onClick: toggleRtSpeaker, children: rtSpeakerMuted ? (0, jsx_runtime_1.jsx)(lucide_react_1.VolumeX, { size: 16 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Volume2, { size: 16 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "cairn-icon-btn cairn-icon-btn-end", "aria-label": "End conversation", onClick: endRealtime, children: (0, jsx_runtime_1.jsx)(lucide_react_1.PhoneOff, { size: 16 }) })] })] })) : ((0, jsx_runtime_1.jsx)("form", { onSubmit: (e) => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("style", { suppressHydrationWarning: true, dangerouslySetInnerHTML: { __html: COPILOT_STYLES } }), (0, jsx_runtime_1.jsx)("button", { className: status === "rt-speaking" ? "cairn-fab cairn-fab-speaking" : "cairn-fab", "aria-label": open ? `Close ${persona} help` : `Open ${persona} help`, onClick: () => setOpen((v) => !v), children: open ? (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 22 }) : (0, jsx_runtime_1.jsx)(CairnMark, {}) }), open && ((0, jsx_runtime_1.jsxs)("div", { className: "cairn-panel", role: "dialog", "aria-label": `${persona} help panel`, ref: panelRef, children: [(transcript.length > 0 || userCaption || answer || busy) && ((0, jsx_runtime_1.jsxs)("div", { className: "cairn-stack", children: [transcript.map((entry) => ((0, jsx_runtime_1.jsx)("div", { className: entry.role === "user" ? "cairn-bubble cairn-bubble-user cairn-bubble-past" : "cairn-bubble cairn-bubble-agent cairn-bubble-past", children: entry.role === "agent" ? (0, jsx_runtime_1.jsx)("span", { className: "cairn-bubble-text", children: entry.text }) : entry.text }, entry.id))), userCaption && ((0, jsx_runtime_1.jsx)("div", { className: "cairn-bubble cairn-bubble-user", children: userCaption }, `u-${userCaption}`)), (answer || busy) && ((0, jsx_runtime_1.jsxs)("div", { className: "cairn-bubble cairn-bubble-agent", children: [tourChip && (0, jsx_runtime_1.jsx)("span", { className: "cairn-chip", children: tourChip }), answer ? ((0, jsx_runtime_1.jsx)("span", { className: "cairn-bubble-text", children: renderCaptionWords(answer) })) : ((0, jsx_runtime_1.jsxs)("span", { className: "cairn-thinking", "aria-label": "Thinking", children: [(0, jsx_runtime_1.jsx)("span", { className: "cairn-thinking-dot" }), (0, jsx_runtime_1.jsx)("span", { className: "cairn-thinking-dot" }), (0, jsx_runtime_1.jsx)("span", { className: "cairn-thinking-dot" })] }))] }, `a-${answer ?? status}`))] })), realtimeActive ? ((0, jsx_runtime_1.jsxs)("div", { className: "cairn-rt-bar", children: [(0, jsx_runtime_1.jsx)("span", { className: `cairn-rt-dot cairn-rt-dot-${status}` }), (0, jsx_runtime_1.jsx)("span", { className: "cairn-rt-label", children: statusLabel[status] }), (0, jsx_runtime_1.jsxs)("div", { className: "cairn-rt-controls", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: status === "rt-speaking" ? "cairn-icon-btn cairn-icon-btn-speaking" : "cairn-icon-btn", "aria-label": rtMicMuted ? "Unmute microphone" : "Mute microphone", onClick: toggleRtMic, children: rtMicMuted ? (0, jsx_runtime_1.jsx)(lucide_react_1.MicOff, { size: 16 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Mic, { size: 16 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: status === "rt-speaking" ? "cairn-icon-btn cairn-icon-btn-speaking" : "cairn-icon-btn", "aria-label": rtSpeakerMuted ? "Unmute speaker" : "Mute speaker", onClick: toggleRtSpeaker, children: rtSpeakerMuted ? (0, jsx_runtime_1.jsx)(lucide_react_1.VolumeX, { size: 16 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Volume2, { size: 16 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "cairn-icon-btn cairn-icon-btn-end", "aria-label": "End conversation", onClick: endRealtime, children: (0, jsx_runtime_1.jsx)(lucide_react_1.PhoneOff, { size: 16 }) })] })] })) : ((0, jsx_runtime_1.jsx)("form", { onSubmit: (e) => {
                             e.preventDefault();
                             const trimmed = question.trim();
                             if (trimmed)
@@ -920,6 +974,9 @@ const COPILOT_STYLES = `
 .cairn-bubble-text {
   white-space: pre-wrap;
 }
+.cairn-bubble-past {
+  opacity: 0.55;
+}
 .cairn-word {
   display: inline-block;
   animation: cairn-word-sweep 0.4s ease forwards;

package/dist/realtime-cli.js

@@ -38,6 +38,42 @@ function parseWithFlag(argv) {
     const idx = argv.indexOf("--with");
     return idx === -1 ? undefined : argv[idx + 1];
 }
+/**
+ * Real bug this closes: `--with "next dev"` makes this the *first* process
+ * `npm run dev` spawns, a sibling of Next.js, not code running inside it —
+ * so it never gets Next's own automatic .env/.env.local loading, and a real
+ * key sitting in .env was invisible to it (`process.env.DEEPGRAM_API_KEY`
+ * genuinely undefined) even though the exact same key worked fine for
+ * Next.js's own API routes a moment later. No new dependency for this —
+ * .env is a plain KEY=VALUE format. .env.local loads first (checked second
+ * in this list, but a key already set never gets overwritten below) to
+ * match Next.js's own precedence; nothing here ever overrides a real,
+ * already-set process.env value (a shell export, or a platform like Vercel
+ * injecting its own configured env vars) — file contents only ever fill a
+ * gap, never win over something actually set.
+ */
+function loadDotEnv() {
+    for (const filename of [".env.local", ".env"]) {
+        const filePath = node_path_1.default.join(process.cwd(), filename);
+        if (!node_fs_1.default.existsSync(filePath))
+            continue;
+        for (const line of node_fs_1.default.readFileSync(filePath, "utf8").split("\n")) {
+            const trimmed = line.trim();
+            if (!trimmed || trimmed.startsWith("#"))
+                continue;
+            const eq = trimmed.indexOf("=");
+            if (eq === -1)
+                continue;
+            const key = trimmed.slice(0, eq).trim();
+            let value = trimmed.slice(eq + 1).trim();
+            if ((value.startsWith('"') && value.endsWith('"')) || (value.startsWith("'") && value.endsWith("'"))) {
+                value = value.slice(1, -1);
+            }
+            if (process.env[key] === undefined)
+                process.env[key] = value;
+        }
+    }
+}
 function spawnCompanion(command) {
     const child = (0, node_child_process_1.spawn)(command, { shell: true, stdio: "inherit" });
     const shutdown = (code) => {
@@ -50,6 +86,7 @@ function spawnCompanion(command) {
     process.on("SIGTERM", () => shutdown(0));
 }
 function main() {
+    loadDotEnv();
     const withCommand = parseWithFlag(process.argv.slice(2));
     // With --with, this process's real job is running the companion command
     // (`next dev`, typically) — a missing key or an unbuilt manifest should

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cairnvibe/sdk",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "In-app AI copilot — <Copilot/> for React/Next.js, <cairn-widget> for any framework — plus the server handlers and realtime voice relay behind them.",
   "license": "MIT",
   "publishConfig": { "access": "public" },

package/src/index.tsx

@@ -74,6 +74,21 @@ export function Copilot({
   // completion, so the exchange stays paired on screen the way a caption
   // track shows the current line, not a scrolling transcript.
   const [lastQuestion, setLastQuestion] = useState<string | null>(null);
+  // Persistent scroll-back log: previous exchanges get archived here (see
+  // archiveCurrentExchange below) the instant a new one starts, so they
+  // stay visible — scrolled up, not gone — instead of the old behavior of
+  // silently overwriting `answer`/`caption` with nothing left to look back
+  // at once the next question began.
+  const [transcript, setTranscript] = useState<{ id: number; role: "user" | "agent"; text: string }[]>([]);
+  const transcriptIdRef = useRef(0);
+  const panelRef = useRef<HTMLDivElement | null>(null);
+  // Mirror the values archiveCurrentExchange needs to read from inside
+  // stale closures (the realtime WebSocket's onmessage handler is created
+  // once per call and doesn't see later renders' state directly — same
+  // reason the rest of the realtime path already uses refs like
+  // rtStateRef instead of reading state).
+  const userCaptionRef = useRef<string>("");
+  const answerRef = useRef<string | null>(null);
   const [rtMicMuted, setRtMicMuted] = useState(false);
   const [rtSpeakerMuted, setRtSpeakerMuted] = useState(false);
   // Set while a "tour" verb's steps are being narrated/highlighted one at a
@@ -157,6 +172,39 @@ export function Copilot({
   const tourChip = touring ? caption : "";
   const userCaption = !touring && (recording || realtimeActive) ? caption : lastQuestion ?? "";
 
+  useEffect(() => {
+    userCaptionRef.current = userCaption;
+  }, [userCaption]);
+  useEffect(() => {
+    answerRef.current = answer;
+  }, [answer]);
+
+  // Auto-scroll to the newest content whenever the transcript grows or the
+  // live (not-yet-archived) bubble's text changes.
+  useEffect(() => {
+    const el = panelRef.current;
+    if (el) el.scrollTop = el.scrollHeight;
+  }, [transcript, answer, userCaption, busy]);
+
+  /**
+   * Moves whatever's currently showing as the "live" exchange into the
+   * permanent transcript log, right before it's about to be overwritten by
+   * a new turn — called at the start of ask(), at the start of each
+   * realtime "final" transcript, and at the start of a tour/tour step. Its
+   * effect is exactly "previous goes up, recent shows": the outgoing
+   * text becomes a fixed history entry the instant the incoming one starts
+   * replacing it, instead of just vanishing.
+   */
+  function archiveText(role: "user" | "agent", text: string) {
+    if (!text) return;
+    setTranscript((prev) => [...prev, { id: transcriptIdRef.current++, role, text }]);
+  }
+
+  function archiveCurrentExchange() {
+    archiveText("user", userCaptionRef.current);
+    archiveText("agent", answerRef.current ?? "");
+  }
+
   function setRtStatus(next: Status) {
     rtStateRef.current = next;
     setStatus(next);
@@ -206,6 +254,7 @@ export function Copilot({
     const wasRealtimeListening = realtimeActive;
     touringRef.current = true;
     if (wasRealtimeListening) setRtStatus("rt-speaking");
+    archiveCurrentExchange();
     setAnswer(null);
     // Tracked locally rather than reading the component's `pathname` —
     // that's only current as of this render, and a step below can navigate
@@ -218,6 +267,9 @@ export function Copilot({
       for (let i = 0; i < steps.length; i++) {
         if (tourGenerationRef.current !== myGeneration) return; // superseded — e.g. widget closed or a new question came in
         const step = steps[i];
+        // Move the previous step's narration into history before this one replaces it —
+        // agent-only, since the tour's triggering question was already archived once, above.
+        if (i > 0) archiveText("agent", answerRef.current ?? "");
         setTourStep({ index: i, total: steps.length });
         setCaption(`Step ${i + 1} of ${steps.length}`);
         setAnswer(step.text);
@@ -269,6 +321,7 @@ export function Copilot({
   // ---------------------------------------------------------------------
 
   async function ask(q: string) {
+    archiveCurrentExchange();
     setStatus("asking");
     setAnswer(null);
     setLastQuestion(q);
@@ -453,6 +506,7 @@ export function Copilot({
     // which is exactly what "hearing the agent twice, in parallel" was.
     if (!realtimeUrl || !micSupported || realtimeActive || rtStartingRef.current) return;
     rtStartingRef.current = true;
+    archiveCurrentExchange(); // preserve whatever typed/mic exchange preceded switching into a live call
     setAnswer(null);
     setCaption("");
     setRtStatus("rt-connecting");
@@ -600,6 +654,7 @@ export function Copilot({
         if (msg.type === "interim") {
           setCaption(msg.text);
         } else if (msg.type === "final") {
+          archiveCurrentExchange(); // the previous turn's pair is complete — move it into history before this one starts overwriting caption/answer
           setCaption(msg.text);
           setRtStatus("rt-thinking");
           armThinkingWatchdog();
@@ -743,10 +798,18 @@ export function Copilot({
         {open ? <X size={22} /> : <CairnMark />}
       </button>
       {open && (
-        <div className="cairn-panel" role="dialog" aria-label={`${persona} help panel`}>
+        <div className="cairn-panel" role="dialog" aria-label={`${persona} help panel`} ref={panelRef}>
 
-          {(userCaption || answer || busy) && (
+          {(transcript.length > 0 || userCaption || answer || busy) && (
             <div className="cairn-stack">
+              {transcript.map((entry) => (
+                <div
+                  className={entry.role === "user" ? "cairn-bubble cairn-bubble-user cairn-bubble-past" : "cairn-bubble cairn-bubble-agent cairn-bubble-past"}
+                  key={entry.id}
+                >
+                  {entry.role === "agent" ? <span className="cairn-bubble-text">{entry.text}</span> : entry.text}
+                </div>
+              ))}
               {userCaption && (
                 <div className="cairn-bubble cairn-bubble-user" key={`u-${userCaption}`}>
                   {userCaption}
@@ -1101,6 +1164,9 @@ const COPILOT_STYLES = `
 .cairn-bubble-text {
   white-space: pre-wrap;
 }
+.cairn-bubble-past {
+  opacity: 0.55;
+}
 .cairn-word {
   display: inline-block;
   animation: cairn-word-sweep 0.4s ease forwards;

package/src/realtime-cli.ts

@@ -36,6 +36,39 @@ function parseWithFlag(argv: string[]): string | undefined {
   return idx === -1 ? undefined : argv[idx + 1];
 }
 
+/**
+ * Real bug this closes: `--with "next dev"` makes this the *first* process
+ * `npm run dev` spawns, a sibling of Next.js, not code running inside it —
+ * so it never gets Next's own automatic .env/.env.local loading, and a real
+ * key sitting in .env was invisible to it (`process.env.DEEPGRAM_API_KEY`
+ * genuinely undefined) even though the exact same key worked fine for
+ * Next.js's own API routes a moment later. No new dependency for this —
+ * .env is a plain KEY=VALUE format. .env.local loads first (checked second
+ * in this list, but a key already set never gets overwritten below) to
+ * match Next.js's own precedence; nothing here ever overrides a real,
+ * already-set process.env value (a shell export, or a platform like Vercel
+ * injecting its own configured env vars) — file contents only ever fill a
+ * gap, never win over something actually set.
+ */
+function loadDotEnv(): void {
+  for (const filename of [".env.local", ".env"]) {
+    const filePath = path.join(process.cwd(), filename);
+    if (!fs.existsSync(filePath)) continue;
+    for (const line of fs.readFileSync(filePath, "utf8").split("\n")) {
+      const trimmed = line.trim();
+      if (!trimmed || trimmed.startsWith("#")) continue;
+      const eq = trimmed.indexOf("=");
+      if (eq === -1) continue;
+      const key = trimmed.slice(0, eq).trim();
+      let value = trimmed.slice(eq + 1).trim();
+      if ((value.startsWith('"') && value.endsWith('"')) || (value.startsWith("'") && value.endsWith("'"))) {
+        value = value.slice(1, -1);
+      }
+      if (process.env[key] === undefined) process.env[key] = value;
+    }
+  }
+}
+
 function spawnCompanion(command: string): void {
   const child = spawn(command, { shell: true, stdio: "inherit" });
   const shutdown = (code: number | null) => {
@@ -49,6 +82,7 @@ function spawnCompanion(command: string): void {
 }
 
 function main(): void {
+  loadDotEnv();
   const withCommand = parseWithFlag(process.argv.slice(2));
 
   // With --with, this process's real job is running the companion command