Brendonovich · opencode-agent · Jan 9, 2026
diff --git a/interface/src/components/Graph/CommentBox.tsx b/interface/src/components/Graph/CommentBox.tsx
@@ -124,6 +124,7 @@ export function CommentBox(props: Props) {
 
 	return (
 		<div
+			data-commentbox-id={box().id}
 			class={clsx(
 				"rounded border-black/75 border absolute top-0 left-0",
 				isSelected() && "ring-2 ring-mg-focus",

diff --git a/interface/src/components/Graph/Graph.tsx b/interface/src/components/Graph/Graph.tsx
@@ -27,9 +27,10 @@ import {
 	type GraphState,
 	toGraphSpace,
 	toScreenSpace,
+	type SelectedItemID,
 } from "./Context";
 import { Node } from "./Node";
-import { GRID_SIZE } from "./util";
+import { GRID_SIZE, handleSelectableItemPointerDown } from "./util";
 
 type PanState = "none" | "waiting" | "active";
 
@@ -514,6 +515,48 @@ export const Graph = (props: Props) => {
 												});
 
 												if (gesture.pointers.length === 1) {
+													const target = e.target as HTMLElement;
+													const button = target.closest("button");
+
+													if (
+														button?.classList.contains("cursor-pointer") &&
+														button.classList.contains("outline-none") &&
+														button.classList.contains("h-full")
+													) {
+														const nodeElement = button.closest(
+															"[class*='absolute']",
+														);
+
+														if (nodeElement) {
+															const nodeIdAttr =
+																nodeElement.getAttribute("data-node-id");
+															if (nodeIdAttr) {
+																handleSelectableItemPointerDown(
+																	e as unknown as MouseEvent,
+																	ctx,
+																	interfaceCtx,
+																	{ type: "node", id: parseInt(nodeIdAttr) },
+																);
+																return;
+															}
+
+															const boxIdAttr =
+																nodeElement.getAttribute("data-commentbox-id");
+															if (boxIdAttr) {
+																handleSelectableItemPointerDown(
+																	e as unknown as MouseEvent,
+																	ctx,
+																	interfaceCtx,
+																	{
+																		type: "commentBox",
+																		id: parseInt(boxIdAttr),
+																	},
+																);
+																return;
+															}
+														}
+													}
+
 													createDragAreaSession(start);
 												} else if (gesture.pointers.length === 2) {
 													const left = gesture.pointers[0]!;

diff --git a/interface/src/components/Graph/Node.tsx b/interface/src/components/Graph/Node.tsx
@@ -230,6 +230,7 @@ export const Node = (props: Props) => {
 		<NodeContext.Provider value={node()}>
 			<div
 				ref={ref}
+				data-node-id={node().id}
 				class={clsx(
 					"absolute top-0 left-0 text-[12px] overflow-hidden rounded-lg flex flex-col bg-black/75 border-black/75 border-2",
 					isSelected() && "ring-2 ring-mg-focus opacity-100",

diff --git a/packages/icons/auto-imports.d.ts b/packages/icons/auto-imports.d.ts
@@ -4,40 +4,40 @@
 // noinspection JSUnusedGlobalSymbols
 // Generated by unplugin-auto-import
 // biome-ignore lint: disable
-export {}
+export {};
 declare global {
-  const IconAntDesignDeleteOutlined: typeof import('~icons/ant-design/delete-outlined.jsx').default
-  const IconAntDesignEditOutlined: typeof import('~icons/ant-design/edit-outlined.jsx').default
-  const IconBiX: typeof import('~icons/bi/x.jsx').default
-  const IconGgImport: typeof import('~icons/gg/import.jsx').default
-  const IconGgSpinner: typeof import('~icons/gg/spinner.jsx').default
-  const IconGravityUiPlugConnection: typeof import('~icons/gravity-ui/plug-connection.jsx').default
-  const IconHeroiconsXMarkSolid: typeof import('~icons/heroicons/x-mark-solid.jsx').default
-  const IconIcBaselineDiscord: typeof import('~icons/ic/baseline-discord.jsx').default
-  const IconIcRoundShare: typeof import('~icons/ic/round-share.jsx').default
-  const IconLucideChevronDown: typeof import('~icons/lucide/chevron-down.jsx').default
-  const IconMaterialSymbolsAddRounded: typeof import('~icons/material-symbols/add-rounded.jsx').default
-  const IconMaterialSymbolsArrowDropDownRounded: typeof import('~icons/material-symbols/arrow-drop-down-rounded.jsx').default
-  const IconMaterialSymbolsArrowDropUpRounded: typeof import('~icons/material-symbols/arrow-drop-up-rounded.jsx').default
-  const IconMaterialSymbolsArrowRightRounded: typeof import('~icons/material-symbols/arrow-right-rounded.jsx').default
-  const IconMaterialSymbolsDeleteOutline: typeof import('~icons/material-symbols/delete-outline.jsx').default
-  const IconMdiDotsHorizontal: typeof import('~icons/mdi/dots-horizontal.jsx').default
-  const IconMdiGithub: typeof import('~icons/mdi/github.jsx').default
-  const IconOcticonProjectSymlink16: typeof import('~icons/octicon/project-symlink16.jsx').default
-  const IconPhExport: typeof import('~icons/ph/export.jsx').default
-  const IconPhSquareSplitHorizontal: typeof import('~icons/ph/square-split-horizontal.jsx').default
-  const IconRadixIconsExternalLink: typeof import('~icons/radix-icons/external-link.jsx').default
-  const IconRiTwitterXFill: typeof import('~icons/ri/twitter-x-fill.jsx').default
-  const IconSvgSpinners90Ring: typeof import('~icons/svg-spinners/90-ring.jsx').default
-  const IconSystemUiconsReset: typeof import('~icons/system-uicons/reset.jsx').default
-  const IconTablerArrowsDiagonal: typeof import('~icons/tabler/arrows-diagonal.jsx').default
-  const IconTablerArrowsDiagonalMinimize2: typeof import('~icons/tabler/arrows-diagonal-minimize2.jsx').default
-  const IconTablerCheck: typeof import('~icons/tabler/check.jsx').default
-  const IconTablerChevronDown: typeof import('~icons/tabler/chevron-down.jsx').default
-  const IconTablerChevronRight: typeof import('~icons/tabler/chevron-right.jsx').default
-  const IconTablerCircle: typeof import('~icons/tabler/circle.jsx').default
-  const IconTablerCopy: typeof import('~icons/tabler/copy.jsx').default
-  const IconTablerDeviceDesktopDown: typeof import('~icons/tabler/device-desktop-down.jsx').default
-  const IconTablerSandbox: typeof import('~icons/tabler/sandbox.jsx').default
-  const IconTablerSettings: typeof import('~icons/tabler/settings.jsx').default
+	const IconAntDesignDeleteOutlined: typeof import("~icons/ant-design/delete-outlined.jsx").default;
+	const IconAntDesignEditOutlined: typeof import("~icons/ant-design/edit-outlined.jsx").default;
+	const IconBiX: typeof import("~icons/bi/x.jsx").default;
+	const IconGgImport: typeof import("~icons/gg/import.jsx").default;
+	const IconGgSpinner: typeof import("~icons/gg/spinner.jsx").default;
+	const IconGravityUiPlugConnection: typeof import("~icons/gravity-ui/plug-connection.jsx").default;
+	const IconHeroiconsXMarkSolid: typeof import("~icons/heroicons/x-mark-solid.jsx").default;
+	const IconIcBaselineDiscord: typeof import("~icons/ic/baseline-discord.jsx").default;
+	const IconIcRoundShare: typeof import("~icons/ic/round-share.jsx").default;
+	const IconLucideChevronDown: typeof import("~icons/lucide/chevron-down.jsx").default;
+	const IconMaterialSymbolsAddRounded: typeof import("~icons/material-symbols/add-rounded.jsx").default;
+	const IconMaterialSymbolsArrowDropDownRounded: typeof import("~icons/material-symbols/arrow-drop-down-rounded.jsx").default;
+	const IconMaterialSymbolsArrowDropUpRounded: typeof import("~icons/material-symbols/arrow-drop-up-rounded.jsx").default;
+	const IconMaterialSymbolsArrowRightRounded: typeof import("~icons/material-symbols/arrow-right-rounded.jsx").default;
+	const IconMaterialSymbolsDeleteOutline: typeof import("~icons/material-symbols/delete-outline.jsx").default;
+	const IconMdiDotsHorizontal: typeof import("~icons/mdi/dots-horizontal.jsx").default;
+	const IconMdiGithub: typeof import("~icons/mdi/github.jsx").default;
+	const IconOcticonProjectSymlink16: typeof import("~icons/octicon/project-symlink16.jsx").default;
+	const IconPhExport: typeof import("~icons/ph/export.jsx").default;
+	const IconPhSquareSplitHorizontal: typeof import("~icons/ph/square-split-horizontal.jsx").default;
+	const IconRadixIconsExternalLink: typeof import("~icons/radix-icons/external-link.jsx").default;
+	const IconRiTwitterXFill: typeof import("~icons/ri/twitter-x-fill.jsx").default;
+	const IconSvgSpinners90Ring: typeof import("~icons/svg-spinners/90-ring.jsx").default;
+	const IconSystemUiconsReset: typeof import("~icons/system-uicons/reset.jsx").default;
+	const IconTablerArrowsDiagonal: typeof import("~icons/tabler/arrows-diagonal.jsx").default;
+	const IconTablerArrowsDiagonalMinimize2: typeof import("~icons/tabler/arrows-diagonal-minimize2.jsx").default;
+	const IconTablerCheck: typeof import("~icons/tabler/check.jsx").default;
+	const IconTablerChevronDown: typeof import("~icons/tabler/chevron-down.jsx").default;
+	const IconTablerChevronRight: typeof import("~icons/tabler/chevron-right.jsx").default;
+	const IconTablerCircle: typeof import("~icons/tabler/circle.jsx").default;
+	const IconTablerCopy: typeof import("~icons/tabler/copy.jsx").default;
+	const IconTablerDeviceDesktopDown: typeof import("~icons/tabler/device-desktop-down.jsx").default;
+	const IconTablerSandbox: typeof import("~icons/tabler/sandbox.jsx").default;
+	const IconTablerSettings: typeof import("~icons/tabler/settings.jsx").default;
 }
diff --git a/packages/package-sdk/src/index.ts b/packages/package-sdk/src/index.ts
@@ -69,15 +69,16 @@ export namespace PackageEngine {
 		refreshCredential(provider: string, id: string): Effect.Effect<void>;
 	};
 
-	export type Built<Engine> = Engine extends PackageEngine<
-		infer ClientRpcs,
-		infer RuntimeRpcs,
-		any,
-		infer ClientState,
-		infer Resources
-	>
-		? LayerBuilderRet<ClientRpcs, RuntimeRpcs, ClientState, Resources>
-		: never;
+	export type Built<Engine> =
+		Engine extends PackageEngine<
+			infer ClientRpcs,
+			infer RuntimeRpcs,
+			any,
+			infer ClientState,
+			infer Resources
+		>
+			? LayerBuilderRet<ClientRpcs, RuntimeRpcs, ClientState, Resources>
+			: never;
 
 	export type LayerBuilderRet<
 		ClientRpcs extends Rpc.Any,
@@ -182,39 +183,24 @@ export namespace PackageEngine {
 		>) as any;
 	};
 
-	export type ClientRpcs<Engine> = Engine extends PackageEngine<
-		infer ClientRpcs,
-		any,
-		any,
-		any,
-		any
-	>
-		? ClientRpcs
-		: never;
+	export type ClientRpcs<Engine> =
+		Engine extends PackageEngine<infer ClientRpcs, any, any, any, any>
+			? ClientRpcs
+			: never;
 
-	export type RuntimeRpcs<Engine> = Engine extends PackageEngine<
-		any,
-		infer RuntimeRpcs,
-		any,
-		any,
-		any
-	>
-		? RuntimeRpcs
-		: never;
+	export type RuntimeRpcs<Engine> =
+		Engine extends PackageEngine<any, infer RuntimeRpcs, any, any, any>
+			? RuntimeRpcs
+			: never;
 
 	export type RuntimeRpcClient<Engine> = RpcClient.RpcClient<
 		RuntimeRpcs<Engine>
 	>;
 
-	export type Events<Engine> = Engine extends PackageEngine<
-		any,
-		any,
-		infer Events,
-		any,
-		any
-	>
-		? S.Schema.Type<Events>
-		: never;
+	export type Events<Engine> =
+		Engine extends PackageEngine<any, any, infer Events, any, any>
+			? S.Schema.Type<Events>
+			: never;
 
 	export type AnyEvent = { _tag: string } & S.Any;
 }
@@ -395,17 +381,18 @@ export namespace Schema {
 		options?: { name?: string },
 	) => DataOutput<T>;
 
-	export type InferIO<IO> = IO extends DataInput<infer T>
-		? T.Infer_<T>
-		: IO extends DataOutput<infer T>
-			? (v: T.Infer_<T>) => void
-			: IO extends ExecOutput
-				? IO
-				: IO extends ExecInput
-					? never
-					: IO extends Record<string, any>
-						? { [K in keyof IO]: InferIO<IO[K]> }
-						: IO;
+	export type InferIO<IO> =
+		IO extends DataInput<infer T>
+			? T.Infer_<T>
+			: IO extends DataOutput<infer T>
+				? (v: T.Infer_<T>) => void
+				: IO extends ExecOutput
+					? IO
+					: IO extends ExecInput
+						? never
+						: IO extends Record<string, any>
+							? { [K in keyof IO]: InferIO<IO[K]> }
+							: IO;
 
 	export type AnyIOCtx<
 		Engine extends PackageEngine.Any,

diff --git a/packages/project-domain/src/NodeSchema.ts b/packages/project-domain/src/NodeSchema.ts
@@ -92,12 +92,10 @@ export namespace Resource {
 		}
 	}
 
-	export type ToHandler<T> = T extends Resource.Resource<
-		infer TId,
-		infer TValue
-	>
-		? Handler<TId, TValue>
-		: never;
+	export type ToHandler<T> =
+		T extends Resource.Resource<infer TId, infer TValue>
+			? Handler<TId, TValue>
+			: never;
 
 	export const make =
 		<T>() =>

diff --git a/packages/runtime/src/models/Package.ts b/packages/runtime/src/models/Package.ts
@@ -253,16 +253,14 @@ export type ResourceType<
 	| { type: BaseType<TValue> }
 );
 
-export type inferResourceTypeValue<T> = T extends ResourceType<
-	infer TValue,
-	any
->
-	? T extends { source: any }
-		? TValue
-		: T extends { type: BaseType }
-			? t.infer<T["type"]>
-			: never
-	: never;
+export type inferResourceTypeValue<T> =
+	T extends ResourceType<infer TValue, any>
+		? T extends { source: any }
+			? TValue
+			: T extends { type: BaseType }
+				? t.infer<T["type"]>
+				: never
+		: never;
 
 type DistributiveOmit<T, K extends keyof any> = T extends any
 	? Omit<T, K>

diff --git a/packages/typesystem-old/src/struct.ts b/packages/typesystem-old/src/struct.ts
@@ -144,16 +144,16 @@ export class StructType<
 	}
 }
 
-export type InferStruct<S> = S extends Struct<infer Fields>
-	? InferStructFields<Fields>
-	: never;
+export type InferStruct<S> =
+	S extends Struct<infer Fields> ? InferStructFields<Fields> : never;
 
 export type InferStructFields<F> = F extends StructFields
 	? { [K in keyof F]: InferStructField<F[K]> }
 	: never;
 
-export type InferStructField<F> = F extends Field<infer Type>
-	? Type extends BaseType<infer TOut>
-		? TOut
-		: never
-	: never;
+export type InferStructField<F> =
+	F extends Field<infer Type>
+		? Type extends BaseType<infer TOut>
+			? TOut
+			: never
+		: never;