[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10,"_11":12},"actionData","errors","root",{"_271":-5,"_274":275,"_276":277},"routes/shell",{"_40":41,"_270":-5,"_271":-5,"_272":273},"routes/repo",{"_33":-7,"_34":35,"_36":37,"_38":39,"_40":41,"_42":31,"_43":31,"_44":31,"_45":31,"_46":31,"_47":31,"_48":49,"_50":49,"_51":31,"_52":-7,"_53":-7,"_54":55,"_56":57,"_58":59,"_60":-5,"_61":62,"_63":64,"_65":66,"_67":68},"routes/repo.blob",{"_13":14,"_15":16,"_17":18,"_19":20,"_21":14,"_22":23,"_24":-5,"_25":26,"_27":28,"_28":29,"_30":31,"_32":14},"ref","f6ace1266109c8bcc91bfdbda1eead693579efcd","path","apps/app/src/panels/terminal.tsx","oid","e88d42c213df2548a5322b70cf96c0e1557bee76","size",8857,"commit","mounts",[],"source","plain",{"_13":14,"_15":16},"kind","text","import {\n\tuseEffect,\n\tuseEffectEvent,\n\tuseLayoutEffect,\n\tuseRef,\n\tuseState,\n\tuseSyncExternalStore,\n} from \"react\";\nimport { FitAddon } from \"@xterm/addon-fit\";\nimport { type ITheme, Terminal as Xterm } from \"@xterm/xterm\";\nimport \"@xterm/xterm/css/xterm.css\";\n\nimport { useResolvedTheme } from \"@ace/ui\";\nimport type { TerminalOpened } from \"@ace/host/protocol\";\n\nimport { host, onOpen } from \"../host\";\n\ntype Props = {\n\tchannel: string;\n\tchat: number;\n\tactive: boolean;\n\t/** The host's terminal from an earlier visit, to reattach to. */\n\tterminal?: string;\n\tonTerminal: (terminal: string | undefined) => void;\n};\n\ntype State =\n\t| { status: \"idle\" | \"connecting\" | \"connected\" }\n\t| { status: \"exited\"; code: number }\n\t| { status: \"error\"; error: string };\n\nconst FALLBACK = {\n\tbackground: \"rgb(255 255 255)\",\n\tforeground: \"rgb(31 35 40)\",\n\tcursor: \"rgb(31 35 40)\",\n\tcursorAccent: \"rgb(255 255 255)\",\n\tselectionBackground: \"rgb(83 155 245 / 0.28)\",\n\tselectionForeground: \"rgb(31 35 40)\",\n\tselectionInactiveBackground: \"rgb(83 155 245 / 0.16)\",\n\tblack: \"rgb(87 96 106)\",\n\tred: \"rgb(207 34 46)\",\n\tgreen: \"rgb(26 127 55)\",\n\tyellow: \"rgb(154 103 0)\",\n\tblue: \"rgb(9 105 218)\",\n\tmagenta: \"rgb(130 80 223)\",\n\tcyan: \"rgb(27 124 131)\",\n\twhite: \"rgb(31 35 40)\",\n\tbrightBlack: \"rgb(110 119 129)\",\n\tbrightRed: \"rgb(164 14 38)\",\n\tbrightGreen: \"rgb(17 99 41)\",\n\tbrightYellow: \"rgb(99 60 1)\",\n\tbrightBlue: \"rgb(33 139 255)\",\n\tbrightMagenta: \"rgb(164 117 249)\",\n\tbrightCyan: \"rgb(49 146 170)\",\n\tbrightWhite: \"rgb(31 35 40)\",\n} satisfies ITheme;\n\nlet canvas: HTMLCanvasElement | undefined;\n\n// xterm needs concrete colors, so CSS tokens (oklch, color-mix) are resolved through a canvas.\nfunction paint(input: string, fallback: string) {\n\tcanvas ||= document.createElement(\"canvas\");\n\tcanvas.width = 1;\n\tcanvas.height = 1;\n\tconst ctx = canvas.getContext(\"2d\", { willReadFrequently: true });\n\tif (!ctx) return input || fallback;\n\n\tctx.clearRect(0, 0, 1, 1);\n\tctx.fillStyle = fallback;\n\tctx.fillStyle = input || fallback;\n\tctx.fillRect(0, 0, 1, 1);\n\n\tconst [r, g, b, a] = ctx.getImageData(0, 0, 1, 1).data;\n\tif (a === 255) return `rgb(${r} ${g} ${b})`;\n\treturn `rgb(${r} ${g} ${b} / ${Math.round((a! / 255) * 1000) / 1000})`;\n}\n\nfunction tone(scheme: \"light\" | \"dark\"): ITheme {\n\tconst style = getComputedStyle(document.documentElement);\n\tconst token = (name: string, fallback: string) =>\n\t\tpaint(style.getPropertyValue(name).trim(), fallback);\n\tconst foreground = token(\"--foreground\", FALLBACK.foreground);\n\tconst muted = token(\"--muted-foreground\", FALLBACK.brightBlack);\n\tconst primary = token(\"--primary\", FALLBACK.blue);\n\tconst selection = token(\"--selection\", FALLBACK.selectionBackground);\n\n\treturn {\n\t\t...FALLBACK,\n\t\tbackground: token(scheme === \"dark\" ? \"--sidebar\" : \"--card\", FALLBACK.background),\n\t\tforeground,\n\t\tcursor: foreground,\n\t\tselectionBackground: selection,\n\t\tselectionForeground: foreground,\n\t\tselectionInactiveBackground: selection,\n\t\tblack: muted,\n\t\tred: token(\"--destructive\", FALLBACK.red),\n\t\tgreen: token(\"--success\", FALLBACK.green),\n\t\tyellow: token(\"--warning\", FALLBACK.yellow),\n\t\tblue: primary,\n\t\tmagenta: token(\"--merged\", FALLBACK.magenta),\n\t\tcyan: token(\"--accent-text\", FALLBACK.cyan),\n\t\twhite: foreground,\n\t\tbrightBlack: muted,\n\t\tbrightRed: token(\"--destructive\", FALLBACK.brightRed),\n\t\tbrightGreen: token(\"--success\", FALLBACK.brightGreen),\n\t\tbrightYellow: token(\"--warning-strong\", FALLBACK.brightYellow),\n\t\tbrightBlue: token(\"--primary-hover\", FALLBACK.brightBlue),\n\t\tbrightMagenta: token(\"--merged\", FALLBACK.brightMagenta),\n\t\tbrightCyan: primary,\n\t\tbrightWhite: foreground,\n\t};\n}\n\nfunction bytes(data: string) {\n\tconst text = atob(data);\n\tconst out = new Uint8Array(text.length);\n\tfor (let i = 0; i < text.length; i++) out[i] = text.charCodeAt(i);\n\treturn out;\n}\n\nconst MAC = navigator.platform.startsWith(\"Mac\");\n\n/** A shell in the chat's working directory, run by the host and reattached across reloads. */\nexport function Terminal({ channel, chat, active, terminal, onTerminal }: Props) {\n\tconst shell = useRef(null);\n\tconst fit = useRef(null);\n\tconst id = useRef(terminal);\n\tconst restart = useRef<() => void>(undefined);\n\tconst [node, setNode] = useState(null);\n\tconst [state, setState] = useState({ status: \"idle\" });\n\tconst status = useSyncExternalStore(host.subscribe, () => host.status);\n\tconst scheme = useResolvedTheme();\n\tconst schemeRef = useRef(scheme);\n\t// Open lazily on first view, so restored tabs don't start shells until they're looked at.\n\tconst [opened, setOpened] = useState(active);\n\tconst persist = useEffectEvent(onTerminal);\n\tif (active && !opened) setOpened(true);\n\n\tuseLayoutEffect(() => {\n\t\tschemeRef.current = scheme;\n\t\tif (shell.current) shell.current.options.theme = tone(scheme);\n\t}, [scheme]);\n\n\tuseLayoutEffect(() => {\n\t\tif (!node) return;\n\t\tconst term = new Xterm({\n\t\t\tcursorBlink: true,\n\t\t\tfontFamily: \"ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace\",\n\t\t\tfontSize: 13,\n\t\t\ttheme: tone(schemeRef.current),\n\t\t});\n\t\tconst addon = new FitAddon();\n\t\tterm.loadAddon(addon);\n\t\tterm.open(node);\n\t\taddon.fit();\n\t\tshell.current = term;\n\t\tfit.current = addon;\n\n\t\tterm.attachCustomKeyEventHandler((event) => {\n\t\t\tif (event.type !== \"keydown\" || event.key !== \"k\") return true;\n\t\t\tif (!(MAC ? event.metaKey : event.ctrlKey)) return true;\n\t\t\tterm.clear();\n\t\t\treturn false;\n\t\t});\n\t\tconst input = term.onData((data) => {\n\t\t\tif (!id.current) return restart.current?.();\n\t\t\thost.request({ op: \"terminal-input\", terminal: id.current, data }).catch(() => {});\n\t\t});\n\t\tconst size = term.onResize(({ cols, rows }) => {\n\t\t\tif (!id.current) return;\n\t\t\thost.request({ op: \"terminal-resize\", terminal: id.current, cols, rows }).catch(() => {});\n\t\t});\n\t\tconst observer = new ResizeObserver(() => addon.fit());\n\t\tobserver.observe(node);\n\n\t\treturn () => {\n\t\t\tobserver.disconnect();\n\t\t\tinput.dispose();\n\t\t\tsize.dispose();\n\t\t\tterm.dispose();\n\t\t\tshell.current = null;\n\t\t\tfit.current = null;\n\t\t};\n\t}, [node]);\n\n\tuseEffect(() => {\n\t\tif (!opened || !node) return;\n\t\tlet live = true;\n\t\tlet off: (() => void) | undefined;\n\n\t\tfunction request(terminal: string | undefined) {\n\t\t\tconst term = shell.current!;\n\t\t\treturn host.request({\n\t\t\t\top: \"terminal\",\n\t\t\t\tchannel,\n\t\t\t\tchat,\n\t\t\t\t...(terminal ? { terminal } : {}),\n\t\t\t\tcols: term.cols,\n\t\t\t\trows: term.rows,\n\t\t\t});\n\t\t}\n\n\t\tasync function attach() {\n\t\t\tif (host.status !== \"open\") return;\n\t\t\trestart.current = undefined;\n\t\t\tfit.current?.fit();\n\t\t\tsetState({ status: \"connecting\" });\n\t\t\tconst saved = id.current;\n\t\t\tlet value: TerminalOpened;\n\t\t\ttry {\n\t\t\t\tvalue = await request(saved).catch((error: Error) => {\n\t\t\t\t\t// A terminal that exited or expired on the host can't be reattached; start another.\n\t\t\t\t\tif (!saved || host.status !== \"open\") throw error;\n\t\t\t\t\treturn request(undefined);\n\t\t\t\t});\n\t\t\t} catch (error) {\n\t\t\t\tif (live) setState({ status: \"error\", error: (error as Error).message });\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (!live) return;\n\t\t\t// Subscribe before yielding: output for a new terminal follows its reply on the socket.\n\t\t\toff?.();\n\t\t\tid.current = value.terminal;\n\t\t\tif (value.terminal !== saved) persist(value.terminal);\n\t\t\tconst term = shell.current!;\n\t\t\t// The host replays recent output on reattach; clear first so it doesn't repeat.\n\t\t\tterm.reset();\n\t\t\toff = host.terminal(value.terminal, (frame) => {\n\t\t\t\tif (\"data\" in frame) return term.write(bytes(frame.data));\n\t\t\t\toff?.();\n\t\t\t\tid.current = undefined;\n\t\t\t\tpersist(undefined);\n\t\t\t\trestart.current = () => void attach();\n\t\t\t\tsetState({ status: \"exited\", code: frame.exit });\n\t\t\t});\n\t\t\tsetState({ status: \"connected\" });\n\t\t}\n\n\t\tvoid attach();\n\t\tconst unwatch = onOpen(() => void attach());\n\t\treturn () => {\n\t\t\tlive = false;\n\t\t\tunwatch();\n\t\t\toff?.();\n\t\t\trestart.current = undefined;\n\t\t};\n\t}, [opened, node, channel, chat]);\n\n\tuseEffect(() => {\n\t\tif (!active) return;\n\t\tconst frame = requestAnimationFrame(() => shell.current?.focus());\n\t\treturn () => cancelAnimationFrame(frame);\n\t}, [active]);\n\n\tconst notice = status !== \"open\"\n\t\t? \"Disconnected\"\n\t\t: state.status === \"connecting\"\n\t\t? \"Connecting...\"\n\t\t: state.status === \"error\"\n\t\t? state.error\n\t\t: state.status === \"exited\"\n\t\t? `Exited with code ${state.code}. Press any key to restart.`\n\t\t: undefined;\n\n\treturn (\n\t\t

\n\t\t\t{notice && (\n\t\t\t\t

\n\t\t\t\t\t{notice}\n\t\t\t\t

\n\t\t\t)}\n\t\t\t

\n\t\t\t\t shell.current?.focus()}\n\t\t\t\t/>\n\t\t\t

\n\t\t

\n\t);\n}\n","editable",false,"branch","documentNavigation","repo","githubnext/ace2","repoId","938fe4cd-5320-4e4f-ac7c-87d4dad8490c","ownerId","org:89615882","site","nexthub","private","admin","settings","maintainer","triage","starred","stars",0,"watchers","watching","pinned","notify","views",[226,227,228,229,230,231,232,233,234,235,236,237,238],"navigation",{"_54":55,"_182":183,"_184":185,"_186":187,"_188":189,"_190":191,"_192":193},"sources",[],"viewer","meta",{"_174":175,"_176":177,"_178":179,"_42":31,"_180":166,"_181":31,"_48":49,"_50":49},"branches",[81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145,146,147,148,149,150,151,152,153,154,155,156,157,158,159,160,161,162,163,164,165,166,167,168,169,170,171,172,173],"tags",[69,70,71,72,73,74,75,76,77,78,79,80],"cloneUrl","https://git.nexthub.sh/githubnext/ace2.git","desktop-canary-v0.0.10","desktop-canary-v0.0.11","desktop-canary-v0.0.12","desktop-canary-v0.0.13","desktop-canary-v0.0.14","desktop-canary-v0.0.15","desktop-canary-v0.0.16","desktop-canary-v0.0.18","desktop-canary-v0.0.21","desktop-canary-v0.0.7","desktop-canary-v0.0.8","desktop-canary-v0.0.9","amber-beacon/composer-effort","brisk-ember/github-avatars","brisk-grove/image-paste-91","calm-anchor/fix-streaming-draft-overlap","calm-grove/composer-agent-mode","cloud-pilot-ops/canary-0-0-17","cloud-pilot-ops/cloud-move","cloud-pilot-ops/cloud-pilot","codex/agentation-shortcut","codex/annotation-polish","codex/browser-pages","codex/canary-0-0-21","codex/canary-0.0.11","codex/channel-delete-close","codex/channel-watch-recovery","codex/clipboard-files-write","codex/composer-coordinate-check","codex/computer-use-validation","codex/desktop-actions","codex/desktop-app-search","codex/desktop-app-state","codex/desktop-availability","codex/desktop-click-variants","codex/desktop-clipboard","codex/desktop-clipboard-files","codex/desktop-clipboard-image","codex/desktop-clipboard-image-write","codex/desktop-clipboard-text","codex/desktop-drag","codex/desktop-keyboard","codex/desktop-launch","codex/desktop-locked-feedback","codex/desktop-menu-command","codex/desktop-menu-inventory","codex/desktop-minimize","codex/desktop-open","codex/desktop-pointer","codex/desktop-quit","codex/desktop-selection-keys","codex/desktop-tool-guidance","codex/desktop-tools-extraction","codex/desktop-window-close","codex/desktop-window-geometry","codex/desktop-windows","codex/dev-permission-identity","codex/durable-composer-drafts","codex/fix-message-clipping","codex/lane-base-96","codex/native-patch-prefix","codex/peekaboo","codex/peer-channel-messaging","codex/pixel-snapshot-authority","codex/publish-canary-0-0-21","codex/readme-security","codex/settings-refresh","codex/stale-click-refusal","codex/tab-renaming-api","codex/team-agent-access","codex/team-channel-sections","codex/team-dogfood-integration","codex/webkit-coordinate-window","codex/webkit-desktop-focus","deft-beacon/helper-isolation","deft-grove/align-avatar-byline","deft-grove/build-canary-0-0-18","deft-grove/canary-github-releases","deft-grove/ship-canary-0-0-18","deft-meadow/details-sidebar","fair-ember/canary-0-0-13","fair-ember/canary-0-0-14","fair-fjord/all-projects","feat/github-cache","feat/rebuild","fix/channel-credentials","glad-anchor/restore-message-queue","glad-ember/archive-inactive-channels","glad-fjord/project-identity","glad-orbit/channel-progress","glad-ridge/terminal-replay-input","hazy-anchor/github-row-actions","hazy-ember/channel-access-toggles","hazy-grove/all-projects-add-channel","local-project-setup/build-canary-0-0-20","local-project-setup/canary-0-0-20","local-project-setup/local-project-setup","main","mellow-ridge/canary-0-0-16","mellow-ridge/top-bar-drag-area","nimble-cedar/modal-top-offset","nimble-meadow/canary-0-0-15","remote-channel-load/build-canary-0-0-19","remote-channel-load/canary-0-0-19","remote-channel-load/fix-remote-channel-load","description","Ace: a collaborative coding environment on the team's own machines","owner","githubnext","section","","head","empty","pins",[208,209,210],"documents",{"_203":204,"_205":206},"code",{"_199":200,"_201":202},"automations",{"_196":197,"_198":-5},"delivery",{"_194":49,"_195":-5},"tag","9Rn62lcgXCFfpmCuooTjLxGyUf8","releases","applications","workflows",2,"deployments","commits",215,"changes",1,"counts",{"_207":206},"total",86,"issue",{"_211":201,"_213":224,"_15":201,"_215":225,"_52":217,"_218":31,"_219":217,"_220":202},{"_211":221,"_213":222,"_15":221,"_215":223,"_52":217,"_218":31,"_219":217,"_220":49},{"_211":212,"_213":214,"_15":212,"_215":216,"_52":217,"_218":31,"_219":217,"_220":206},"id","issues","name","Issues","filters",{},true,"saved","pinnable","count","tasks","Tasks",{},"Changes",{},{"_211":201,"_213":224,"_15":201,"_215":269,"_52":217,"_218":31,"_219":217},{"_211":221,"_213":222,"_15":221,"_215":268,"_52":217,"_218":31,"_219":217},{"_211":212,"_213":214,"_15":212,"_215":267,"_52":217,"_218":31,"_219":217},{"_211":264,"_213":265,"_15":264,"_215":266,"_52":31,"_218":31,"_219":217},{"_211":261,"_213":262,"_15":261,"_215":263,"_52":31,"_218":31,"_219":217},{"_211":196,"_213":259,"_15":188,"_215":260,"_52":31,"_218":31,"_219":217},{"_211":198,"_213":256,"_15":257,"_215":258,"_52":31,"_218":31,"_219":217},{"_211":194,"_213":254,"_15":194,"_215":255,"_52":31,"_218":31,"_219":217},{"_211":250,"_213":251,"_15":252,"_215":253,"_52":31,"_218":31,"_219":217},{"_211":184,"_213":248,"_15":184,"_215":249,"_52":31,"_218":31,"_219":31},{"_211":245,"_213":246,"_15":245,"_215":247,"_52":31,"_218":31,"_219":31},{"_211":242,"_213":243,"_15":242,"_215":244,"_52":31,"_218":31,"_219":31},{"_211":239,"_213":240,"_15":239,"_215":241,"_52":31,"_218":31,"_219":31},"decisions","Decisions",{},"changelog","Changelog",{},"roadmap","Roadmap",{},"Documents",{},"activity","Activity","insights",{},"Releases",{},"Deployments","automations/deployments",{},"Workflows",{},"discussions","Discussions",{},"goals","Goals",{},{},{},{},"groups","user","agents",[],"now",1794577253164,"sidebar","expanded"]