@kerros/editor 0.0.0-stage → 0.1.0-rc.2

package/dist/components/AiImportPanel.js

@@ -0,0 +1,635 @@
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import { useState as d, useId as Ee, useRef as x, useEffect as q } from "react";
+import { emptyTokenUsage as K, addTokenUsage as Re } from "../import/usage.js";
+import { loadAiImportSession as We, saveAiImportSession as Ge } from "../import/session.js";
+import { readImportBrief as Ue } from "../import/brief.js";
+import { DEFAULT_IMPORT_BUDGET as Pe, readImportBudget as ue } from "../import/checkpoint.js";
+import { readImportInstruction as $e, mergeImportInstructions as Je } from "../import/instructions.js";
+import { AnalysisPreview as qe } from "./AnalysisPreview.js";
+import { loadAnalysisPreview as Ke, deleteAnalysisPreview as ze, saveAnalysisPreview as Ye } from "../import/analysisPreview.js";
+function nt({
+  adapter: j,
+  assets: N,
+  onProject: de,
+  onRunningChange: z,
+  currentProject: B
+}) {
+  const [pe, De] = d(!0), [U, Y] = d("setup"), I = Ee(), [b, _] = d(null), [H, me] = d(""), [L, he] = d(""), [E, ge] = d(""), [Q, fe] = d(""), [R, be] = d(""), [W, ye] = d(""), [P, G] = d(""), [v, V] = d(Pe), [X, Z] = d(), [n, we] = d(null), o = x(n), $ = x(B), ee = x(de);
+  $.current = B, ee.current = de;
+  const [ve, Ie] = d(0), [Ne, f] = d(""), [g, te] = d(!1), [J, Ce] = d(!1), [re, Te] = d(), T = x(null), Se = x(Promise.resolve()), ne = x(null), ie = x(!0), c = (n == null ? void 0 : n.phase) === "running", ae = (n == null ? void 0 : n.phase) ?? "ready", oe = (n == null ? void 0 : n.messages) ?? [], D = (n == null ? void 0 : n.usage) ?? K(), Oe = (n == null ? void 0 : n.hasUsage) ?? !1, Ae = (n == null ? void 0 : n.edits) ?? 0, Fe = (n == null ? void 0 : n.activity) ?? "", m = (t) => {
+    o.current = t, we(t);
+    const e = Se.current.catch(() => {
+    }).then(() => Ge(N, t));
+    return Se.current = e, e;
+  };
+  q(() => {
+    let t = !0;
+    return We(N, B.id).then(async (e) => {
+      var u, h, C, l, y, s, w, k, p;
+      if (t && (o.current = e, we(e), me((e == null ? void 0 : e.instructions) ?? ""), G((e == null ? void 0 : e.followUp) ?? ""), he(((h = (u = e == null ? void 0 : e.brief) == null ? void 0 : u.widthMetres) == null ? void 0 : h.toString()) ?? ""), ge(((l = (C = e == null ? void 0 : e.brief) == null ? void 0 : C.depthMetres) == null ? void 0 : l.toString()) ?? ""), fe(((y = e == null ? void 0 : e.brief) == null ? void 0 : y.buildingType) ?? ""), be(((w = (s = e == null ? void 0 : e.brief) == null ? void 0 : s.floorCount) == null ? void 0 : w.toString()) ?? ""), ye(((p = (k = e == null ? void 0 : e.brief) == null ? void 0 : k.footprintAreaM2) == null ? void 0 : p.toString()) ?? ""), f((e == null ? void 0 : e.error) ?? ""), V((e == null ? void 0 : e.budget) ?? Pe), Y((e == null ? void 0 : e.tab) ?? (e ? "activity" : "setup")), e)) {
+        const F = await Ke(N, e.sourceId);
+        t && Z(F);
+      }
+    }).catch((e) => {
+      t && f(e.message);
+    }).finally(() => {
+      t && De(!1);
+    }), () => {
+      var e;
+      t = !1, (e = T.current) == null || e.abort(), T.current = null;
+    };
+  }, [N, B.id]), q(() => {
+    ie.current && ne.current && (ne.current.scrollTop = 0);
+  }, [n == null ? void 0 : n.messages]), q(() => (z(c), () => z(!1)), [c, z]), q(() => {
+    if (!c) return;
+    const t = Date.now();
+    Ie(0);
+    const e = setInterval(() => Ie(Math.floor((Date.now() - t) / 1e3)), 1e3);
+    return () => clearInterval(e);
+  }, [c]);
+  const ke = async (t = !1) => {
+    var h, C;
+    if (T.current || pe) return;
+    const e = new AbortController();
+    T.current = e, te(!0), f("");
+    let u = K();
+    try {
+      const l = o.current, y = ue(v), s = Ue({
+        buildingType: Q || void 0,
+        floorCount: R ? Number(R) : void 0,
+        widthMetres: L ? Number(L) : void 0,
+        depthMetres: E ? Number(E) : void 0,
+        footprintAreaM2: W ? Number(W) : void 0
+      });
+      let w = b;
+      if (t && l) {
+        const a = await N.get(l.sourceId);
+        if (!a) throw new Error("The saved source drawing is missing. Choose it again to continue.");
+        w = new File([a], l.sourceName, { type: l.sourceType });
+      }
+      if (!w || !/\.(dwg|pdf|png|jpe?g|webp)$/i.test(w.name) || !w.size || w.size > 25 * 1024 * 1024)
+        throw new Error("Choose a non-empty DWG, PDF, PNG, JPEG or WebP file under 25 MB.");
+      const k = t && l ? l.sourceId : `ai-import:source:${crypto.randomUUID()}`;
+      t || await N.put(k, w), t || Z(void 0), e.signal.throwIfAborted();
+      const p = t && l ? {
+        ...l,
+        brief: s,
+        phase: "running",
+        tab: "activity",
+        budget: y,
+        pause: void 0,
+        error: "",
+        followUp: "",
+        activity: "Preparing import",
+        messages: l.messages
+      } : {
+        version: 1,
+        projectId: $.current.id,
+        sourceId: k,
+        sourceName: w.name,
+        sourceType: w.type,
+        instructions: H,
+        brief: s,
+        followUp: "",
+        messages: [
+          {
+            type: "user",
+            detail: [
+              H.trim(),
+              [
+                s == null ? void 0 : s.buildingType,
+                (s == null ? void 0 : s.floorCount) && `${s.floorCount} floors`,
+                (s == null ? void 0 : s.widthMetres) && `Width ${s.widthMetres} m`,
+                (s == null ? void 0 : s.depthMetres) && `Depth ${s.depthMetres} m`,
+                (s == null ? void 0 : s.footprintAreaM2) && `Footprint ${s.footprintAreaM2} m² per floor`
+              ].filter(Boolean).join(" · ")
+            ].filter(Boolean).join(`
+`)
+          }
+        ].filter((a) => a.detail),
+        phase: "running",
+        tab: "activity",
+        budget: y,
+        pause: void 0,
+        activity: "Preparing import",
+        edits: 0,
+        usage: K(),
+        hasUsage: !1,
+        error: ""
+      };
+      if (t) {
+        if (P.trim()) {
+          const a = $e({ id: crypto.randomUUID(), text: P });
+          p.pendingInstructions = [...p.pendingInstructions ?? [], a], p.messages = [...p.messages, { type: "user", detail: a.text, instructionId: a.id }];
+        }
+        (h = p.pendingInstructions) != null && h.length && (p.checkpoint = {
+          version: 1,
+          projectId: $.current.id,
+          brief: p.brief,
+          phase: "inspect",
+          notes: "",
+          sourcePlan: "",
+          mutationKinds: [],
+          analysis: [],
+          lastAssistantText: "",
+          lastToolReport: "",
+          ...p.checkpoint,
+          steering: Je(((C = p.checkpoint) == null ? void 0 : C.steering) ?? [], p.pendingInstructions)
+        });
+      }
+      u = t && l ? l.usage : K(), await m(p), G(""), !t && l && l.sourceId !== k && await Promise.all([N.delete(l.sourceId), ze(N, l.sourceId)]).catch(
+        () => {
+        }
+      ), e.signal.throwIfAborted(), Y("activity"), _(null), te(!1), ie.current = !0;
+      let F;
+      const xe = await j.run(w, {
+        origin: $.current.origin,
+        brief: p.brief,
+        instructions: p.instructions,
+        // The live document includes manual corrections made between runs. Never restore an
+        // earlier import snapshot over them or switch to a newly generated project ID.
+        base: $.current,
+        checkpoint: p.checkpoint,
+        budget: y,
+        onSession: (a) => {
+          e.signal.aborted || Te(a);
+        },
+        onAnalysis: async (a) => {
+          e.signal.aborted || (await Ye(N, k, a), e.signal.aborted || Z(a));
+        },
+        onCheckpoint: async (a) => {
+          var S, M;
+          if (!e.signal.aborted) {
+            const le = new Set((S = a.steering) == null ? void 0 : S.map((ce) => ce.id));
+            await m({
+              ...o.current,
+              checkpoint: a,
+              pendingInstructions: (M = o.current.pendingInstructions) == null ? void 0 : M.filter((ce) => !le.has(ce.id))
+            });
+          }
+        },
+        onPause: async (a) => {
+          e.signal.aborted || await m({ ...o.current, pause: a, activity: a.message });
+        },
+        signal: e.signal,
+        onUsage: async (a) => {
+          e.signal.aborted || await m({ ...o.current, usage: Re(u, a), hasUsage: !0 });
+        },
+        onDocument: async (a) => {
+          e.signal.aborted || (await ee.current(a), F = a, await m({ ...o.current, edits: o.current.edits + 1 }));
+        },
+        onProgress: async (a) => {
+          if (e.signal.aborted) return;
+          const S = o.current;
+          if (a.type === "status") return m({ ...S, activity: a.detail });
+          const M = S.messages.at(-1), le = a.type === "text" && (M == null ? void 0 : M.type) === "text" ? [...S.messages.slice(0, -1), { type: "text", detail: M.detail + a.detail }] : [...S.messages, { type: a.type, detail: a.detail }];
+          await m({ ...S, messages: le });
+        }
+      });
+      e.signal.aborted || ((!F || JSON.stringify(xe) !== JSON.stringify(F)) && await ee.current(xe), await m({ ...o.current, phase: o.current.pause ? "paused" : "done" }));
+    } catch (l) {
+      if (T.current !== e) return;
+      const y = e.signal.aborted ? "" : l.message;
+      if (f(y), o.current)
+        try {
+          await m({ ...o.current, phase: e.signal.aborted ? "paused" : "failed", error: y });
+        } catch {
+          f("Could not save the import session. Keep this page open and retry when storage is available.");
+        }
+    } finally {
+      T.current === e && (T.current = null, Te(void 0)), te(!1);
+    }
+  }, je = async () => {
+    if (!(!P.trim() || J || g || !o.current)) {
+      if (!c) return ke(!0);
+      if (!(!re || !j.sendInstruction)) {
+        Ce(!0), f("");
+        try {
+          const t = $e({ id: crypto.randomUUID(), text: P }), e = [...o.current.pendingInstructions ?? [], t];
+          if (e.length > 20 || JSON.stringify(e).length > 8e3)
+            throw new Error("Wait for Claude to receive the queued instructions before sending more.");
+          await m({
+            ...o.current,
+            followUp: "",
+            pendingInstructions: e,
+            messages: [
+              ...o.current.messages,
+              { type: "user", detail: t.text, instructionId: t.id }
+            ]
+          }), G(""), await j.sendInstruction(re, t);
+        } catch (t) {
+          f(t.message);
+        } finally {
+          Ce(!1);
+        }
+      }
+    }
+  }, O = (t) => {
+    const e = { widthMetres: L, depthMetres: E, footprintArea: W, buildingType: Q, floorCount: R, ...t };
+    if (he(e.widthMetres), ge(e.depthMetres), ye(e.footprintArea), fe(e.buildingType), be(e.floorCount), !!o.current)
+      try {
+        const u = Ue({
+          buildingType: e.buildingType || void 0,
+          floorCount: e.floorCount ? Number(e.floorCount) : void 0,
+          widthMetres: e.widthMetres ? Number(e.widthMetres) : void 0,
+          depthMetres: e.depthMetres ? Number(e.depthMetres) : void 0,
+          footprintAreaM2: e.footprintArea ? Number(e.footprintArea) : void 0
+        });
+        m({ ...o.current, brief: u }).catch(() => f("Could not save the import template."));
+      } catch {
+      }
+  }, Be = /* @__PURE__ */ i("fieldset", { className: "ai-import-scale", children: [
+    /* @__PURE__ */ r("legend", { children: "Import template · optional" }),
+    /* @__PURE__ */ i("div", { className: "field-grid", children: [
+      /* @__PURE__ */ i("label", { className: "field", children: [
+        /* @__PURE__ */ r("span", { children: "Building type" }),
+        /* @__PURE__ */ i(
+          "select",
+          {
+            "aria-label": "Import building type",
+            value: Q,
+            disabled: g || c,
+            onChange: (t) => O({ buildingType: t.target.value }),
+            children: [
+              /* @__PURE__ */ r("option", { value: "", children: "Use the drawing" }),
+              /* @__PURE__ */ r("option", { value: "apartment", children: "Apartment" }),
+              /* @__PURE__ */ r("option", { value: "house", children: "Detached house" }),
+              /* @__PURE__ */ r("option", { value: "office", children: "Office" }),
+              /* @__PURE__ */ r("option", { value: "retail", children: "Shop / retail" }),
+              /* @__PURE__ */ r("option", { value: "other", children: "Other building" })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ i("label", { className: "field", children: [
+        /* @__PURE__ */ r("span", { children: "Floor count" }),
+        /* @__PURE__ */ r(
+          "input",
+          {
+            type: "number",
+            min: "1",
+            max: "100",
+            step: "1",
+            "aria-label": "Import floor count",
+            value: R,
+            placeholder: "e.g. 1",
+            disabled: g || c,
+            onChange: (t) => O({ floorCount: t.target.value })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ i("label", { className: "field", children: [
+        /* @__PURE__ */ r("span", { children: "Overall width (m)" }),
+        /* @__PURE__ */ r(
+          "input",
+          {
+            type: "number",
+            min: "0.01",
+            step: "any",
+            "aria-label": "Overall width (m)",
+            value: L,
+            placeholder: "e.g. 20",
+            disabled: g || c,
+            onChange: (t) => O({ widthMetres: t.target.value })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ i("label", { className: "field", children: [
+        /* @__PURE__ */ r("span", { children: "Overall depth (m)" }),
+        /* @__PURE__ */ r(
+          "input",
+          {
+            type: "number",
+            min: "0.01",
+            step: "any",
+            "aria-label": "Overall depth (m)",
+            value: E,
+            placeholder: "Optional",
+            disabled: g || c,
+            onChange: (t) => O({ depthMetres: t.target.value })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ i("label", { className: "field", children: [
+        /* @__PURE__ */ r("span", { children: "Footprint per floor (m²)" }),
+        /* @__PURE__ */ r(
+          "input",
+          {
+            type: "number",
+            min: "0.01",
+            step: "any",
+            "aria-label": "Floor footprint (m²)",
+            value: W,
+            placeholder: "Whole floor area",
+            disabled: g || c,
+            onChange: (t) => O({ footprintArea: t.target.value })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ r("small", { children: "Dimensions follow the plan’s main axes, to the outside of the walls. Footprint includes wall area and applies per floor, not to the sum of all floors. One known value can establish scale; others cross-check it. Leave measurements blank only when the drawing has readable dimensions. Different floor footprints can be described in the instructions." })
+  ] }), Le = /* @__PURE__ */ i("details", { className: "ai-import-budget", children: [
+    /* @__PURE__ */ i("summary", { children: [
+      "Budget per run · ",
+      v.maxTurns ?? 40,
+      " turns · ",
+      v.inputTokens.toLocaleString(),
+      " input /",
+      " ",
+      v.outputTokens.toLocaleString(),
+      " output"
+    ] }),
+    /* @__PURE__ */ r("p", { className: "helper", children: "Input includes cached tokens. Output includes model thinking. Continue starts another paid run using the saved working state. Limits are checked between responses." }),
+    /* @__PURE__ */ i("div", { className: "field-grid", children: [
+      /* @__PURE__ */ i("label", { className: "field", children: [
+        /* @__PURE__ */ r("span", { children: "Turn limit" }),
+        /* @__PURE__ */ r(
+          "input",
+          {
+            type: "number",
+            "aria-label": "Turn limit",
+            min: "1",
+            max: "100",
+            step: "1",
+            value: v.maxTurns ?? 40,
+            disabled: c || g,
+            onChange: (t) => {
+              const e = { ...v, maxTurns: Number(t.target.value) };
+              V(e);
+              try {
+                const u = ue(e);
+                o.current && m({ ...o.current, budget: u }).catch(
+                  () => f("Could not save import budget.")
+                );
+              } catch {
+              }
+            }
+          }
+        )
+      ] }),
+      ["inputTokens", "outputTokens"].map((t) => /* @__PURE__ */ i("label", { className: "field", children: [
+        /* @__PURE__ */ r("span", { children: t === "inputTokens" ? "Input token limit" : "Output token limit" }),
+        /* @__PURE__ */ r(
+          "input",
+          {
+            type: "number",
+            "aria-label": t === "inputTokens" ? "Input token limit" : "Output token limit",
+            min: t === "inputTokens" ? 1e4 : 1e3,
+            max: t === "inputTokens" ? 2e6 : 1e5,
+            step: "1000",
+            value: v[t],
+            disabled: c || g,
+            onChange: (e) => {
+              const u = { ...v, [t]: Number(e.target.value) };
+              V(u);
+              try {
+                const h = ue(u);
+                o.current && m({ ...o.current, budget: h }).catch(
+                  () => f("Could not save import budget.")
+                );
+              } catch {
+              }
+            }
+          }
+        )
+      ] }, t))
+    ] })
+  ] }), A = [
+    ["setup", "Setup"],
+    ["analysis", "Analysis"],
+    ["activity", "Activity"],
+    ["usage", "Usage"]
+  ], Me = (t) => {
+    Y(t), o.current && m({ ...o.current, tab: t }).catch(() => f("Could not save the import view."));
+  };
+  if (pe) return /* @__PURE__ */ r("p", { role: "status", children: "Restoring import session…" });
+  const se = !!b || !n;
+  return /* @__PURE__ */ i("section", { className: "ai-import-panel ai-import-organized", children: [
+    /* @__PURE__ */ i("header", { className: "ai-import-sticky", children: [
+      /* @__PURE__ */ r("strong", { className: "ai-import-source", title: (b == null ? void 0 : b.name) ?? (n == null ? void 0 : n.sourceName), children: (b == null ? void 0 : b.name) ?? (n == null ? void 0 : n.sourceName) ?? "Choose a source drawing" }),
+      /* @__PURE__ */ i("div", { className: "ai-import-toolbar", children: [
+        /* @__PURE__ */ r("span", { role: "status", children: c ? `Importing · ${Ae} accepted edits · ${Math.floor(ve / 60)}:${String(ve % 60).padStart(2, "0")}` : ae === "done" ? `Saved to project · ${Ae} accepted edits` : ae === "paused" ? "Paused · accepted changes saved" : ae === "failed" ? "Import interrupted" : "Ready to import" }),
+        c ? /* @__PURE__ */ r("button", { className: "button secondary", onClick: () => {
+          var t;
+          return (t = T.current) == null ? void 0 : t.abort();
+        }, children: "Stop import" }) : /* @__PURE__ */ r(
+          "button",
+          {
+            className: "button primary",
+            disabled: g || se && !b,
+            onClick: () => ke(!se),
+            children: g ? "Preparing…" : se ? "Start AI import" : "Continue import"
+          }
+        )
+      ] }),
+      c && /* @__PURE__ */ r("p", { className: "ai-import-activity", children: Fe || "Claude is working…" }),
+      !c && (n == null ? void 0 : n.pause) && /* @__PURE__ */ r("p", { className: "ai-import-pause", "aria-live": "polite", children: n.pause.message }),
+      Ne && /* @__PURE__ */ r("p", { className: "form-error", role: "alert", children: Ne })
+    ] }),
+    /* @__PURE__ */ r("div", { className: "ai-import-tablist", role: "tablist", "aria-label": "AI import sections", children: A.map(([t, e], u) => /* @__PURE__ */ i(
+      "button",
+      {
+        id: `${I}-${t}`,
+        "data-tab": t,
+        role: "tab",
+        "aria-selected": U === t,
+        "aria-controls": `${I}-${t}-panel`,
+        tabIndex: U === t ? 0 : -1,
+        onClick: () => Me(t),
+        onKeyDown: (h) => {
+          var l, y;
+          const C = h.key === "ArrowRight" ? (u + 1) % A.length : h.key === "ArrowLeft" ? (u + A.length - 1) % A.length : h.key === "Home" ? 0 : h.key === "End" ? A.length - 1 : -1;
+          C < 0 || (h.preventDefault(), Me(A[C][0]), (y = (l = h.currentTarget.parentElement) == null ? void 0 : l.querySelector(`[data-tab="${A[C][0]}"]`)) == null || y.focus());
+        },
+        children: [
+          e,
+          t === "analysis" && X && /* @__PURE__ */ r("i", { "aria-hidden": "true", title: "Preview available" })
+        ]
+      },
+      t
+    )) }),
+    /* @__PURE__ */ i(
+      "div",
+      {
+        className: "ai-import-tab-scroll",
+        role: "tabpanel",
+        id: `${I}-setup-panel`,
+        "aria-labelledby": `${I}-setup`,
+        hidden: U !== "setup",
+        children: [
+          /* @__PURE__ */ r("p", { className: "helper", children: "Claude edits the live project and saves accepted changes. Starting or continuing uses your backend API key and incurs API usage." }),
+          /* @__PURE__ */ i("div", { className: "ai-import-inputs", children: [
+            /* @__PURE__ */ i("label", { className: "field", children: [
+              /* @__PURE__ */ r("span", { children: n ? "Replace source drawing" : "Source drawing" }),
+              /* @__PURE__ */ r(
+                "input",
+                {
+                  type: "file",
+                  "aria-label": "AI source drawing",
+                  accept: ".dwg,.pdf,.png,.jpg,.jpeg,.webp",
+                  disabled: c || g,
+                  onChange: (t) => {
+                    var e;
+                    _(((e = t.target.files) == null ? void 0 : e[0]) ?? null), t.currentTarget.value = "";
+                  }
+                }
+              ),
+              /* @__PURE__ */ r("small", { children: "Images, PDF (up to 20 pages), or DWG · up to 25 MB" })
+            ] }),
+            b && n && /* @__PURE__ */ r("button", { className: "text-button", onClick: () => _(null), children: "Keep current source" }),
+            /* @__PURE__ */ i("label", { className: "field", children: [
+              /* @__PURE__ */ r("span", { children: "Import instructions" }),
+              /* @__PURE__ */ r(
+                "textarea",
+                {
+                  "aria-label": "Import instructions",
+                  maxLength: 8e3,
+                  rows: 3,
+                  disabled: c || g,
+                  value: H,
+                  onChange: (t) => {
+                    me(t.target.value), o.current && m({ ...o.current, instructions: t.target.value }).catch(
+                      () => f("Could not save instructions.")
+                    );
+                  },
+                  placeholder: "For example: page 2 is the ground floor, exterior width 18.4 m. Include room names and openings."
+                }
+              )
+            ] })
+          ] }),
+          Be,
+          Le,
+          /* @__PURE__ */ r("p", { className: "helper", children: "Stop before making manual edits. Continue uses the current project and saved working notes. Closing this sidebar keeps an active import running." })
+        ]
+      }
+    ),
+    /* @__PURE__ */ r(
+      "div",
+      {
+        className: "ai-import-tab-scroll",
+        role: "tabpanel",
+        id: `${I}-analysis-panel`,
+        "aria-labelledby": `${I}-analysis`,
+        hidden: U !== "analysis",
+        children: X ? /* @__PURE__ */ r(qe, { preview: X }) : /* @__PURE__ */ r("p", { className: "ai-import-empty", children: "The source SVG will appear here when Claude analyses the drawing. It shows detected evidence; accepted geometry appears on the main map." })
+      }
+    ),
+    /* @__PURE__ */ i(
+      "div",
+      {
+        className: "ai-import-activity-panel",
+        role: "tabpanel",
+        id: `${I}-activity-panel`,
+        "aria-labelledby": `${I}-activity`,
+        hidden: U !== "activity",
+        children: [
+          /* @__PURE__ */ r(
+            "div",
+            {
+              className: "ai-import-tab-scroll",
+              ref: ne,
+              onScroll: (t) => {
+                ie.current = t.currentTarget.scrollTop < 60;
+              },
+              children: /* @__PURE__ */ i("section", { className: "ai-import-conversation", "aria-label": "AI conversation", children: [
+                !oe.length && /* @__PURE__ */ r("p", { className: "ai-import-empty", children: "Claude’s latest message and tool activity will appear at the top." }),
+                [...oe].reverse().map((t, e) => {
+                  var u;
+                  return /* @__PURE__ */ i("div", { className: `ai-import-message ${t.type}`, children: [
+                    /* @__PURE__ */ r("small", { children: t.type === "text" ? "Claude" : t.type === "user" ? (u = n == null ? void 0 : n.pendingInstructions) != null && u.some((h) => h.id === t.instructionId) ? "You · queued" : "You" : "Tool" }),
+                    /* @__PURE__ */ r("p", { children: t.detail })
+                  ] }, oe.length - 1 - e);
+                })
+              ] })
+            }
+          ),
+          /* @__PURE__ */ i(
+            "form",
+            {
+              className: "ai-import-composer",
+              onSubmit: (t) => {
+                t.preventDefault(), je();
+              },
+              children: [
+                /* @__PURE__ */ i("label", { className: "field", children: [
+                  /* @__PURE__ */ r("span", { children: "Message to AI" }),
+                  /* @__PURE__ */ r(
+                    "textarea",
+                    {
+                      "aria-label": "Message to AI",
+                      rows: 3,
+                      maxLength: 2e3,
+                      value: P,
+                      disabled: !n || g || J || !!b,
+                      onChange: (t) => {
+                        G(t.target.value), o.current && m({ ...o.current, followUp: t.target.value }).catch(
+                          () => f("Could not save your draft.")
+                        );
+                      },
+                      placeholder: "Give a correction or describe what to do next…"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ i("div", { children: [
+                  /* @__PURE__ */ r("small", { children: c ? "Queued for Claude’s next turn." : n ? "Resumes with the saved project. Uses API tokens." : "Start an import in Setup to chat." }),
+                  /* @__PURE__ */ r(
+                    "button",
+                    {
+                      className: "button primary",
+                      type: "submit",
+                      disabled: !n || !P.trim() || g || J || !!b || c && (!re || !j.sendInstruction),
+                      children: J ? "Sending…" : c ? "Send" : "Send & continue"
+                    }
+                  )
+                ] })
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ i(
+      "div",
+      {
+        className: "ai-import-tab-scroll",
+        role: "tabpanel",
+        id: `${I}-usage-panel`,
+        "aria-labelledby": `${I}-usage`,
+        hidden: U !== "usage",
+        children: [
+          /* @__PURE__ */ i("section", { className: "ai-import-usage", "aria-label": "Token usage", children: [
+            /* @__PURE__ */ i("strong", { children: [
+              "Tokens reported ·",
+              " ",
+              Object.values(D).reduce((t, e) => t + e, 0).toLocaleString()
+            ] }),
+            /* @__PURE__ */ r("dl", { children: [
+              ["Input", D.inputTokens],
+              ["Output", D.outputTokens],
+              ["Cache read", D.cacheReadTokens],
+              ["Cache write", D.cacheWriteTokens]
+            ].map(([t, e]) => /* @__PURE__ */ i("div", { children: [
+              /* @__PURE__ */ r("dt", { children: t }),
+              /* @__PURE__ */ r("dd", { children: e.toLocaleString() })
+            ] }, t)) }),
+            /* @__PURE__ */ r("small", { children: Oe ? "Includes continuations in this session. Saved with this project; interrupted runs may report incomplete usage." : "Waiting for Claude to report usage." })
+          ] }),
+          /* @__PURE__ */ i("p", { className: "helper", children: [
+            "Per run: ",
+            v.maxTurns ?? 40,
+            " turns, ",
+            v.inputTokens.toLocaleString(),
+            " input (including cache),",
+            " ",
+            v.outputTokens.toLocaleString(),
+            " output tokens. Adjust limits in Setup. Reaching a limit pauses the import; Continue starts the next paid run from the saved checkpoint."
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  nt as AiImportPanel
+};
+//# sourceMappingURL=AiImportPanel.js.map