@backmatter/studio 0.0.15 → 0.0.16

package/src/chat/ChatProvider.tsx

@@ -24,6 +24,7 @@ import {
   createThread,
   fetchAiModels,
   fetchThread,
+  fetchThreads,
   keepAllChanges,
   keepChange,
   notifyHeadChanged,
@@ -48,6 +49,7 @@ import {
   addMention as addMentionTo,
   addPointer as addPointerTo,
   buildChatContext,
+  codeSessionChatContext,
   removeMention as removeMentionFrom,
   removePointer as removePointerFrom,
   type ChatPointer,
@@ -55,6 +57,7 @@ import {
 } from "./chat-context";
 import {
   changeIdsInMessage,
+  checkoutWriteReloads,
   isWriteTool,
   changesInToolOutput,
   detailForTreePatch,
@@ -62,6 +65,7 @@ import {
   type TreeStatusPatch,
 } from "./chat-helpers";
 import {
+  allowsPanelAction,
   initialPanelState,
   panelReducer,
   type PanelAction,
@@ -84,7 +88,8 @@ export type ChatUIValue = {
   model: string | null;
   setModel: (id: string) => void;
   threadId: string | null;
-  openThread: (threadId: string) => void;
+  /** Refuses a thread that belongs to a different surface (editor vs a code session). */
+  openThread: (thread: { id: string; codeSessionId?: string | null }) => void;
   newThread: () => void;
   mentions: DocRef[];
   addMention: (ref: DocRef) => void;
@@ -105,6 +110,13 @@ export type ChatUIValue = {
   /** Bumped whenever a thread is created/renamed/deleted so history can refetch. */
   threadsVersion: number;
   bumpThreads: () => void;
+  /** Set when this provider is scoped to a code session checkout. */
+  codeSessionId: string | null;
+  /** Preview route included in chat context, or null when dismissed. */
+  route: string | null;
+  /** The document that route resolves to, when a model claims it. */
+  viewed: DocRef | null;
+  dismissRoute: () => void;
 };
 
 const ChatUIContext = createContext<ChatUIValue | null>(null);
@@ -155,6 +167,14 @@ export function useChatSession(): ChatSessionValue {
 
 const modelStorageKey = (ws: string) => `backmatter-chat-model:${ws}`;
 
+function newestThread(threads: readonly { id: string; updatedAt: string }[]): string | null {
+  let best: { id: string; updatedAt: string } | null = null;
+  for (const thread of threads) {
+    if (!best || thread.updatedAt > best.updatedAt) best = thread;
+  }
+  return best?.id ?? null;
+}
+
 /** Apply tool statuses locally so the top bar moves before the next git poll. */
 function publishTreePatches(workspaceId: string, patches: TreeStatusPatch[]) {
   let published = false;
@@ -183,18 +203,40 @@ export function ChatProvider({
   workspaceId,
   startOpen = false,
   pointer = false,
+  codeSessionId = null,
+  route = null,
+  viewed = null,
+  onRouteDismiss,
+  onCheckoutWrite,
+  onTurnSettled,
   children,
 }: {
   workspaceId: string;
   startOpen?: boolean;
   /** Dev bar chat can point at elements on the host page. */
   pointer?: boolean;
+  codeSessionId?: string | null;
+  route?: string | null;
+  /** Document for `route`, resolved by the caller. The agent still receives the URL. */
+  viewed?: DocRef | null;
+  onRouteDismiss?: (route: string) => void;
+  /** A file tool finished in the checkout. The preview does not hot-reload on its own. */
+  onCheckoutWrite?: () => void;
+  /** The reply finished, so a code session can read the edit set the turn just saved. */
+  onTurnSettled?: () => void;
   children: React.ReactNode;
 }) {
   const [panel, dispatch] = useReducer(
     panelReducer,
     startOpen ? { ...initialPanelState, mode: "open" as const } : initialPanelState,
   );
+  const dispatchPanel = useCallback(
+    (action: PanelAction) => {
+      if (!allowsPanelAction(action, Boolean(codeSessionId))) return;
+      dispatch(action);
+    },
+    [codeSessionId],
+  );
   const [aiAvailable, setAiAvailable] = useState<boolean | null>(null);
   const [models, setModels] = useState<AiModelInfo[]>([]);
   const [tier, setTier] = useState<AiTier>("ask");
@@ -206,8 +248,10 @@ export function ChatProvider({
   const [pointers, setPointers] = useState<ChatPointer[]>([]);
   const [previewPointer, setPreviewPointer] = useState(false);
   const [pointerHighlight, setPointerHighlight] = useState<"local" | "channel">("local");
-  const [includeFocus, setIncludeFocus] = useState(true);
+  const [includeFocus, setIncludeFocus] = useState(!codeSessionId);
   const [threadsVersion, setThreadsVersion] = useState(0);
+  // Bumped when the person picks a chat, so a late session list cannot replace it.
+  const restore = useRef(0);
   const { focus } = useEditorFocus();
 
   // Models + availability.
@@ -234,15 +278,30 @@ export function ChatProvider({
     };
   }, [workspaceId]);
 
-  // Reset per-workspace session state.
+  // Reset per-workspace session state. A code session reopens its newest chat.
   useEffect(() => {
     setThreadId(null);
     setFreshThread(false);
     setPendingText(null);
     setMentions([]);
     setPointers([]);
-    setIncludeFocus(true);
-  }, [workspaceId]);
+    setIncludeFocus(!codeSessionId);
+    if (!codeSessionId) return;
+    const token = ++restore.current;
+    fetchThreads(workspaceId, codeSessionId)
+      .then((res) => {
+        if (restore.current !== token) return;
+        const latest = newestThread(res.threads);
+        if (!latest) return;
+        setThreadId(latest);
+      })
+      .catch(() => {
+        // A missed list leaves the blank chat. Sending still starts one.
+      });
+    return () => {
+      restore.current += 1;
+    };
+  }, [workspaceId, codeSessionId]);
 
   const setModel = useCallback(
     (id: string) => {
@@ -252,14 +311,20 @@ export function ChatProvider({
     [workspaceId],
   );
 
-  const openThread = useCallback((id: string) => {
-    setThreadId(id);
-    setFreshThread(false);
-    setPendingText(null);
-    dispatch({ type: "showChat" });
-  }, []);
+  const openThread = useCallback(
+    (thread: { id: string; codeSessionId?: string | null }) => {
+      if ((thread.codeSessionId ?? null) !== (codeSessionId ?? null)) return;
+      restore.current += 1;
+      setThreadId(thread.id);
+      setFreshThread(false);
+      setPendingText(null);
+      dispatch({ type: "showChat" });
+    },
+    [codeSessionId],
+  );
 
   const newThread = useCallback(() => {
+    restore.current += 1;
     setThreadId(null);
     setFreshThread(false);
     setPendingText(null);
@@ -275,8 +340,8 @@ export function ChatProvider({
     setMentions((prev) => removeMentionFrom(prev, ref));
   }, []);
   const addPointer = useCallback((next: ChatPointer) => {
-    setPointers((prev) => addPointerTo(prev, next));
-  }, []);
+    setPointers((prev) => addPointerTo(prev, next, codeSessionId ? "replace" : "append"));
+  }, [codeSessionId]);
   const removePointer = useCallback((next: ChatPointer) => {
     setPointers((prev) => removePointerFrom(prev, next));
   }, []);
@@ -289,28 +354,40 @@ export function ChatProvider({
     selection: null,
     mentions: [],
     pointers: [],
+    route: null,
   }));
-  contextRef.current = () => buildChatContext({ focus, includeFocus, mentions, pointers });
+  contextRef.current = () =>
+    codeSessionId
+      ? codeSessionChatContext({ pointers, route })
+      : buildChatContext({ focus, includeFocus, mentions, pointers });
   const modelRef = useRef<string | null>(model);
   modelRef.current = model;
 
   // Creating a thread lazily on first send.
   const startThread = useCallback(
     async (text: string) => {
-      const res = await createThread(workspaceId);
+      restore.current += 1;
+      const res = await createThread(
+        workspaceId,
+        codeSessionId ? { codeSessionId } : undefined,
+      );
       setPendingText(text);
       setFreshThread(true);
       setThreadId(res.thread.id);
       bumpThreads();
     },
-    [workspaceId, bumpThreads],
+    [workspaceId, bumpThreads, codeSessionId],
   );
 
+  const dismissRoute = useCallback(() => {
+    if (route && onRouteDismiss) onRouteDismiss(route);
+  }, [route, onRouteDismiss]);
+
   const ui = useMemo<ChatUIValue>(
     () => ({
       workspaceId,
       panel,
-      dispatch,
+      dispatch: dispatchPanel,
       aiAvailable,
       models,
       tier,
@@ -335,10 +412,15 @@ export function ChatProvider({
       focus,
       threadsVersion,
       bumpThreads,
+      codeSessionId,
+      route,
+      viewed,
+      dismissRoute,
     }),
     [
       workspaceId,
       panel,
+      dispatchPanel,
       aiAvailable,
       models,
       tier,
@@ -361,6 +443,10 @@ export function ChatProvider({
       focus,
       threadsVersion,
       bumpThreads,
+      codeSessionId,
+      route,
+      viewed,
+      dismissRoute,
     ],
   );
 
@@ -380,13 +466,15 @@ export function ChatProvider({
           getContext={() => contextRef.current()}
           getModel={() => modelRef.current}
           onThreadTouched={bumpThreads}
+          onCheckoutWrite={onCheckoutWrite}
+          onTurnSettled={onTurnSettled}
         >
           {scoped}
         </ChatSession>
       ) : (
         <EmptySession onFirstSend={startThread}>{scoped}</EmptySession>
       ),
-    [threadId, workspaceId, freshThread, pendingText, bumpThreads, startThread],
+    [threadId, workspaceId, freshThread, pendingText, bumpThreads, startThread, onCheckoutWrite, onTurnSettled],
   );
 
   return (
@@ -461,6 +549,8 @@ type SessionProps = {
   getContext: () => ChatRequestContext;
   getModel: () => string | null;
   onThreadTouched: () => void;
+  onCheckoutWrite?: () => void;
+  onTurnSettled?: () => void;
   children: React.ReactNode;
 };
 
@@ -539,6 +629,8 @@ function LiveSession({
   getContext,
   getModel,
   onThreadTouched,
+  onCheckoutWrite,
+  onTurnSettled,
   children,
 }: SessionProps & {
   thread: ChatThread | null;
@@ -574,7 +666,10 @@ function LiveSession({
     id: threadId,
     messages: initialMessages,
     transport,
-    onFinish: () => onThreadTouched(),
+    onFinish: () => {
+      onThreadTouched();
+      onTurnSettled?.();
+    },
   });
 
   const { messages, status, sendMessage } = chat;
@@ -632,6 +727,7 @@ function LiveSession({
         if (streaming && write && ref) editingKey = docKey(ref);
         if (part.state === "output-available" && !seen.has(part.toolCallId)) {
           seen.add(part.toolCallId);
+          if (checkoutWriteReloads(name, part.output)) onCheckoutWrite?.();
           const patches = treeStatusPatches(part.output);
           if (patches.length > 0) publishTreePatches(workspaceId, patches);
           const found = write ? changesInToolOutput(part.output) : [];
@@ -650,7 +746,7 @@ function LiveSession({
       }
     }
     setAiEditingDocKey(streaming ? editingKey : null);
-  }, [messages, status, setAiEditingDocKey, workspaceId]);
+  }, [messages, status, setAiEditingDocKey, workspaceId, onCheckoutWrite]);
 
   useEffect(() => () => setAiEditingDocKey(null), [setAiEditingDocKey]);
 

package/src/chat/Composer.tsx

@@ -1,5 +1,5 @@
 // packages/studio/src/chat/Composer.tsx
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import * as stylex from "@stylexjs/stylex";
 import { docKey, type DocRef } from "../chrome/EditorFocusContext";
 import { colors, radius, space, type } from "../styles/tokens.stylex";
@@ -26,6 +26,27 @@ function isMentionKey(key: string): key is MentionKey {
 
 export { POINTER_ARM_EVENT } from "./pointer-arm";
 
+/** The page open in the code session preview. Same row as the editor's open document. */
+export function RouteChip({
+  route,
+  doc,
+  onDismiss,
+}: {
+  route: string;
+  doc?: { type: string; slug: string } | null;
+  onDismiss: () => void;
+}) {
+  return (
+    <ContextRow
+      icon={<FileIcon size={13} />}
+      {...(doc ? { type: doc.type, slug: doc.slug } : { label: route })}
+      meta="in preview"
+      removeLabel="Remove the page from context"
+      onRemove={onDismiss}
+    />
+  );
+}
+
 function postPointer(on: boolean) {
   if (typeof window === "undefined") return;
   window.dispatchEvent(new CustomEvent(POINTER_ARM_EVENT, { detail: { on } }));
@@ -46,12 +67,21 @@ export function Composer({ autoFocus }: { autoFocus: boolean }) {
   const busy = session.status === "streaming" || session.status === "submitted";
   const canSend = text.trim().length > 0 && !busy && ui.aiAvailable === true;
 
-  // Auto-grow.
-  useEffect(() => {
+  // Auto-grow. Measuring must not leave a 1px swing: that resizes the thread
+  // on every key, and the thread then tries to scroll to the bottom.
+  useLayoutEffect(() => {
     const el = ref.current;
     if (!el) return;
+    const previous = el.offsetHeight;
+    el.style.overflowY = "hidden";
     el.style.height = "0px";
-    el.style.height = `${Math.min(el.scrollHeight, 180)}px`;
+    const next = Math.min(el.scrollHeight, 180);
+    if (previous > 0 && Math.abs(next - previous) <= 1) {
+      el.style.height = `${previous}px`;
+      return;
+    }
+    el.style.height = `${next}px`;
+    if (next >= 180) el.style.overflowY = "auto";
   }, [text]);
 
   useEffect(() => {
@@ -138,10 +168,12 @@ export function Composer({ autoFocus }: { autoFocus: boolean }) {
     setMention(null);
   }
 
-  const focusChip = ui.focus && ui.includeFocus ? ui.focus.docRef : null;
+  const sessionChat = Boolean(ui.codeSessionId);
+  const focusChip = !sessionChat && ui.focus && ui.includeFocus ? ui.focus.docRef : null;
+  const pageChip = sessionChat && ui.route ? ui.route : null;
   const selectionActive =
     ui.focus?.selection && ui.focus.selection.end > ui.focus.selection.start;
-  const hasContext = Boolean(focusChip || ui.mentions.length > 0);
+  const hasContext = Boolean(focusChip || pageChip || ui.mentions.length > 0);
 
   return (
     <div {...stylex.props(styles.wrap)}>
@@ -168,6 +200,13 @@ export function Composer({ autoFocus }: { autoFocus: boolean }) {
                 onRemove={() => ui.setIncludeFocus(false)}
               />
             ) : null}
+            {pageChip ? (
+              <RouteChip
+                route={pageChip}
+                doc={ui.viewed}
+                onDismiss={() => ui.dismissRoute()}
+              />
+            ) : null}
             {ui.mentions.map((m) => (
               <ContextRow
                 key={docKey(m)}
@@ -232,6 +271,7 @@ export function Composer({ autoFocus }: { autoFocus: boolean }) {
           {...stylex.props(styles.textarea)}
         />
         <div {...stylex.props(styles.footer)}>
+          {!sessionChat ? (
           <Tooltip label="Mention a document (@)">
             <button
               type="button"
@@ -257,6 +297,7 @@ export function Composer({ autoFocus }: { autoFocus: boolean }) {
               <AtIcon />
             </button>
           </Tooltip>
+          ) : null}
           <span {...stylex.props(styles.spacer)} />
           {ui.pointer ? (
             <Tooltip label={pointing ? "Stop pointing" : "Point at an element on the page"}>
@@ -276,7 +317,7 @@ export function Composer({ autoFocus }: { autoFocus: boolean }) {
               </button>
             </Tooltip>
           ) : null}
-          {ui.focus ? (
+          {!sessionChat && ui.focus ? (
             <Tooltip
               label={
                 ui.includeFocus

package/src/chat/PointerChip.tsx

@@ -11,20 +11,24 @@ import { CloseIcon, PointerIcon } from "./icons";
 const hover = "@media (hover: hover)";
 
 export function pointerKey(pointer: ChatPointer): string {
-  return `${pointer.type}/${pointer.slug}/${pointer.blockId ?? ""}/${pointer.quote}`;
+  return `${pointer.type}/${pointer.slug}/${pointer.blockId ?? ""}/${pointer.component ?? ""}/${pointer.file ?? ""}:${pointer.line ?? ""}/${pointer.quote}`;
 }
 
 function pointerLabel(pointer: ChatPointer): string {
   const quote = pointer.quote.replace(/\s+/g, " ").trim();
   const short = quote.length > 42 ? `${quote.slice(0, 41)}…` : quote;
-  if (pointer.blockType && short) return `${pointer.blockType} · “${short}”`;
-  if (pointer.blockType) return pointer.blockType;
-  return short ? `“${short}”` : "element";
+  const kind = pointer.blockType || pointer.component;
+  const file = pointer.file
+    ? `${pointer.file}${pointer.line ? `:${pointer.line}` : ""}`
+    : "";
+  const parts = [kind && short ? `${kind} · “${short}”` : kind || (short ? `“${short}”` : "element")];
+  if (file) parts.push(file);
+  return parts.join(" · ");
 }
 
 function pointerChipLabel(pointer: ChatPointer): string {
   const quote = pointer.quote.replace(/\s+/g, " ").trim();
-  const raw = quote || pointer.blockType || `${pointer.type}/${pointer.slug}`;
+  const raw = quote || pointer.component || pointer.blockType || `${pointer.type}/${pointer.slug}`;
   return raw.length > 32 ? `${raw.slice(0, 31)}…` : raw;
 }
 

package/src/chat/ThreadHistory.tsx

@@ -21,7 +21,7 @@ export function ThreadHistory() {
 
   useEffect(() => {
     let cancelled = false;
-    fetchThreads(ui.workspaceId)
+    fetchThreads(ui.workspaceId, ui.codeSessionId ?? undefined)
       .then((res) => {
         if (!cancelled) setThreads(res.threads);
       })
@@ -31,7 +31,7 @@ export function ThreadHistory() {
     return () => {
       cancelled = true;
     };
-  }, [ui.workspaceId, ui.threadsVersion]);
+  }, [ui.workspaceId, ui.codeSessionId, ui.threadsVersion]);
 
   const filtered = useMemo(() => {
     const q = query.trim().toLowerCase();
@@ -110,7 +110,7 @@ export function ThreadHistory() {
                 >
                   <button
                     type="button"
-                    onClick={() => ui.openThread(t.id)}
+                    onClick={() => ui.openThread(t)}
                     {...stylex.props(styles.rowBtn)}
                   >
                     <span {...stylex.props(styles.title)}>{t.title || "New chat"}</span>

package/src/chat/chat-context.ts

@@ -14,6 +14,14 @@ export type ChatPointer = {
   blockType: string | null;
   blockIndex: number | null;
   quote: string;
+  /** React component that rendered the element, when the dev server exposes it. */
+  component?: string | null;
+  /** Checkout-relative source path. */
+  file?: string | null;
+  line?: number | null;
+  column?: number | null;
+  /** Component names from the element toward the layout. */
+  stack?: string[];
 };
 
 export const POINTER_CAP = 8;
@@ -24,14 +32,23 @@ export type ChatRequestContext = {
   selection: { start: number; end: number } | null;
   mentions: DocRef[];
   pointers: ChatPointer[];
+  route: string | null;
 };
 
+function parseChatRoute(raw: unknown): string | null {
+  if (typeof raw !== "string") return null;
+  return raw.startsWith("/") && !raw.startsWith("//") ? raw : null;
+}
+
 function samePointer(a: ChatPointer, b: ChatPointer): boolean {
   return (
     a.type === b.type &&
     a.slug === b.slug &&
     a.blockId === b.blockId &&
-    a.quote === b.quote
+    a.quote === b.quote &&
+    (a.component ?? null) === (b.component ?? null) &&
+    (a.file ?? null) === (b.file ?? null) &&
+    (a.line ?? null) === (b.line ?? null)
   );
 }
 
@@ -49,7 +66,12 @@ export function pointersFromMetadata(metadata: unknown): ChatPointer[] {
   return pointers.slice(0, POINTER_CAP);
 }
 
-export function addPointer(list: ChatPointer[], next: ChatPointer): ChatPointer[] {
+export function addPointer(
+  list: ChatPointer[],
+  next: ChatPointer,
+  mode: "append" | "replace" = "append",
+): ChatPointer[] {
+  if (mode === "replace") return [next];
   if (list.some((item) => samePointer(item, next))) return list;
   const added = [...list, next];
   return added.length > POINTER_CAP ? added.slice(added.length - POINTER_CAP) : added;
@@ -80,14 +102,50 @@ export function chatPointerFromGrab(
     blockType: value.blockType,
     blockIndex: value.blockIndex,
     quote: value.quote.replace(/\s+/g, " ").trim().slice(0, 240),
+    ...placeFrom(value),
+  };
+}
+
+function placeFrom(value: Record<string, unknown>): Pick<ChatPointer, "component" | "file" | "line" | "column" | "stack"> {
+  const component = typeof value.component === "string" && value.component ? value.component.slice(0, 80) : null;
+  const file =
+    typeof value.file === "string" && /^[\w./@+-]+\.(?:tsx|ts|jsx|js|mdx)$/.test(value.file) && !value.file.includes("..")
+      ? value.file.slice(0, 240)
+      : null;
+  const line = typeof value.line === "number" && Number.isInteger(value.line) && value.line > 0 ? value.line : null;
+  const column = typeof value.column === "number" && Number.isInteger(value.column) && value.column > 0 ? value.column : null;
+  const stack = Array.isArray(value.stack)
+    ? value.stack.filter((item): item is string => typeof item === "string" && item.length > 0).slice(0, 4)
+    : [];
+  return {
+    ...(component ? { component } : {}),
+    ...(file ? { file } : {}),
+    ...(line ? { line } : {}),
+    ...(column ? { column } : {}),
+    ...(stack.length > 0 ? { stack } : {}),
   };
 }
 
+/** A code session sends the route and the pointed blocks, not the open document. */
+export function codeSessionChatContext(input: {
+  pointers: ChatPointer[];
+  route?: string | null;
+}): ChatRequestContext {
+  return buildChatContext({
+    focus: null,
+    includeFocus: false,
+    mentions: [],
+    pointers: input.pointers,
+    route: input.route,
+  });
+}
+
 export function buildChatContext(input: {
   focus: EditorFocus | null;
   includeFocus: boolean;
   mentions: DocRef[];
   pointers: ChatPointer[];
+  route?: string | null;
 }): ChatRequestContext {
   const focusDoc = input.includeFocus && input.focus ? input.focus.docRef : null;
   const selection =
@@ -105,7 +163,13 @@ export function buildChatContext(input: {
     if (pointers.some((item) => samePointer(item, pointer))) continue;
     pointers.push(pointer);
   }
-  return { focusDoc, selection, mentions, pointers: pointers.slice(-POINTER_CAP) };
+  return {
+    focusDoc,
+    selection,
+    mentions,
+    pointers: pointers.slice(-POINTER_CAP),
+    route: parseChatRoute(input.route),
+  };
 }
 
 export function addMention(list: DocRef[], ref: DocRef): DocRef[] {

package/src/chat/chat-helpers.ts

@@ -10,6 +10,18 @@ export type WriteToolOutput =
   | { ok: true; change?: ChatChangeSummary; changes?: ChatChangeSummary[] }
   | { ok: false; error: string; message: string };
 
+export function isCheckoutWriteTool(name: string) {
+  return name === "writeFile" || name === "editFile" || name === "deleteFile";
+}
+
+/** A finished checkout tool changed the host, so the preview should load again. */
+export function checkoutWriteReloads(name: string, output: unknown): boolean {
+  const body = output as { ok?: boolean } | undefined;
+  if (isCheckoutWriteTool(name)) return !body || body.ok !== false;
+  if (name === "runCommand") return body?.ok === true;
+  return false;
+}
+
 export function isWriteTool(name: string) {
   return (
     name === "writeDoc" ||

package/src/chat/chat-state.ts

@@ -57,3 +57,14 @@ export function panelReducer(state: PanelState, action: PanelAction): PanelState
 export function isPanelVisible(mode: PanelMode): boolean {
   return mode === "open" || mode === "fullscreen";
 }
+
+/** A docked column has no window chrome: it cannot close, minimize, or go fullscreen. */
+export function allowsPanelAction(action: PanelAction, docked: boolean): boolean {
+  if (!docked) return true;
+  return (
+    action.type !== "toggle" &&
+    action.type !== "close" &&
+    action.type !== "minimize" &&
+    action.type !== "toggleFullscreen"
+  );
+}