diff --git a/app/browser.tsx b/app/browser.tsx
index 05775c9e..9501648f 100644
--- a/app/browser.tsx
+++ b/app/browser.tsx
@@ -15,7 +15,7 @@ import Env from 'quilt:module/env';
 
 import type {AppContext} from '~/shared/context.ts';
 import {SearchParam} from '~/global/auth.ts';
-import {createClipsManager} from '~/shared/clips.ts';
+import {ClipsManager} from '~/shared/clips.ts';
 
 import App from './App.tsx';
 import {EXTENSION_POINTS} from './clips.ts';
@@ -79,10 +79,7 @@ const context = {
   graphql: {cache: new GraphQLCache(), fetch: fetchGraphQL},
   performance,
   clipsManager: user
-    ? createClipsManager(
-        {user, graphql: fetchGraphQL, router},
-        EXTENSION_POINTS,
-      )
+    ? new ClipsManager({user, graphql: fetchGraphQL, router}, EXTENSION_POINTS)
     : undefined,
 } satisfies AppContext;
 
diff --git a/app/features/Developer/Console/Console.tsx b/app/features/Developer/Console/Console.tsx
index 1c08ca7e..325caa41 100644
--- a/app/features/Developer/Console/Console.tsx
+++ b/app/features/Developer/Console/Console.tsx
@@ -16,7 +16,7 @@ import {Page} from '~/shared/page.ts';
 import {
   useClipsManager,
   useLocalDevelopmentServerQuery,
-  type ClipsLocalDevelopmentServer,
+  type ClipsLocalDevelopmentServerType,
 } from '~/shared/clips.ts';
 
 import developerConsoleQuery, {
@@ -37,7 +37,7 @@ export default function Console() {
   );
 }
 
-function ConnectedConsole({server}: {server: ClipsLocalDevelopmentServer}) {
+function ConnectedConsole({server}: {server: ClipsLocalDevelopmentServerType}) {
   const {data, loading} = useLocalDevelopmentServerQuery(developerConsoleQuery);
 
   usePerformanceNavigation({state: loading ? 'loading' : 'complete'});
@@ -119,7 +119,7 @@ function ExtensionBuildResult({
   }
 }
 
-function ConnectToConsole({server}: {server: ClipsLocalDevelopmentServer}) {
+function ConnectToConsole({server}: {server: ClipsLocalDevelopmentServerType}) {
   usePerformanceNavigation({state: 'complete'});
 
   const localUrl = useSignal('');
diff --git a/app/features/Series/Series.tsx b/app/features/Series/Series.tsx
index 8428cb43..ee90dcbe 100644
--- a/app/features/Series/Series.tsx
+++ b/app/features/Series/Series.tsx
@@ -193,7 +193,7 @@ function SeriesWithData({
       <AccessoryClips
         id={series.id}
         name={series.name}
-        installations={series.clipsInstallations}
+        clips={series.clipsToRender}
       />
 
       <SeasonsSection id={series.id} seasons={seasons} onUpdate={onUpdate} />
@@ -212,13 +212,13 @@ function SeriesWithData({
 function AccessoryClips({
   id,
   name,
-  installations,
+  clips,
 }: {
   id: string;
   name: string;
-  installations: SeriesQueryData.Series['clipsInstallations'];
+  clips: SeriesQueryData.Series['clipsToRender'];
 }) {
-  const accessoryClips = useClips('series.details.accessory', installations, {
+  const accessoryClips = useClips('series.details.accessory', clips, {
     id,
     name,
   });
@@ -228,7 +228,7 @@ function AccessoryClips({
   return (
     <BlockStack spacing="large">
       {accessoryClips.map((clip) => (
-        <Clip key={clip.id} extension={clip} />
+        <Clip key={clip.id} extensionPoint={clip} />
       ))}
     </BlockStack>
   );
diff --git a/app/features/Series/graphql/SeriesQuery.graphql b/app/features/Series/graphql/SeriesQuery.graphql
index 32834a59..a1a0a306 100644
--- a/app/features/Series/graphql/SeriesQuery.graphql
+++ b/app/features/Series/graphql/SeriesQuery.graphql
@@ -1,4 +1,4 @@
-#import "../../../shared/clips/graphql/ClipsExtensionFragment.graphql"
+#import "../../../shared/clips/graphql/ClipsExtensionPointFragment.graphql"
 
 query Series($id: ID, $handle: String) {
   series(id: $id, handle: $handle) {
@@ -55,8 +55,8 @@ query Series($id: ID, $handle: String) {
         episode
       }
     }
-    clipsInstallations(target: "series.details.accessory") {
-      ...ClipsExtension
+    clipsToRender(target: "series.details.accessory") {
+      ...ClipsExtensionPoint
     }
   }
 }
diff --git a/app/features/WatchThrough/WatchThrough.tsx b/app/features/WatchThrough/WatchThrough.tsx
index fb655d85..eb26c175 100644
--- a/app/features/WatchThrough/WatchThrough.tsx
+++ b/app/features/WatchThrough/WatchThrough.tsx
@@ -127,7 +127,7 @@ function WatchThroughWithData({
     settings,
     from,
     to,
-    clipsInstallations,
+    clipsToRender,
   } = watchThrough;
 
   const watchingSingleSeason = from.season === to.season;
@@ -234,7 +234,7 @@ function WatchThroughWithData({
             id={id}
             url={url}
             series={series}
-            installations={clipsInstallations}
+            clips={clipsToRender}
             currentWatch={nextEpisodeForm}
           />
 
@@ -1016,24 +1016,26 @@ function AccessoryClips({
   id,
   url,
   series,
-  installations,
+  clips,
   currentWatch,
 }: Pick<WatchThroughQueryData.WatchThrough, 'id' | 'url' | 'series'> & {
-  installations: WatchThroughQueryData.WatchThrough['clipsInstallations'];
+  clips: WatchThroughQueryData.WatchThrough['clipsToRender'];
   currentWatch: Signal<WatchForm | undefined>;
 }) {
-  const accessoryClips = useClips(
-    'watch-through.details.accessory',
-    installations,
-    {id, url, seriesId: series.id, seriesName: series.name, currentWatch},
-  );
+  const accessoryClips = useClips('watch-through.details.accessory', clips, {
+    id,
+    url,
+    seriesId: series.id,
+    seriesName: series.name,
+    currentWatch,
+  });
 
   if (accessoryClips.length === 0) return null;
 
   return (
     <BlockStack spacing="large">
       {accessoryClips.map((clip) => (
-        <Clip key={clip.id} extension={clip} />
+        <Clip key={clip.id} extensionPoint={clip} />
       ))}
     </BlockStack>
   );
diff --git a/app/features/WatchThrough/graphql/WatchThroughDetailsFragment.graphql b/app/features/WatchThrough/graphql/WatchThroughDetailsFragment.graphql
index b307a674..d8fa0b53 100644
--- a/app/features/WatchThrough/graphql/WatchThroughDetailsFragment.graphql
+++ b/app/features/WatchThrough/graphql/WatchThroughDetailsFragment.graphql
@@ -1,4 +1,4 @@
-#import "../../../shared/clips/graphql/ClipsExtensionFragment.graphql"
+#import "../../../shared/clips/graphql/ClipsExtensionPointFragment.graphql"
 
 fragment WatchThroughDetails on WatchThrough {
   id
@@ -129,7 +129,7 @@ fragment WatchThroughDetails on WatchThrough {
   settings {
     spoilerAvoidance
   }
-  clipsInstallations(target: "watch-through.details.accessory") {
-    ...ClipsExtension
+  clipsToRender(target: "watch-through.details.accessory") {
+    ...ClipsExtensionPoint
   }
 }
diff --git a/app/server/app.tsx b/app/server/app.tsx
index 17edf88f..4c1ecc3e 100644
--- a/app/server/app.tsx
+++ b/app/server/app.tsx
@@ -5,7 +5,7 @@ import {Router} from '@quilted/quilt/navigation';
 import {BrowserAssets} from 'quilt:module/assets';
 
 import type {AppContext} from '~/shared/context.ts';
-import {createClipsManager} from '~/shared/clips.ts';
+import {ClipsManager} from '~/shared/clips.ts';
 
 import App from '../App.tsx';
 import {EXTENSION_POINTS} from '../clips.ts';
@@ -62,7 +62,7 @@ export const handleApp: RequestHandler = async function handleApp(request) {
     router,
     graphql: {cache: new GraphQLCache(), fetch: fetchGraphQL},
     clipsManager: user
-      ? createClipsManager(
+      ? new ClipsManager(
           {user, graphql: fetchGraphQL, router},
           EXTENSION_POINTS,
         )
diff --git a/app/server/graphql/resolvers/apps/App.ts b/app/server/graphql/resolvers/apps/App.ts
index d1ae208d..583b296a 100644
--- a/app/server/graphql/resolvers/apps/App.ts
+++ b/app/server/graphql/resolvers/apps/App.ts
@@ -250,6 +250,13 @@ export const AppInstallation = createResolverWithGid('AppInstallation', {
   async extensions({id}, _, {prisma}) {
     const installations = await prisma.clipsExtensionInstallation.findMany({
       where: {appInstallationId: id},
+      include: {
+        extension: {
+          include: {
+            activeVersion: true,
+          },
+        },
+      },
       take: 50,
       // orderBy: {createAt, 'desc'},
     });
diff --git a/app/server/graphql/resolvers/apps/ClipsExtension.ts b/app/server/graphql/resolvers/apps/ClipsExtension.ts
index 075de144..a6d4fa7c 100644
--- a/app/server/graphql/resolvers/apps/ClipsExtension.ts
+++ b/app/server/graphql/resolvers/apps/ClipsExtension.ts
@@ -6,9 +6,11 @@ import type {
   ClipsExtensionInstallation as DatabaseClipsExtensionInstallation,
 } from '@prisma/client';
 import Env from 'quilt:module/env';
+import type {ExtensionPoint} from '@watching/clips';
 import {z} from 'zod';
 
 import type {
+  ClipsExtensionBuildModuleInput,
   ClipsExtensionPointSupportInput,
   ClipsExtensionPointSupportConditionInput,
   CreateClipsInitialVersion,
@@ -33,11 +35,22 @@ declare module '@quilted/quilt/env' {
   }
 }
 
+type DatabaseClipsExtensionInstallationWithActiveVersion =
+  DatabaseClipsExtensionInstallation & {
+    extension: DatabaseClipsExtension & {
+      activeVersion: DatabaseClipsExtensionVersion | null;
+    };
+  };
+
 declare module '../types' {
   export interface GraphQLValues {
     ClipsExtension: DatabaseClipsExtension;
     ClipsExtensionVersion: DatabaseClipsExtensionVersion;
-    ClipsExtensionInstallation: DatabaseClipsExtensionInstallation;
+    ClipsExtensionInstallation: DatabaseClipsExtensionInstallationWithActiveVersion;
+    ClipsExtensionPointInstallation: {
+      target: ExtensionPoint;
+      installation: DatabaseClipsExtensionInstallationWithActiveVersion;
+    };
   }
 }
 
@@ -51,7 +64,7 @@ export const Query = createQueryResolver({
       },
       include: {
         extension: {
-          select: {activeVersion: {select: {status: true, extends: true}}},
+          include: {activeVersion: true},
         },
       },
       take: 50,
@@ -64,12 +77,20 @@ export const Query = createQueryResolver({
     return filterInstallations(installations, {
       target,
       conditions: resolvedConditions,
-    });
+    }).map(({installation}) => installation);
   },
-  clipsInstallation(_, {id}, {prisma}) {
-    return prisma.clipsExtensionInstallation.findUniqueOrThrow({
-      where: {id: fromGid(id).id},
-    });
+  async clipsInstallation(_, {id}, {prisma}) {
+    const installation =
+      await prisma.clipsExtensionInstallation.findUniqueOrThrow({
+        where: {id: fromGid(id).id},
+        include: {
+          extension: {
+            include: {activeVersion: true},
+          },
+        },
+      });
+
+    return installation;
   },
 });
 
@@ -133,7 +154,7 @@ export const Mutation = createMutationResolver({
   },
   async pushClipsExtension(
     _,
-    {id: extensionId, code, name, translations, extends: supports, settings},
+    {id: extensionId, build, name, translations, extends: supports, settings},
     {prisma, request},
   ) {
     const id = fromGid(extensionId).id;
@@ -148,8 +169,8 @@ export const Mutation = createMutationResolver({
     });
 
     const {version: versionInput} = await createStagedClipsVersion({
-      code,
       id,
+      build,
       appId: extension.appId,
       extensionName: name ?? extension.name,
       translations,
@@ -211,7 +232,7 @@ export const Mutation = createMutationResolver({
     const extension = await prisma.clipsExtension.findUniqueOrThrow({
       where: {id: fromGid(id).id},
       include: {
-        activeVersion: {select: {extends: true}},
+        activeVersion: true,
       },
     });
 
@@ -248,6 +269,11 @@ export const Mutation = createMutationResolver({
         settings: settings == null ? undefined : JSON.parse(settings),
         appInstallationId: appInstallation.id,
       },
+      include: {
+        extension: {
+          include: {activeVersion: true},
+        },
+      },
     });
 
     return {
@@ -281,20 +307,23 @@ export const Mutation = createMutationResolver({
         select: {id: true, userId: true},
       });
 
-    const {extension, ...installation} =
-      await prisma.clipsExtensionInstallation.update({
-        where: {id: installationDetails.id},
-        include: {extension: true},
-        data:
-          settings == null
-            ? {}
-            : {
-                settings: JSON.parse(settings),
-              },
-      });
+    const installation = await prisma.clipsExtensionInstallation.update({
+      where: {id: installationDetails.id},
+      include: {
+        extension: {
+          include: {activeVersion: true},
+        },
+      },
+      data:
+        settings == null
+          ? {}
+          : {
+              settings: JSON.parse(settings),
+            },
+    });
 
     return {
-      extension,
+      extension: installation.extension,
       installation,
     };
   },
@@ -335,7 +364,6 @@ export const ClipsExtensionVersion = createResolverWithGid(
       prisma.clipsExtension.findUniqueOrThrow({
         where: {id: extensionId},
       }),
-    assets: ({scriptUrl}) => (scriptUrl ? [{source: scriptUrl}] : []),
     translations: ({translations}) =>
       translations ? JSON.stringify(translations) : null,
     // Database needs to store the exact right shapes in its JSON fields
@@ -395,63 +423,125 @@ export const ClipsExtensionInstallation = createResolverWithGid(
       prisma.appInstallation.findUniqueOrThrow({
         where: {id: appInstallationId},
       }),
-    async version({extensionId}, _, {prisma}) {
-      const extension = await prisma.clipsExtension.findUniqueOrThrow({
-        where: {id: extensionId},
-        select: {activeVersion: true},
-      });
-
+    async version({extension}) {
       return extension.activeVersion!;
     },
-    async translations({extensionId}, _, {prisma}) {
-      const extension = await prisma.clipsExtension.findUniqueOrThrow({
-        where: {id: extensionId},
-        select: {activeVersion: true},
-      });
-
+    async translations({extension}) {
       const translations = extension.activeVersion?.translations;
 
       return translations ? JSON.stringify(translations) : null;
     },
-    async liveQuery({target, extensionId}, _, {prisma}) {
-      const extension = await prisma.clipsExtension.findUniqueOrThrow({
-        where: {id: extensionId},
-        select: {activeVersion: true},
-      });
-
-      const extend = (extension.activeVersion?.extends ?? []) as any[];
+    settings: ({settings}) => (settings ? JSON.stringify(settings) : null),
+  },
+);
 
-      return extend.find((extend) => extend.target === target)?.liveQuery;
+export const ClipsExtensionPointInstallation = createResolverWithGid(
+  'ClipsExtensionPointInstallation',
+  {
+    id: ({target, installation}) =>
+      toGid(`${installation.id}/${target}`, 'ClipsExtensionPointInstallation'),
+    target: ({target}) => target,
+    apiVersion: ({installation}) =>
+      installation.extension.activeVersion!.apiVersion,
+    entry({target, installation}) {
+      const {entry} = getExtensionPoint(target, installation);
+      const module = getExtensionBuildModule(entry.module, installation);
+
+      switch (module.contentType) {
+        case 'JAVASCRIPT':
+          return {
+            asHTML: null,
+            asJavaScript: {
+              src: module.src!,
+            },
+          };
+        case 'HTML':
+          return {
+            asHTML: {
+              content: module.content,
+            },
+            asJavaScript: null,
+          };
+        default:
+          throw new Error(`Unsupported content type: ${module.contentType}`);
+      }
     },
-    async loading({target, extensionId}, _, {prisma}) {
-      const extension = await prisma.clipsExtension.findUniqueOrThrow({
-        where: {id: extensionId},
-        select: {activeVersion: true},
-      });
+    liveQuery({target, installation}) {
+      const {liveQuery} = getExtensionPoint(target, installation);
 
-      const extend = (extension.activeVersion?.extends ?? []) as any[];
+      if (liveQuery == null) return null;
 
-      const loading = extend.find((extend) => extend.target === target)
-        ?.loading;
+      const module = getExtensionBuildModule(liveQuery.module, installation);
+
+      return {
+        content: module.content,
+      };
+    },
+    loading({target, installation}) {
+      const {loading} = getExtensionPoint(target, installation);
 
       if (loading == null) return null;
 
+      const module = getExtensionBuildModule(loading.module, installation);
+
       return {
-        ui: loading?.ui
-          ? {
-              html: loading.ui,
-            }
-          : null,
+        content: module.content,
       };
     },
-    settings: ({settings}) => (settings ? JSON.stringify(settings) : null),
+    settings: ({installation}) =>
+      installation.extension.activeVersion?.settings
+        ? JSON.stringify(installation.extension.activeVersion.settings)
+        : null,
+    translations: ({installation}) =>
+      installation.extension.activeVersion?.translations
+        ? JSON.stringify(installation.extension.activeVersion.translations)
+        : null,
+    extension: ({installation}) => installation.extension,
+    extensionInstallation: ({installation}) => installation,
+    appInstallation: ({installation}, _, {prisma}) =>
+      prisma.appInstallation.findUniqueOrThrow({
+        where: {id: installation.appInstallationId},
+      }),
   },
 );
 
+function getExtensionPoint(
+  target: string,
+  installation: DatabaseClipsExtensionInstallationWithActiveVersion,
+) {
+  const extend = installation.extension.activeVersion
+    ?.extends as any as ClipsExtensionPointSupportDatabaseJSON[];
+  const extensionPoint = extend?.find((extend) => extend.target === target);
+
+  if (extensionPoint == null) {
+    throw new Error(`Extension point not found: ${target}`);
+  }
+
+  return extensionPoint;
+}
+
+function getExtensionBuildModule(
+  name: string,
+  installation: DatabaseClipsExtensionInstallationWithActiveVersion,
+) {
+  const modules = (
+    installation.extension.activeVersion
+      ?.build as any as ClipsExtensionBuildDatabaseJSON
+  )?.modules;
+
+  const module = modules?.find((module) => module.name === name);
+
+  if (module == null) {
+    throw new Error(`Unknown module: ${name}`);
+  }
+
+  return module;
+}
+
 const SeriesExtensionPoint = z.enum(['series.details.accessory']);
 
 export const Series = createResolver('Series', {
-  async clipsInstallations(series, {target}, {user, prisma}) {
+  async clipsToRender(series, {target}, {user, prisma}) {
     if (!SeriesExtensionPoint.safeParse(target).success) {
       throw new Error(`Invalid target: ${target}`);
     }
@@ -464,7 +554,7 @@ export const Series = createResolver('Series', {
       },
       include: {
         extension: {
-          select: {activeVersion: {select: {status: true, extends: true}}},
+          include: {activeVersion: true},
         },
       },
       take: 50,
@@ -487,7 +577,7 @@ export const Series = createResolver('Series', {
 const WatchThroughExtensionPoint = z.enum(['watch-through.details.accessory']);
 
 export const WatchThrough = createResolver('WatchThrough', {
-  async clipsInstallations({seriesId}, {target}, {user, prisma}) {
+  async clipsToRender({seriesId}, {target}, {user, prisma}) {
     if (!WatchThroughExtensionPoint.safeParse(target).success) {
       throw new Error(`Invalid target: ${target}`);
     }
@@ -505,7 +595,7 @@ export const WatchThrough = createResolver('WatchThrough', {
         },
         include: {
           extension: {
-            select: {activeVersion: {select: {status: true, extends: true}}},
+            include: {activeVersion: true},
           },
         },
         take: 50,
@@ -550,8 +640,64 @@ async function parseLoadingUI(loadingUI: string) {
   return validateAndNormalizeLoadingUI(loadingUI);
 }
 
+interface ClipsExtensionBuildDatabaseJSON {
+  modules: ClipsExtensionBuildModuleDatabaseJSON[];
+}
+
+interface ClipsExtensionBuildModuleDatabaseJSON
+  extends ClipsExtensionBuildModuleInput {
+  src?: string;
+}
+
+interface ClipsExtensionPointSupportDatabaseJSON
+  extends ClipsExtensionPointSupportInput {
+  target: ExtensionPoint;
+}
+
+// const ClipsExtensionBuildModuleInputSchema = z.object({
+//   name: z.string(),
+//   content: z.string(),
+//   contentType: z.enum(['JAVASCRIPT', 'HTML', 'GRAPHQL']),
+// });
+
+// const ClipsExtensionBuildModuleDatabaseSchema =
+//   ClipsExtensionBuildModuleInputSchema.extend({
+//     src: z.string().optional(),
+//   });
+
+// const ClipsExtensionBuildDatabaseSchema = z.object({
+//   modules: z.array(ClipsExtensionBuildModuleDatabaseSchema),
+// });
+
+// const ClipsExtensionPointSupportConditionInputSchema = z.object({
+//   series: z
+//     .object({
+//       handle: z.string().optional(),
+//     })
+//     .optional(),
+// });
+
+// const ClipsExtensionPointModuleDatabaseSchema = z.object({
+//   module: z.string(),
+// });
+
+// const ClipsExtensionPointSchema = z.enum([
+//   'series.details.accessory',
+//   'watch-through.details.accessory',
+// ]);
+
+// const ClipsExtensionPointSupportDatabaseSchema = z.object({
+//   target: ClipsExtensionPointSchema,
+//   conditions: z
+//     .array(ClipsExtensionPointSupportConditionInputSchema)
+//     .optional(),
+//   entry: ClipsExtensionPointModuleDatabaseSchema,
+//   liveQuery: ClipsExtensionPointModuleDatabaseSchema.optional(),
+//   loading: ClipsExtensionPointModuleDatabaseSchema.optional(),
+// });
+
 async function createStagedClipsVersion({
-  code,
+  build,
   appId,
   extensionName,
   translations,
@@ -560,97 +706,128 @@ async function createStagedClipsVersion({
   settings,
 }: {
   id: string;
-  code: string;
   appId: string;
   extensionName: string;
 } & Pick<ResolverContext, 'request'> &
   CreateClipsInitialVersion) {
-  const hash = createHash('sha256').update(code).digest('hex');
-  const path = `assets/clips/${appId}/${toParam(extensionName)}.${hash}.js`;
-
-  const token = await createSignedToken(
-    {path, code},
-    {
-      secret: Env.UPLOAD_CLIPS_JWT_SECRET,
-      expiresIn: '5m',
-    },
-  );
+  const modules = new Map<string, ClipsExtensionBuildModuleDatabaseJSON>();
+
+  for (const buildModule of build.modules) {
+    if (buildModule.contentType === 'JAVASCRIPT') {
+      if (buildModule.name !== '_extension.js') continue;
+      modules.set(buildModule.name, buildModule);
+    }
+
+    if (buildModule.content.length > 10_000) {
+      throw new Error(
+        `Clip module content for ${buildModule.name} is too long`,
+      );
+    }
+
+    modules.set(buildModule.name, buildModule);
+  }
+
+  const javascriptModule = modules.get('_extension.js');
 
-  const putResult = await fetch(
-    new URL('/internal/upload/clips', request.url),
-    {
-      method: 'PUT',
-      body: token,
-      headers: {
-        'Content-Type': 'application/json',
+  if (javascriptModule) {
+    const code = javascriptModule.content;
+
+    const hash = createHash('sha256').update(code).digest('hex');
+    const path = `assets/clips/${appId}/${toParam(extensionName)}.${hash.slice(
+      0,
+      8,
+    )}.js`;
+
+    const token = await createSignedToken(
+      {path, code},
+      {
+        secret: Env.UPLOAD_CLIPS_JWT_SECRET,
+        expiresIn: '5m',
       },
-      // @see https://github.com/nodejs/node/issues/46221
-      ...{duplex: 'half'},
-    },
-  );
+    );
+
+    const putResult = await fetch(
+      new URL('/internal/upload/clips', request.url),
+      {
+        method: 'PUT',
+        body: token,
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        // @see https://github.com/nodejs/node/issues/46221
+        ...{duplex: 'half'},
+      },
+    );
+
+    if (!putResult.ok) {
+      throw new Error(`Could not upload clips: '${await putResult.text()}'`);
+    }
 
-  if (!putResult.ok) {
-    throw new Error(`Could not upload clips: '${await putResult.text()}'`);
+    javascriptModule.content = '';
+    javascriptModule.src = `https://watch.lemon.tools/${path}`;
   }
 
+  const extensionPoints = await Promise.all(
+    (supports ?? []).map(
+      async ({target, entry, liveQuery, loading, conditions}) => {
+        if (!modules.has(entry.module)) {
+          throw new Error(`Unknown entry module: ${entry.module}`);
+        }
+
+        if (liveQuery) {
+          const module = modules.get(liveQuery.module);
+
+          if (module == null) {
+            throw new Error(`Unknown live query module: ${liveQuery.module}`);
+          }
+
+          if (module.contentType !== 'GRAPHQL') {
+            throw new Error(
+              `Unsupported content type for live query: ${module.contentType}`,
+            );
+          }
+
+          // TODO: what if multiple targets use the same live query?
+          module.content = await parseLiveQuery(module.content);
+        }
+
+        if (loading) {
+          const module = modules.get(loading.module);
+
+          if (module == null) {
+            throw new Error(`Unknown loading module: ${loading.module}`);
+          }
+
+          module.content = await parseLoadingUI(module.content);
+        }
+
+        return {
+          target: await parseExtensionPointTarget(target),
+          entry,
+          liveQuery,
+          loading,
+          conditions: conditions?.map((condition) => {
+            if (condition?.series?.handle == null) {
+              throw new Error(`Unknown condition: ${condition}`);
+            }
+
+            return condition;
+          }),
+        } satisfies ClipsExtensionPointSupportDatabaseJSON;
+      },
+    ),
+  );
+
   const version: Omit<
     import('@prisma/client').Prisma.ClipsExtensionVersionCreateWithoutExtensionInput,
     'status'
   > = {
-    scriptUrl: `https://watch.lemon.tools/${path}`,
     apiVersion: 'UNSTABLE',
     translations: translations && JSON.parse(translations),
-    extends: supports
-      ? await Promise.all(
-          supports.map(
-            async ({target, modules, liveQuery, loading, conditions}) => {
-              const [
-                parsedTarget,
-                parsedModules,
-                parsedLiveQuery,
-                parsedLoadingUI,
-              ] = await Promise.all([
-                parseExtensionPointTarget(target),
-                Promise.all(
-                  (modules ?? []).map(
-                    async ({content, contentType = 'HTML'}) => {
-                      if (content.length > 10_000) {
-                        throw new Error(
-                          `Clip module content for ${target} is too long`,
-                        );
-                      }
-
-                      // TODO: validate HTML content
-
-                      return {content, contentType};
-                    },
-                  ),
-                ),
-                liveQuery ? parseLiveQuery(liveQuery) : undefined,
-                loading?.ui ? parseLoadingUI(loading.ui) : undefined,
-              ]);
-
-              return {
-                target: parsedTarget,
-                modules: parsedModules,
-                liveQuery: parsedLiveQuery,
-                loading: parsedLoadingUI
-                  ? {
-                      ui: parsedLoadingUI,
-                    }
-                  : undefined,
-                conditions: conditions?.map((condition) => {
-                  if (condition?.series?.handle == null) {
-                    throw new Error(`Unknown condition: ${condition}`);
-                  }
-
-                  return condition;
-                }),
-              };
-            },
-          ) as any,
-        )
-      : [],
+    build: {
+      modules: Array.from(modules.values()),
+    } satisfies ClipsExtensionBuildDatabaseJSON as any,
+    extends: extensionPoints as any,
     settings: settings?.fields
       ? {
           fields: settings.fields?.map(
@@ -768,14 +945,7 @@ async function resolveConditions(
 }
 
 function filterInstallations(
-  installations: (DatabaseClipsExtensionInstallation & {
-    extension: {
-      activeVersion: Pick<
-        DatabaseClipsExtensionVersion,
-        'status' | 'extends'
-      > | null;
-    };
-  })[],
+  installations: DatabaseClipsExtensionInstallationWithActiveVersion[],
   {
     target,
     conditions,
@@ -784,20 +954,19 @@ function filterInstallations(
     conditions: ResolvedCondition[];
   },
 ) {
-  return installations.filter((installation) => {
+  return installations.flatMap<{
+    target: ExtensionPoint;
+    installation: DatabaseClipsExtensionInstallationWithActiveVersion;
+  }>((installation) => {
     const version = installation.extension.activeVersion;
 
     if (version == null || version.status !== 'PUBLISHED') {
-      return false;
+      return [];
     }
 
-    const extensionPoints =
-      (version.extends as {
-        target: string;
-        conditions?: {series?: {handle?: string}}[];
-      }[]) ?? [];
-
-    return extensionPoints.some((extensionPoint) => {
+    const matches = (
+      version.extends as unknown as ClipsExtensionPointSupportDatabaseJSON[]
+    ).some((extensionPoint) => {
       if (target != null && target !== extensionPoint.target) {
         return false;
       }
@@ -817,5 +986,9 @@ function filterInstallations(
         );
       });
     });
+
+    return matches
+      ? {target: installation.target as ExtensionPoint, installation}
+      : [];
   });
 }
diff --git a/app/server/graphql/resolvers/shared/resolvers.ts b/app/server/graphql/resolvers/shared/resolvers.ts
index 297ba330..72ca016e 100644
--- a/app/server/graphql/resolvers/shared/resolvers.ts
+++ b/app/server/graphql/resolvers/shared/resolvers.ts
@@ -32,8 +32,8 @@ export {createResolver, createQueryResolver, createMutationResolver};
 
 export function createResolverWithGid<
   Type extends keyof Resolvers,
-  Fields extends keyof Resolvers[Type],
->(type: Type, resolver: Required<Pick<Resolvers[Type], Fields>>) {
+  Resolver extends Partial<Resolvers[Type]>,
+>(type: Type, resolver: Resolver): Resolver & {id: (arg: any) => string} {
   return {id: ({id}: {id: string}) => toGid(id, type), ...resolver};
 }
 
@@ -51,10 +51,10 @@ export function createUnionResolver(): UnionResolver {
 
 const RESOLVED_TYPE = Symbol.for('watch.resolved-type');
 
-export function addResolvedType<T extends object>(type: string, object: T) {
+export function addResolvedType<T extends object>(type: string, object: T): T {
   return {...object, [RESOLVED_TYPE]: type};
 }
 
-function resolveType(obj: {[RESOLVED_TYPE]?: string; id: string}) {
+function resolveType(obj: any) {
   return obj[RESOLVED_TYPE] ?? fromGid(obj.id).type;
 }
diff --git a/app/shared/clips.ts b/app/shared/clips.ts
index 9c00c511..0aefd46f 100644
--- a/app/shared/clips.ts
+++ b/app/shared/clips.ts
@@ -8,4 +8,4 @@ export {
 export * from './clips/manager.ts';
 export * from './clips/local-development.tsx';
 export * from './clips/extension-points';
-export {type ClipsExtensionFragmentData as InstalledClipsExtensionPointFragment} from './clips/graphql/ClipsExtensionFragment.graphql';
+export {type ClipsExtensionPointFragmentData as InstalledClipsExtensionPointFragment} from './clips/graphql/ClipsExtensionPointFragment.graphql';
diff --git a/app/shared/clips/Clip/Clip.tsx b/app/shared/clips/Clip/Clip.tsx
index 3937394e..c552c9e7 100644
--- a/app/shared/clips/Clip/Clip.tsx
+++ b/app/shared/clips/Clip/Clip.tsx
@@ -20,11 +20,13 @@ import type {ThreadRendererInstance} from '@watching/thread-render';
 
 import {useGraphQLMutation} from '~/shared/graphql.ts';
 
-import {ClipsExtensionPointBeingRenderedContext} from '../context.ts';
-import {useClipsManager} from '../react.tsx';
 import {
+  ClipsExtensionPointBeingRenderedContext,
+  useClipsExtensionPointBeingRendered,
+} from '../context.ts';
+import {
+  ClipsExtensionPointRenderer,
   type ClipsExtensionPoint,
-  type ClipsExtensionPointInstance,
   type ClipsExtensionPointInstanceContext,
 } from '../extension.ts';
 
@@ -35,43 +37,33 @@ import styles from './Clip.module.css';
 import uninstallClipsExtensionFromClipMutation from './graphql/UninstallClipsExtensionFromClipMutation.graphql';
 
 export interface ClipProps<Point extends ExtensionPoint> {
-  extension: ClipsExtensionPoint<Point>;
+  extensionPoint: ClipsExtensionPoint<Point>;
 }
 
 export function Clip<Point extends ExtensionPoint>({
-  extension,
+  extensionPoint,
 }: ClipProps<Point>) {
-  const {name, app} = extension.extension;
-
-  const manager = useClipsManager();
-  const installed =
-    extension.installed && manager.fetchInstance(extension.installed);
-  const local = extension.local && manager.fetchInstance(extension.local);
-
-  const renderer = local ?? installed;
+  const {name, app} = extensionPoint.extension;
+  const renderer =
+    extensionPoint.installed?.renderer ?? extensionPoint.local?.renderer;
 
   return (
-    <ClipsExtensionPointBeingRenderedContext.Provider value={extension}>
+    <ClipsExtensionPointBeingRenderedContext.Provider value={extensionPoint}>
       <Section>
         <BlockStack spacing>
           <ContentAction
             overlay={
               <Popover inlineAttachment="start">
-                {installed?.instance.value && (
+                {extensionPoint.installed && (
                   <Section padding>
-                    <ClipSettings
-                      id={extension.id}
-                      instance={installed.instance.value}
-                    />
+                    <ClipSettings />
                   </Section>
                 )}
                 <Menu>
                   <ViewAppAction />
-                  {renderer && <RestartClipButton instance={renderer} />}
-                  {extension.installed && (
-                    <UninstallClipButton extension={extension} />
-                  )}
-                  {extension.installed && <ReportIssueButton />}
+                  {renderer && <RestartClipButton renderer={renderer} />}
+                  {extensionPoint.installed && <UninstallClipButton />}
+                  {extensionPoint.installed && <ReportIssueButton />}
                 </Menu>
               </Popover>
             }
@@ -118,27 +110,25 @@ function ViewAppAction() {
 }
 
 function RestartClipButton({
-  instance,
+  renderer,
 }: {
-  instance: ClipsExtensionPointInstance<any>;
+  renderer: ClipsExtensionPointRenderer<any>;
 }) {
   return (
-    <Button icon="sync" onPress={() => instance.restart()}>
+    <Button icon="sync" onPress={() => renderer.restart()}>
       Restart
     </Button>
   );
 }
 
-function UninstallClipButton({
-  extension,
-}: {
-  extension: ClipsExtensionPoint<any>;
-}) {
+function UninstallClipButton() {
+  const extensionPoint = useClipsExtensionPointBeingRendered();
+
   const uninstallClipsExtensionFromClip = useGraphQLMutation(
     uninstallClipsExtensionFromClipMutation,
   );
 
-  const {id} = extension.extension;
+  const {id} = extensionPoint.installation;
 
   return (
     <Button
@@ -166,9 +156,9 @@ function ReportIssueButton() {
 function ClipInstanceRenderer<Point extends ExtensionPoint>({
   renderer,
 }: {
-  renderer: ClipsExtensionPointInstance<Point>;
+  renderer: ClipsExtensionPointRenderer<Point>;
 }) {
-  const instance = renderer.instance.value;
+  const {instance} = renderer;
 
   useEffect(() => {
     renderer.start();
diff --git a/app/shared/clips/Clip/ClipSettings.tsx b/app/shared/clips/Clip/ClipSettings.tsx
index 71e402dc..4a007d0b 100644
--- a/app/shared/clips/Clip/ClipSettings.tsx
+++ b/app/shared/clips/Clip/ClipSettings.tsx
@@ -5,7 +5,7 @@ import {Button, BlockStack, Form, Select, Text, TextField} from '@lemon/zest';
 
 import {useGraphQLQuery, useGraphQLMutation} from '~/shared/graphql';
 
-import {type ClipsExtensionPointInstance} from '../extension';
+import {useClipsExtensionPointBeingRendered} from '../context.ts';
 
 import clipsExtensionSettingsQuery, {
   type ClipExtensionSettingsQueryData,
@@ -14,15 +14,11 @@ import updateClipsExtensionSettingsMutation, {
   type UpdateClipsExtensionSettingsMutationData,
 } from './graphql/UpdateClipsExtensionSettingsMutation.graphql';
 
-export function ClipSettings({
-  id,
-  instance,
-}: {
-  id: string;
-  instance: NonNullable<ClipsExtensionPointInstance<any>['instance']['value']>;
-}) {
+export function ClipSettings() {
+  const extensionPoint = useClipsExtensionPointBeingRendered();
+
   const query = useGraphQLQuery(clipsExtensionSettingsQuery, {
-    variables: {id},
+    variables: {id: extensionPoint.installation.id},
     suspend: false,
   });
 
@@ -43,14 +39,15 @@ export function ClipSettings({
 
   return (
     <InstalledClipLoadedSettings
-      id={id}
       settings={settings}
       translations={translations}
       schema={schema}
       onUpdate={async (data) => {
-        instance.context.settings.value = JSON.parse(
-          data.updateClipsExtensionInstallation.installation?.settings ?? '{}',
-        );
+        extensionPoint.installed!.renderer.instance!.context.settings.value =
+          JSON.parse(
+            data.updateClipsExtensionInstallation.installation?.settings ??
+              '{}',
+          );
         await query.rerun();
       }}
     />
@@ -58,7 +55,6 @@ export function ClipSettings({
 }
 
 function InstalledClipLoadedSettings({
-  id,
   translations,
   settings,
   schema,
@@ -67,10 +63,12 @@ function InstalledClipLoadedSettings({
   ClipExtensionSettingsQueryData.ClipsInstallation.Version,
   'translations'
 > &
-  Pick<ClipExtensionSettingsQueryData.ClipsInstallation, 'id' | 'settings'> & {
+  Pick<ClipExtensionSettingsQueryData.ClipsInstallation, 'settings'> & {
     schema: ClipExtensionSettingsQueryData.ClipsInstallation.Version['settings'];
     onUpdate(data: UpdateClipsExtensionSettingsMutationData): Promise<void>;
   }) {
+  const extensionPoint = useClipsExtensionPointBeingRendered();
+
   const updateClipsExtensionSettings = useGraphQLMutation(
     updateClipsExtensionSettingsMutation,
   );
@@ -98,7 +96,7 @@ function InstalledClipLoadedSettings({
     }
 
     const result = await updateClipsExtensionSettings.run({
-      id,
+      id: extensionPoint.installation.id,
       settings: JSON.stringify(values),
     });
 
diff --git a/app/shared/clips/Clip/graphql/InstalledClipExtensionFragment.graphql b/app/shared/clips/Clip/graphql/InstalledClipExtensionFragment.graphql
index 54bf32e0..e9dd243d 100644
--- a/app/shared/clips/Clip/graphql/InstalledClipExtensionFragment.graphql
+++ b/app/shared/clips/Clip/graphql/InstalledClipExtensionFragment.graphql
@@ -1,14 +1,26 @@
-fragment InstalledClipExtension on ClipsExtensionInstallation {
+fragment InstalledClipExtension on ClipsExtensionPointInstallation {
   id
+  apiVersion
   target
-  settings
-  version {
-    id
-    apiVersion
-    assets {
-      source
+  entry {
+    asHTML {
+      content
+    }
+    asJavaScript {
+      src
     }
   }
+  liveQuery {
+    content
+  }
+  loading {
+    content
+  }
+  extensionInstallation {
+    id
+    settings
+    translations
+  }
   extension {
     id
     name
diff --git a/app/shared/clips/components/Button.tsx b/app/shared/clips/components/Button.tsx
index e73dbb39..ad9a19ec 100644
--- a/app/shared/clips/components/Button.tsx
+++ b/app/shared/clips/components/Button.tsx
@@ -1,6 +1,6 @@
 import {Button as UIButton, type ButtonProps} from '@lemon/zest';
 
-import {useRenderClipsExtensionPointBeingRendered} from '../context.ts';
+import {useClipsExtensionPointBeingRendered} from '../context.ts';
 import type {ClipsExtensionPoint} from '../extension.ts';
 
 import {
@@ -12,7 +12,7 @@ import {
 export const Button = createClipsComponentRenderer(
   'ui-button',
   function Button(props) {
-    const extension = useRenderClipsExtensionPointBeingRendered();
+    const extension = useClipsExtensionPointBeingRendered();
 
     const {overlay, children} = useRenderedChildren(props, {
       slotProps: ['overlay'],
diff --git a/app/shared/clips/context.ts b/app/shared/clips/context.ts
index 26dc505d..4e780062 100644
--- a/app/shared/clips/context.ts
+++ b/app/shared/clips/context.ts
@@ -4,5 +4,5 @@ import type {ClipsExtensionPoint} from './extension.ts';
 export const ClipsExtensionPointBeingRenderedContext =
   createOptionalContext<ClipsExtensionPoint<any>>();
 
-export const useRenderClipsExtensionPointBeingRendered =
+export const useClipsExtensionPointBeingRendered =
   ClipsExtensionPointBeingRenderedContext.use;
diff --git a/app/shared/clips/extension.ts b/app/shared/clips/extension.ts
index fac8bd23..a68d250f 100644
--- a/app/shared/clips/extension.ts
+++ b/app/shared/clips/extension.ts
@@ -9,17 +9,30 @@ import {type Version, type ExtensionPoint, type Api} from '@watching/clips';
 import {type OptionsForExtensionPoint} from './extension-points.ts';
 import {type Sandbox} from './sandbox.ts';
 import {type LiveQueryRunner} from './live-query.ts';
-import {type ClipsManager} from './manager.ts';
+import {type ClipsManagerType} from './manager.ts';
 
 export type {Version, ExtensionPoint};
 
+export interface ClipsExtensionPointRenderer<Point extends ExtensionPoint>
+  extends ThreadRenderer<ClipsExtensionPointInstanceContext<Point>> {}
+
 export interface ClipsExtensionPoint<Point extends ExtensionPoint> {
   readonly id: string;
   readonly target: Point;
+  readonly installation: ClipsExtensionInstallation;
   readonly extension: ClipsExtension;
-  readonly manager: ClipsManager;
-  readonly local?: ClipsExtensionPointLocalInstanceOptions<Point>;
-  readonly installed?: ClipsExtensionPointInstalledInstanceOptions<Point>;
+  readonly manager: ClipsManagerType;
+  readonly options: OptionsForExtensionPoint<Point>;
+  readonly local?: {
+    readonly renderer: ClipsExtensionPointRenderer<Point>;
+  };
+  readonly installed?: {
+    readonly renderer: ClipsExtensionPointRenderer<Point>;
+  };
+}
+
+export interface ClipsExtensionInstallation {
+  readonly id: string;
 }
 
 export interface ClipsExtension {
@@ -33,9 +46,6 @@ export interface App {
   readonly name: string;
 }
 
-export interface ClipsExtensionPointInstance<Point extends ExtensionPoint>
-  extends ThreadRenderer<ClipsExtensionPointInstanceContext<Point>> {}
-
 export interface ClipsExtensionPointInstanceContext<
   Point extends ExtensionPoint,
 > {
@@ -48,10 +58,6 @@ export interface ClipsExtensionPointInstanceContext<
   readonly graphql: GraphQLFetch;
 }
 
-export type ClipsExtensionPointInstanceOptions<Point extends ExtensionPoint> =
-  | ClipsExtensionPointInstalledInstanceOptions<Point>
-  | ClipsExtensionPointLocalInstanceOptions<Point>;
-
 export interface ClipsExtensionPointInstalledInstanceOptions<
   Point extends ExtensionPoint,
 > {
diff --git a/app/shared/clips/graphql/ClipsExtensionFragment.graphql b/app/shared/clips/graphql/ClipsExtensionFragment.graphql
deleted file mode 100644
index 697af336..00000000
--- a/app/shared/clips/graphql/ClipsExtensionFragment.graphql
+++ /dev/null
@@ -1,27 +0,0 @@
-fragment ClipsExtension on ClipsExtensionInstallation {
-  id
-  target
-  settings
-  translations
-  liveQuery
-  loading {
-    ui {
-      html
-    }
-  }
-  version {
-    id
-    apiVersion
-    assets {
-      source
-    }
-  }
-  extension {
-    id
-    name
-    app {
-      id
-      name
-    }
-  }
-}
diff --git a/app/shared/clips/graphql/ClipsExtensionPointFragment.graphql b/app/shared/clips/graphql/ClipsExtensionPointFragment.graphql
new file mode 100644
index 00000000..86c25079
--- /dev/null
+++ b/app/shared/clips/graphql/ClipsExtensionPointFragment.graphql
@@ -0,0 +1,36 @@
+fragment ClipsExtensionPoint on ClipsExtensionPointInstallation {
+  __typename
+  id
+  apiVersion
+  target
+  settings
+  translations
+  entry {
+    asHTML {
+      content
+    }
+    asJavaScript {
+      src
+    }
+  }
+  loading {
+    content
+  }
+  liveQuery {
+    content
+  }
+  extensionInstallation {
+    id
+    extension {
+      id
+      name
+      app {
+        id
+        name
+      }
+    }
+    appInstallation {
+      id
+    }
+  }
+}
diff --git a/app/shared/clips/manager.ts b/app/shared/clips/manager.ts
index 84f6df1d..673a5493 100644
--- a/app/shared/clips/manager.ts
+++ b/app/shared/clips/manager.ts
@@ -1,7 +1,12 @@
-import {createRenderer} from '@watching/thread-render';
+import {createRenderer, ThreadRenderer} from '@watching/thread-render';
 
 import {type ApiCore} from '@watching/clips';
-import {signal, type Signal} from '@quilted/quilt/signals';
+import {
+  computed,
+  ReadonlySignal,
+  signal,
+  type Signal,
+} from '@quilted/quilt/signals';
 import {EventEmitter} from '@quilted/quilt/events';
 import {
   createGraphQLFetch,
@@ -22,15 +27,13 @@ import {createResolvablePromise} from '../promises.ts';
 import {
   type ExtensionPoint,
   type ClipsExtension,
-  type ClipsExtensionPointInstance,
+  type ClipsExtensionPoint as ClipsExtensionPointType,
   type ClipsExtensionPointInstanceContext,
-  type ClipsExtensionPointInstanceOptions,
-  type ClipsExtensionPointLocalInstanceOptions,
-  type ClipsExtensionPointInstalledInstanceOptions,
 } from './extension.ts';
 import {
   type ExtensionPointDefinitions,
   type ExtensionPointDefinitionContext,
+  type OptionsForExtensionPoint,
 } from './extension-points.ts';
 import {createSandbox} from './sandbox.ts';
 import {createLiveQueryRunner} from './live-query.ts';
@@ -40,16 +43,20 @@ import localClipsExtensionsQuery from './graphql/LocalClipsExtensionsQuery.graph
 import localClipQuery, {
   type LocalClipQueryData,
 } from './graphql/LocalClipQuery.graphql';
+import type {ClipsExtensionPointFragmentData} from './graphql/ClipsExtensionPointFragment.graphql';
 
-export interface ClipsManager {
-  readonly extensionPoints: ExtensionPointDefinitions;
+export interface ClipsManagerType {
+  readonly context: ExtensionPointDefinitionContext;
+  readonly definitions: ExtensionPointDefinitions;
   readonly localDevelopment: ClipsLocalDevelopmentServer;
-  fetchInstance<Point extends ExtensionPoint>(
-    options: ClipsExtensionPointInstanceOptions<Point>,
-  ): ClipsExtensionPointInstance<Point>;
+  clipsForExtensionPoint<Point extends ExtensionPoint>(
+    point: Point,
+    options: OptionsForExtensionPoint<Point>,
+  ): readonly ClipsExtensionPointType<Point>[];
+  addInstalledClips(clips: readonly ClipsExtensionPointFragmentData[]): void;
 }
 
-export interface ClipsLocalDevelopmentServer
+export interface ClipsLocalDevelopmentServerType
   extends Pick<
     EventEmitter<ClipsLocalDevelopmentServerEventMap>,
     'on' | 'once'
@@ -74,76 +81,121 @@ export interface ClipsLocalDevelopmentServerEventMap {
   'connect:error': void;
 }
 
-export function createClipsManager(
-  appContext: ExtensionPointDefinitionContext,
-  extensionPoints: ExtensionPointDefinitions,
-): ClipsManager {
-  const renderers = new Map<
-    Map<string, unknown>,
-    ClipsExtensionPointInstance<any>
-  >();
-  const localDevelopment = createLocalDevelopmentServer();
+class ClipsExtensionPointWithOptions<Point extends ExtensionPoint>
+  implements ClipsExtensionPointType<Point>
+{
+  readonly target: Point;
+  readonly id: ClipsExtensionPointType<Point>['id'];
+  readonly installation: ClipsExtensionPointType<Point>['installation'];
+  readonly extension: ClipsExtensionPointType<Point>['extension'];
+  readonly options: OptionsForExtensionPoint<Point>;
+  readonly manager: ClipsManagerType;
 
-  return {
-    extensionPoints,
-    localDevelopment,
-    fetchInstance,
-  };
+  #installed = signal<ClipsExtensionPointType<Point>['installed']>(undefined);
 
-  function getFromCache<Point extends ExtensionPoint>(
-    options: ClipsExtensionPointInstanceOptions<Point> & {_id: string},
-  ) {
-    const entries = Object.entries(options);
+  get installed() {
+    return this.#installed.value;
+  }
 
-    for (const [cacheKey, instance] of renderers.entries()) {
-      if (cacheKey.size !== entries.length) continue;
+  #local: ReadonlySignal<ClipsExtensionPointType<Point>['local']>;
 
-      if (
-        entries.every(([key, value]) =>
-          defaultIsEqual(cacheKey.get(key), value),
-        )
-      ) {
-        return instance as ClipsExtensionPointInstance<Point>;
-      }
-    }
+  get local() {
+    return this.#local.value;
   }
 
-  function fetchInstance<Point extends ExtensionPoint>(
-    options: ClipsExtensionPointInstanceOptions<Point>,
-  ): ClipsExtensionPointInstance<Point> {
-    const cacheKey: ClipsExtensionPointInstanceOptions<Point> & {_id: string} =
-      {
-        _id: `${options.source}:${options.extension.id}:${options.target}`,
-        ...(options.options as any),
+  constructor(
+    target: Point,
+    options: OptionsForExtensionPoint<Point>,
+    {
+      manager,
+      installed,
+      local,
+    }: {
+      manager: ClipsManagerType;
+      installed: Signal<ClipsExtensionPointFragmentData | undefined>;
+      local: Signal<ClipsLocalDevelopmentServerExtension | undefined>;
+    },
+  ) {
+    const installedData = installed.peek();
+    const localData = local.peek();
+
+    if (localData == null && installedData == null) {
+      throw new Error('No data for constructing a clip extension point');
+    }
+
+    this.target = target;
+    this.manager = manager;
+    this.options = options;
+
+    if (installedData) {
+      const {id, extensionInstallation} = installedData;
+      const {extension} = extensionInstallation;
+
+      this.id = id;
+      this.installation = {id: extensionInstallation.id};
+      this.extension = {
+        id: extension.id,
+        name: extension.name,
+        app: {
+          id: extension.app.id,
+          name: extension.app.name,
+        },
       };
+      this.options = options;
+    } else {
+      this.id = `${localData!.id}/${target}`;
+      this.installation = {id: `${localData!.id}/${target}/LocalInstallation`};
+      this.extension = localData!;
+    }
 
-    const cached = getFromCache(cacheKey);
-    if (cached) return cached;
+    let installedInstance: InstanceType<
+      typeof ClipsExtensionPointInstalledInstance<any>
+    >;
+    this.#installed = computed(() => {
+      const installedExtension = installed.value;
 
-    const renderer =
-      options.source === 'local'
-        ? createLocalInstance(options)
-        : createInstalledInstance(options);
+      if (installedExtension == null) return undefined;
 
-    renderers.set(new Map(Object.entries(cacheKey)), renderer);
+      installedInstance ??= new ClipsExtensionPointInstalledInstance(
+        this,
+        installedExtension,
+      );
+      return installedInstance;
+    });
 
-    return renderer;
+    const createLocalInstance = this.#createLocalInstance.bind(this);
+
+    let localRenderer: ReturnType<typeof createLocalInstance>;
+    this.#local = computed(() => {
+      const localExtension = local.value;
+
+      if (localExtension == null) return undefined;
+
+      return {
+        get renderer() {
+          localRenderer ??= createLocalInstance(localExtension);
+          return localRenderer;
+        },
+      };
+    });
   }
 
-  function createInstalledInstance<Point extends ExtensionPoint>(
-    options: ClipsExtensionPointInstalledInstanceOptions<Point>,
+  #createLocalInstance<Point extends ExtensionPoint>(
+    _clip: ClipsLocalDevelopmentServerExtension,
+    // extensionPoint: ClipsLocalDevelopmentServerExtension['extends'][number],
   ) {
-    const extensionPoint = extensionPoints[options.target];
+    const {target, extension, manager, options} = this;
+    const extensionPoint = manager.definitions[target];
 
     const extensionGraphQL = createGraphQLFetch({
       url: ({name}) => {
         const url = new URL(
           '/api/graphql/clips',
-          appContext.router.currentRequest.url,
+          this.manager.context.router.currentRequest.url,
         );
 
         if (name) url.searchParams.set('name', name);
-        url.searchParams.set('extension', options.extension.id);
+        url.searchParams.set('extension', extension.id);
 
         return url;
       },
@@ -151,27 +203,29 @@ export function createClipsManager(
     });
 
     const extensionContext: ExtensionPointDefinitionContext = {
-      ...appContext,
+      ...this.manager.context,
       graphql: extensionGraphQL,
     };
 
-    const settings = signal(JSON.parse(options.settings ?? '{}'));
+    const events = new EventEmitter<{script: string}>();
+    const script = signal<string | undefined>(undefined);
+    const translations = signal<string | undefined>(undefined);
+    const settings = signal({});
     const liveQuery = createLiveQueryRunner(
-      options.liveQuery,
-      (helpers) => extensionPoint.query(options.options as never, helpers),
+      undefined,
+      (helpers) => extensionPoint.query(options as never, helpers),
       {
         context: extensionContext,
         signal: new AbortController().signal,
       },
     );
     const mutate = createMutateRunner(
-      (helpers) =>
-        extensionPoint.mutate?.(options.options as never, helpers) ?? {},
+      (helpers) => extensionPoint.mutate?.(options as never, helpers) ?? {},
       {
         context: extensionContext,
       },
     );
-    const loadingUi = signal(options.loadingUi);
+    const loadingUi = signal<string | undefined>(undefined);
 
     const renderer = createRenderer<ClipsExtensionPointInstanceContext<Point>>({
       context({signal}) {
@@ -186,48 +240,127 @@ export function createClipsManager(
         };
       },
       async prepare({context: {sandbox, liveQuery}}) {
+        const localScript = script.value ?? (await events.once('script'));
+
         await Promise.all([
-          sandbox.imports.load(options.script.url, options.version),
+          sandbox.imports.load(localScript, 'unstable'),
           liveQuery.run(),
         ]);
       },
       async render({signal, receiver, context}) {
-        const {settings, liveQuery, mutate, sandbox} = context;
+        const {settings, liveQuery, sandbox} = context;
 
         const api: ApiCore<Point> = {
-          target: options.target,
-          version: options.version,
+          target: target as any,
+          version: 'unstable',
           settings: ThreadSignal.serialize(settings, {signal}),
-          localize: {locale: 'en', translations: options.translations},
+          localize: {locale: 'en', translations: translations.value},
           query: ThreadSignal.serialize(liveQuery.result, {signal}),
           mutate: mutate as any,
         };
 
-        await sandbox.imports.render(
-          options.target,
-          receiver.connection,
-          api as any,
-        );
+        await sandbox.imports.render(target, receiver.connection, api as any);
       },
     });
 
+    this.#pollForUpdates(
+      renderer,
+      events,
+      script,
+      translations,
+      liveQuery,
+      loadingUi,
+    );
+
     return renderer;
   }
 
-  function createLocalInstance<Point extends ExtensionPoint>(
-    options: ClipsExtensionPointLocalInstanceOptions<Point>,
+  async #pollForUpdates(
+    renderer: ThreadRenderer<ClipsExtensionPointInstanceContext<any>>,
+    events: EventEmitter<{script: string}>,
+    script: Signal<string | undefined>,
+    translations: Signal<string | undefined>,
+    liveQuery: ReturnType<typeof createLiveQueryRunner>,
+    loadingUi: Signal<string | undefined>,
   ) {
-    const extensionPoint = extensionPoints[options.target];
+    let lastSuccessfulBuild:
+      | LocalClipQueryData.App.ClipsExtension.Build_ExtensionBuildSuccess
+      | undefined;
+
+    for await (const result of this.manager.localDevelopment.query(
+      localClipQuery,
+      {
+        signal: renderer.signal,
+        variables: {id: this.extension.id},
+      },
+    )) {
+      const clipsExtension = result.data?.app?.clipsExtension;
+
+      if (clipsExtension == null) {
+        await renderer.destroy();
+        return;
+      }
+
+      const build = clipsExtension?.build;
+      const translationsJson = clipsExtension?.translations.find(({locale}) =>
+        locale.startsWith('en'),
+      )?.dictionary;
+      const extensionPoint = clipsExtension?.extends.find((extend) => {
+        return extend.target === this.target;
+      });
+
+      let needsRestart = false;
+
+      if (translations != null) {
+        translations.value = translationsJson;
+      }
+
+      if (
+        build?.__typename === 'ExtensionBuildSuccess' &&
+        build.id !== lastSuccessfulBuild?.id
+      ) {
+        const newScript = build.assets[0]!.source;
+
+        script.value = newScript;
+        needsRestart = lastSuccessfulBuild != null;
+        lastSuccessfulBuild = build;
+
+        events.emit('script', newScript);
+      }
+
+      if (needsRestart) {
+        renderer.restart();
+      }
+
+      if (extensionPoint) {
+        liveQuery.update(extensionPoint.liveQuery?.query ?? undefined);
+        loadingUi.value = extensionPoint.loading?.ui?.html;
+      }
+    }
+  }
+}
+
+class ClipsExtensionPointInstalledInstance<Point extends ExtensionPoint> {
+  #renderer:
+    | ThreadRenderer<ClipsExtensionPointInstanceContext<Point>>
+    | undefined;
+  #extensionPoint: ClipsExtensionPointWithOptions<Point>;
+
+  get renderer() {
+    if (this.#renderer != null) return this.#renderer;
+
+    const {target, extension, manager, options} = this.#extensionPoint;
+    const extensionPoint = manager.definitions[target];
 
     const extensionGraphQL = createGraphQLFetch({
       url: ({name}) => {
         const url = new URL(
           '/api/graphql/clips',
-          appContext.router.currentRequest.url,
+          manager.context.router.currentRequest.url,
         );
 
         if (name) url.searchParams.set('name', name);
-        url.searchParams.set('extension', options.extension.id);
+        url.searchParams.set('extension', extension.id);
 
         return url;
       },
@@ -235,7 +368,7 @@ export function createClipsManager(
     });
 
     const extensionContext: ExtensionPointDefinitionContext = {
-      ...appContext,
+      ...manager.context,
       graphql: extensionGraphQL,
     };
 
@@ -245,15 +378,14 @@ export function createClipsManager(
     const settings = signal({});
     const liveQuery = createLiveQueryRunner(
       undefined,
-      (helpers) => extensionPoint.query(options.options as never, helpers),
+      (helpers) => extensionPoint.query(options as never, helpers),
       {
         context: extensionContext,
         signal: new AbortController().signal,
       },
     );
     const mutate = createMutateRunner(
-      (helpers) =>
-        extensionPoint.mutate?.(options.options as never, helpers) ?? {},
+      (helpers) => extensionPoint.mutate?.(options as never, helpers) ?? {},
       {
         context: extensionContext,
       },
@@ -284,7 +416,7 @@ export function createClipsManager(
         const {settings, liveQuery, sandbox} = context;
 
         const api: ApiCore<Point> = {
-          target: options.target,
+          target: target as any,
           version: 'unstable',
           settings: ThreadSignal.serialize(settings, {signal}),
           localize: {locale: 'en', translations: translations.value},
@@ -292,73 +424,208 @@ export function createClipsManager(
           mutate: mutate as any,
         };
 
-        await sandbox.imports.render(
-          options.target,
-          receiver.connection,
-          api as any,
-        );
+        await sandbox.imports.render(target, receiver.connection, api as any);
       },
     });
 
-    pollForUpdates();
+    this.#renderer = renderer;
+    return renderer;
+  }
+
+  constructor(
+    extensionPoint: ClipsExtensionPointWithOptions<Point>,
+    _installed: ClipsExtensionPointFragmentData,
+  ) {
+    this.#extensionPoint = extensionPoint;
+  }
+}
+
+class ClipsExtensionPoint<Point extends ExtensionPoint> {
+  readonly target: Point;
+  readonly id: ClipsExtensionPointType<Point>['id'];
+  readonly manager: ClipsManagerType;
+
+  #localData: Signal<ClipsLocalDevelopmentServerExtension | undefined>;
+  #installedData: Signal<ClipsExtensionPointFragmentData | undefined>;
+  #optionsCache = new Map<
+    [string, unknown][],
+    ClipsExtensionPointWithOptions<any>
+  >();
+
+  constructor(
+    target: Point,
+    {
+      manager,
+      from,
+    }: {
+      manager: ClipsManagerType;
+      from:
+        | ClipsExtensionPointFragmentData
+        | ClipsLocalDevelopmentServerExtension;
+    },
+  ) {
+    this.target = target;
+    this.manager = manager;
+    this.id = from.id;
+
+    if ('__typename' in from) {
+      this.#installedData = signal(from);
+      this.#localData = signal(undefined);
+    } else {
+      this.#installedData = signal(undefined);
+      this.#localData = signal(from);
+    }
+  }
+
+  fromOptions(
+    options: OptionsForExtensionPoint<Point>,
+  ): ClipsExtensionPointWithOptions<Point> {
+    const optionsEntries = Object.entries(options as any);
+
+    let extensionPoint: ClipsExtensionPointWithOptions<Point> | undefined;
+    for (const [cacheOptionsEntries, cachedExtensionPoint] of this
+      .#optionsCache) {
+      if (defaultIsEqual(cacheOptionsEntries, optionsEntries)) {
+        extensionPoint = cachedExtensionPoint;
+        break;
+      }
+    }
+
+    if (extensionPoint) return extensionPoint;
+
+    extensionPoint = new ClipsExtensionPointWithOptions(this.target, options, {
+      manager: this.manager,
+      installed: this.#installedData,
+      local: this.#localData,
+    });
+
+    this.#optionsCache.set(optionsEntries, extensionPoint);
+    return extensionPoint;
+  }
+
+  updateInstalled(data: ClipsExtensionPointFragmentData) {
+    if (this.#installedData.peek() != null) return;
+    this.#installedData.value = data;
+  }
+
+  updateLocal(data: ClipsLocalDevelopmentServerExtension) {
+    this.#localData.value = data;
+  }
+}
+
+export class ClipsManager implements ClipsManagerType {
+  readonly context: ExtensionPointDefinitionContext;
+  readonly definitions: ExtensionPointDefinitions;
+  readonly localDevelopment: ClipsLocalDevelopmentServer;
 
-    async function pollForUpdates() {
-      let lastSuccessfulBuild:
-        | LocalClipQueryData.App.ClipsExtension.Build_ExtensionBuildSuccess
+  readonly #localCache = new Map<
+    string,
+    ClipsLocalDevelopmentServerExtension
+  >();
+  readonly #installedCache = new Map<string, ClipsExtensionPointFragmentData>();
+  readonly #extensionPointCache = new Map<string, ClipsExtensionPoint<any>>();
+  readonly #extensionPoints = signal<ClipsExtensionPoint<any>[]>([]);
+
+  constructor(
+    context: ExtensionPointDefinitionContext,
+    definitions: ExtensionPointDefinitions,
+  ) {
+    this.context = context;
+    this.definitions = definitions;
+    this.localDevelopment = new ClipsLocalDevelopmentServer();
+
+    this.localDevelopment.extensions.subscribe((extensions) => {
+      let newClips:
+        | {
+            id: string;
+            target: ExtensionPoint;
+            extension: ClipsLocalDevelopmentServerExtension;
+          }[]
         | undefined;
 
-      for await (const result of localDevelopment.query(localClipQuery, {
-        signal: renderer.signal,
-        variables: {id: options.extension.id},
-      })) {
-        const clipsExtension = result.data?.app?.clipsExtension;
+      for (const extension of extensions) {
+        for (const extensionPoint of extension.extends) {
+          const id = `${extension.id}/${extensionPoint.target}`;
+          if (this.#localCache.has(id)) continue;
+          this.#localCache.set(id, extension);
+          newClips ??= [];
+          newClips.push({id, target: extensionPoint.target as any, extension});
+        }
+      }
+
+      if (newClips == null) return;
+
+      let newExtensionPoints: ClipsExtensionPoint<any>[] | undefined;
 
-        if (clipsExtension == null) {
-          await renderer.destroy();
-          return;
+      for (const clip of newClips) {
+        const cached = this.#extensionPointCache.get(clip.extension.id);
+
+        if (cached) {
+          cached.updateLocal(clip.extension);
+          continue;
         }
 
-        const build = clipsExtension?.build;
-        const translationsJson = clipsExtension?.translations.find(({locale}) =>
-          locale.startsWith('en'),
-        )?.dictionary;
-        const extensionPoint = clipsExtension?.extends.find((extend) => {
-          return extend.target === options.target;
+        const extensionPoint = new ClipsExtensionPoint(clip.target as any, {
+          manager: this,
+          from: clip.extension,
         });
 
-        let needsRestart = false;
+        this.#extensionPointCache.set(clip.id, extensionPoint);
+        newExtensionPoints ??= [];
+        newExtensionPoints.push(extensionPoint);
+      }
 
-        if (translations != null) {
-          translations.value = translationsJson;
-        }
+      if (newExtensionPoints == null) return;
+      this.#extensionPoints.value.push(...newExtensionPoints);
+    });
+  }
 
-        if (
-          build?.__typename === 'ExtensionBuildSuccess' &&
-          build.id !== lastSuccessfulBuild?.id
-        ) {
-          const newScript = build.assets[0]!.source;
+  addInstalledClips(clips: readonly ClipsExtensionPointFragmentData[]) {
+    let newClips: ClipsExtensionPointFragmentData[] | undefined;
 
-          script.value = newScript;
-          needsRestart = lastSuccessfulBuild != null;
-          lastSuccessfulBuild = build;
+    for (const clip of clips) {
+      if (this.#installedCache.has(clip.id)) continue;
+      this.#installedCache.set(clip.id, clip);
+      newClips ??= [];
+      newClips.push(clip);
+    }
 
-          events.emit('script', newScript);
-        }
+    if (newClips == null) return;
 
-        if (needsRestart) {
-          renderer.restart();
-        }
+    let newExtensionPoints: ClipsExtensionPoint<any>[] | undefined;
 
-        if (extensionPoint) {
-          liveQuery.update(extensionPoint.liveQuery?.query ?? undefined);
-          loadingUi.value = extensionPoint.loading?.ui?.html;
-        }
+    for (const clip of newClips) {
+      const cached = this.#extensionPointCache.get(clip.id);
+
+      if (cached) {
+        cached.updateInstalled(clip);
+        continue;
       }
+
+      const extensionPoint = new ClipsExtensionPoint(clip.target as any, {
+        manager: this,
+        from: clip,
+      });
+
+      this.#extensionPointCache.set(clip.id, extensionPoint);
+      newExtensionPoints ??= [];
+      newExtensionPoints.push(extensionPoint);
     }
 
-    return renderer;
+    if (newExtensionPoints == null) return;
+    this.#extensionPoints.value.push(...newExtensionPoints);
+  }
+
+  clipsForExtensionPoint<Point extends ExtensionPoint>(
+    point: Point,
+    options: OptionsForExtensionPoint<Point>,
+  ): readonly ClipsExtensionPointWithOptions<Point>[] {
+    return this.#extensionPoints.value
+      .filter((instance) => instance.target === point)
+      .map((instance) => instance.fromOptions(options));
   }
 }
+
 interface ClipsLocalDevelopmentServerThreadApi {
   query<Data, Variables>(
     query: string,
@@ -366,46 +633,47 @@ interface ClipsLocalDevelopmentServerThreadApi {
   ): AsyncGenerator<{data?: Data}, void, void>;
 }
 
-function createLocalDevelopmentServer(): ClipsLocalDevelopmentServer {
-  const threadPromise = createResolvablePromise<{
-    thread: Thread<ClipsLocalDevelopmentServerThreadApi>;
-  }>();
-
-  const url: ClipsLocalDevelopmentServer['url'] = signal(undefined);
-  const events = new EventEmitter<ClipsLocalDevelopmentServerEventMap>();
-  const connected = signal(false);
-  const extensions: ClipsLocalDevelopmentServer['extensions'] = signal([]);
+class ClipsLocalDevelopmentServer {
+  #threadPromise: ReturnType<
+    typeof createResolvablePromise<{
+      thread: Thread<ClipsLocalDevelopmentServerThreadApi>;
+    }>
+  >;
+  url: Signal<URL | undefined>;
+  connected: Signal<boolean>;
+  extensions: Signal<ClipsLocalDevelopmentServerExtension[]>;
+  #events: EventEmitter<ClipsLocalDevelopmentServerEventMap>;
+
+  constructor() {
+    this.#threadPromise = createResolvablePromise<{
+      thread: Thread<ClipsLocalDevelopmentServerThreadApi>;
+    }>();
+    this.url = signal(undefined);
+    this.#events = new EventEmitter<ClipsLocalDevelopmentServerEventMap>();
+    this.connected = signal(false);
+    this.extensions = signal([]);
+  }
 
-  const query: ClipsLocalDevelopmentServer['query'] = async function* query(
-    graphql,
-    options,
-  ) {
-    const {thread} = await threadPromise.promise;
+  async *query<Data, Variables>(
+    graphql: GraphQLOperation<Data, Variables>,
+    options?: GraphQLVariableOptions<Variables> & {signal?: AbortSignal},
+  ): AsyncGenerator<GraphQLResult<Data>, void, void> {
+    const {thread} = await this.#threadPromise.promise;
 
-    for await (const result of queryWithThread(
+    for await (const result of this.#queryWithThread(
       thread,
       graphql,
       options as any,
     )) {
       yield result;
     }
-  };
-
-  return {
-    url,
-    connected,
-    query,
-    connect,
-    extensions,
-    on: events.on,
-    once: events.once,
-  };
+  }
 
-  async function connect(newUrl: URL) {
-    connected.value = false;
-    url.value = new URL(newUrl);
+  async connect(newUrl: URL) {
+    this.connected.value = false;
+    this.url.value = new URL(newUrl);
 
-    events.emit('connect:start');
+    this.#events.emit('connect:start');
 
     try {
       const socket = new WebSocket(newUrl.href);
@@ -414,22 +682,27 @@ function createLocalDevelopmentServer(): ClipsLocalDevelopmentServer {
           socket,
         );
 
-      threadPromise.resolve({thread});
-      connected.value = true;
+      this.#threadPromise.resolve({thread});
+      this.connected.value = true;
 
-      events.emit('connect:end');
+      this.#events.emit('connect:end');
 
-      queryLocalExtensions();
+      this.#queryLocalExtensions();
     } catch (error) {
-      threadPromise.reject(error);
-      events.emit('connect:error');
-      events.emit('connect:end');
+      this.#threadPromise.reject(error);
+      this.#events.emit('connect:error');
+      this.#events.emit('connect:end');
 
       throw error;
     }
   }
 
-  async function* queryWithThread(
+  on: EventEmitter<ClipsLocalDevelopmentServerEventMap>['on'] = (...args) =>
+    (this.#events as any).on(...args);
+  once: EventEmitter<ClipsLocalDevelopmentServerEventMap>['once'] = (...args) =>
+    (this.#events as any).once(...args);
+
+  async *#queryWithThread(
     thread: Thread<ClipsLocalDevelopmentServerThreadApi>,
     ...args: Parameters<ClipsLocalDevelopmentServer['query']>
   ) {
@@ -448,8 +721,8 @@ function createLocalDevelopmentServer(): ClipsLocalDevelopmentServer {
     }
   }
 
-  async function queryLocalExtensions() {
-    for await (const {data} of query(localClipsExtensionsQuery)) {
+  async #queryLocalExtensions() {
+    for await (const {data} of this.query(localClipsExtensionsQuery)) {
       if (data == null) continue;
 
       const newExtensions: ClipsLocalDevelopmentServerExtension[] = [];
@@ -472,7 +745,7 @@ function createLocalDevelopmentServer(): ClipsLocalDevelopmentServer {
         });
       }
 
-      extensions.value = newExtensions;
+      this.extensions.value = newExtensions;
     }
   }
 }
diff --git a/app/shared/clips/react.tsx b/app/shared/clips/react.tsx
index f1afa0e7..e9674a26 100644
--- a/app/shared/clips/react.tsx
+++ b/app/shared/clips/react.tsx
@@ -1,5 +1,5 @@
 import {useMemo, useEffect} from 'preact/hooks';
-import {signal, useComputed, type Signal} from '@quilted/quilt/signals';
+import {signal, type Signal} from '@quilted/quilt/signals';
 import {
   type GraphQLResult,
   type GraphQLOperation,
@@ -15,7 +15,7 @@ import {
   type ExtensionPointWithOptions,
   type OptionsForExtensionPoint,
 } from './extension-points';
-import {type ClipsExtensionFragmentData} from './graphql/ClipsExtensionFragment.graphql';
+import {type ClipsExtensionPointFragmentData} from './graphql/ClipsExtensionPointFragment.graphql';
 
 declare module '~/shared/context.ts' {
   interface AppContext {
@@ -35,7 +35,7 @@ export function useClipsManager() {
 
 export function useClips<Point extends ExtensionPoint>(
   point: Point,
-  installations: readonly ClipsExtensionFragmentData[] | null | undefined,
+  clips: readonly ClipsExtensionPointFragmentData[] | null | undefined,
   ...optionsArg: Point extends ExtensionPointWithOptions
     ? [OptionsForExtensionPoint<Point>]
     : [never?]
@@ -43,98 +43,10 @@ export function useClips<Point extends ExtensionPoint>(
   const [options] = optionsArg;
 
   const manager = useClipsManager();
-  const server = manager.localDevelopment;
-
-  const installedClips = useMemo(() => {
-    if (installations == null) return [];
-
-    const installedClips: ClipsExtensionPoint<Point>[] = [];
-
-    for (const installation of installations) {
-      const {
-        id,
-        target,
-        extension,
-        version,
-        settings,
-        liveQuery,
-        loading,
-        translations,
-      } = installation;
-
-      if (target !== point) continue;
-
-      installedClips.push({
-        id: `${id}:${point}`,
-        target: point,
-        manager,
-        extension: {
-          id: extension.id,
-          name: extension.name,
-          app: {
-            id: extension.app.id,
-            name: extension.app.name,
-          },
-        },
-        installed: {
-          source: 'installed',
-          target: point,
-          extension: {id: extension.id},
-          script: {url: version.assets[0]!.source},
-          version: version.apiVersion.toLowerCase() as any,
-          settings: settings ?? undefined,
-          liveQuery: liveQuery ?? undefined,
-          loadingUi: loading?.ui?.html,
-          translations: translations ?? undefined,
-          options: options as any,
-        },
-      });
-    }
-
-    return installedClips;
-  }, [installations, point, options]);
-
-  const allClips = useComputed(() => {
-    const allLocalClips = server.extensions.value;
-
-    if (allLocalClips.length === 0) return installedClips;
-
-    const localClips: ClipsExtensionPoint<Point>[] = [];
-
-    for (const localClip of allLocalClips) {
-      const {id, name, app} = localClip;
-
-      if (!localClip.extends.some(({target}) => target === point)) {
-        continue;
-      }
 
-      localClips.push({
-        id: `${id}:${point}`,
-        target: point,
-        manager,
-        extension: {
-          id,
-          name,
-          app: {
-            id: app.id,
-            name: app.name,
-          },
-        },
-        local: {
-          source: 'local',
-          target: point,
-          extension: {id},
-          options: options as any,
-        },
-      });
-    }
-
-    if (localClips.length === 0) return installedClips;
-
-    return [...localClips, ...installedClips];
-  }, [server, point, installedClips]);
-
-  return allClips.value;
+  if (clips) manager.addInstalledClips(clips);
+
+  return manager.clipsForExtensionPoint(point, options as any);
 }
 
 type ClipsLocalDevelopmentServerGraphQLResult<Data> =
diff --git a/graphql/main/apps.schema.graphql b/graphql/main/apps.schema.graphql
index 6906c084..1242df8a 100644
--- a/graphql/main/apps.schema.graphql
+++ b/graphql/main/apps.schema.graphql
@@ -27,9 +27,9 @@ extend type Mutation {
   updateClipsExtension(id: ID!, name: String): UpdateClipsExtensionPayload!
   pushClipsExtension(
     id: ID!
-    code: String!
     name: String
     extends: [ClipsExtensionPointSupportInput!]
+    build: ClipsExtensionBuildInput!
     settings: ClipsExtensionSettingsInput
     translations: JSON
   ): PushClipsExtensionPayload!
@@ -55,31 +55,28 @@ extend type User {
 }
 
 extend type Series {
-  clipsInstallations(
+  clipsToRender(
     target: ClipsExtensionPoint!
-  ): [ClipsExtensionInstallation!]!
+  ): [ClipsExtensionPointInstallation!]!
 }
 
 extend type WatchThrough {
-  clipsInstallations(
+  clipsToRender(
     target: ClipsExtensionPoint!
-  ): [ClipsExtensionInstallation!]!
+  ): [ClipsExtensionPointInstallation!]!
 }
 
 scalar TranslationKey
 scalar ClipsExtensionPoint
 scalar ClipsExtensionApiVersion
 scalar ClipsLiveQuery
+scalar ClipsContentHTML
 scalar ClipsLoadingUIContentHTML
 
 type Icon {
   source: Url!
 }
 
-type Asset {
-  source: Url!
-}
-
 type App {
   id: ID!
   name: String!
@@ -112,7 +109,6 @@ enum ClipsExtensionVersionStatus {
 type ClipsExtensionVersion {
   id: ID!
   status: ClipsExtensionVersionStatus!
-  assets: [Asset!]!
   apiVersion: ClipsExtensionApiVersion!
   extension: ClipsExtension!
   extends: [ClipsExtensionPointSupport!]!
@@ -132,18 +128,35 @@ type ClipsExtensionPointSupportCondition {
 
 type ClipsExtensionPointSupport {
   target: ClipsExtensionPoint!
-  modules: [ClipsExtensionPointSupportModule!]!
   conditions: [ClipsExtensionPointSupportCondition!]!
-  liveQuery: ClipsLiveQuery
+  entry: ClipsExtensionPointSupportEntry!
+  liveQuery: ClipsExtensionPointSupportLiveQuery
   loading: ClipsExtensionPointSupportLoading
 }
 
-type ClipsExtensionPointSupportLoadingUI {
-  html: ClipsLoadingUIContentHTML!
+type ClipsExtensionPointSupportEntry {
+  asHTML: ClipsExtensionPointSupportEntryHTML
+  asJavaScript: ClipsExtensionPointSupportEntryJavaScript
+}
+
+type ClipsExtensionPointSupportEntryHTML {
+  content: ClipsContentHTML!
+}
+
+type ClipsExtensionPointSupportEntryJavaScript {
+  src: Url!
+}
+
+type ClipsExtensionPointSupportLiveQuery {
+  content: ClipsLiveQuery!
 }
 
 type ClipsExtensionPointSupportLoading {
-  ui: ClipsExtensionPointSupportLoadingUI
+  content: ClipsLoadingUIContentHTML!
+}
+
+type ClipsExtensionPointSupportLoadingUI {
+  html: ClipsLoadingUIContentHTML!
 }
 
 input ClipsExtensionPointSupportSeriesConditionInput {
@@ -155,30 +168,40 @@ input ClipsExtensionPointSupportConditionInput {
   series: ClipsExtensionPointSupportSeriesConditionInput
 }
 
-input ClipsExtensionPointSupportInput {
-  target: ClipsExtensionPoint!
-  modules: [ClipsExtensionPointSupportModuleInput!]
-  conditions: [ClipsExtensionPointSupportConditionInput!]
-  liveQuery: ClipsLiveQuery
-  loading: ClipsExtensionPointSupportLoadingInput
+enum ClipsExtensionBuildModuleContentType {
+  HTML
+  GRAPHQL
+  JAVASCRIPT
 }
 
-input ClipsExtensionPointSupportModuleInput {
-  contentType: ClipsExtensionPointSupportModuleContentType
+input ClipsExtensionBuildModuleInput {
+  name: String!
   content: String!
+  contentType: ClipsExtensionBuildModuleContentType!
 }
 
-enum ClipsExtensionPointSupportModuleContentType {
-  HTML
+input ClipsExtensionBuildInput {
+  modules: [ClipsExtensionBuildModuleInput!]!
 }
 
-type ClipsExtensionPointSupportModule {
-  contentType: ClipsExtensionPointSupportModuleContentType!
-  content: String!
+input ClipsExtensionPointSupportEntryInput {
+  module: String!
+}
+
+input ClipsExtensionPointSupportLiveQueryInput {
+  module: String!
 }
 
 input ClipsExtensionPointSupportLoadingInput {
-  ui: ClipsLoadingUIContentHTML
+  module: String!
+}
+
+input ClipsExtensionPointSupportInput {
+  target: ClipsExtensionPoint!
+  entry: ClipsExtensionPointSupportEntryInput!
+  liveQuery: ClipsExtensionPointSupportLiveQueryInput
+  loading: ClipsExtensionPointSupportLoadingInput
+  conditions: [ClipsExtensionPointSupportConditionInput!]
 }
 
 # Extension settings
@@ -280,29 +303,41 @@ enum ClipsExtensionVersionStatus {
 type AppInstallation {
   id: ID!
   app: App!
-  extensions: [AppExtensionInstallation!]!
+  extensions: [AppExtensionPointInstallation!]!
 }
 
 type ClipsExtensionInstallation {
   id: ID!
   extension: ClipsExtension!
   version: ClipsExtensionVersion!
-  target: ClipsExtensionPoint!
   appInstallation: AppInstallation!
   settings: JSON
   translations: JSON
-  liveQuery: ClipsLiveQuery
+  extensionPoints: [ClipsExtensionPointInstallation!]!
+}
+
+type ClipsExtensionPointInstallation {
+  id: ID!
+  target: ClipsExtensionPoint!
+  apiVersion: ClipsExtensionApiVersion!
+  settings: JSON
+  translations: JSON
+  extension: ClipsExtension!
+  extensionInstallation: ClipsExtensionInstallation!
+  appInstallation: AppInstallation!
+  entry: ClipsExtensionPointSupportEntry!
+  liveQuery: ClipsExtensionPointSupportLiveQuery
   loading: ClipsExtensionPointSupportLoading
 }
 
-union AppExtensionInstallation = ClipsExtensionInstallation
+union AppExtensionPointInstallation = ClipsExtensionInstallation
 
 # Mutations
 
 input CreateClipsInitialVersion {
-  code: String!
-  translations: JSON
   extends: [ClipsExtensionPointSupportInput!]
+  build: ClipsExtensionBuildInput!
+  translations: JSON
   settings: ClipsExtensionSettingsInput
 }
 
diff --git a/packages/cli/source/commands/publish/graphql/PublishLatestClipsExtensionVersionMutation.graphql b/packages/cli/source/commands/publish/graphql/PublishLatestClipsExtensionVersionMutation.graphql
index e4a1ea00..9c824836 100644
--- a/packages/cli/source/commands/publish/graphql/PublishLatestClipsExtensionVersionMutation.graphql
+++ b/packages/cli/source/commands/publish/graphql/PublishLatestClipsExtensionVersionMutation.graphql
@@ -2,8 +2,16 @@ mutation PublishLatestClipsExtensionVersion($id: ID!) {
   publishLatestClipsExtensionVersion(id: $id) {
     version {
       id
-      assets {
-        source
+      extends {
+        target
+        entry {
+          asHTML {
+            content
+          }
+          asJavaScript {
+            src
+          }
+        }
       }
     }
   }
diff --git a/packages/cli/source/commands/push/graphql/PushClipsExtensionMutation.graphql b/packages/cli/source/commands/push/graphql/PushClipsExtensionMutation.graphql
index 0f467cf7..733d5993 100644
--- a/packages/cli/source/commands/push/graphql/PushClipsExtensionMutation.graphql
+++ b/packages/cli/source/commands/push/graphql/PushClipsExtensionMutation.graphql
@@ -1,15 +1,15 @@
 mutation PushClipsExtension(
   $id: ID!
-  $code: String!
   $name: String
+  $build: ClipsExtensionBuildInput!
   $translations: JSON
   $extends: [ClipsExtensionPointSupportInput!]
   $settings: ClipsExtensionSettingsInput!
 ) {
   pushClipsExtension(
     id: $id
-    code: $code
     name: $name
+    build: $build
     translations: $translations
     extends: $extends
     settings: $settings
diff --git a/packages/cli/source/commands/push/push.ts b/packages/cli/source/commands/push/push.ts
index 4d160469..73227d31 100644
--- a/packages/cli/source/commands/push/push.ts
+++ b/packages/cli/source/commands/push/push.ts
@@ -33,6 +33,9 @@ type ClipsExtensionPointSupportInput = NonNullable<
   PushClipsExtensionMutationVariables['extends']
 >[number];
 
+type ClipsExtensionBuildModule =
+  PushClipsExtensionMutationVariables['build']['modules'][number];
+
 type ConfigurationField = NonNullable<
   ConfigurationFieldInput[keyof ConfigurationFieldInput]
 >;
@@ -167,34 +170,52 @@ async function pushExtension(
 
   const {directory, filename} = buildDetailsForExtension(extension, app);
 
-  const [code, translations, extensionPointSupport] = await Promise.all([
-    readFile(path.join(directory, filename), {
-      encoding: 'utf8',
-    }),
+  const modules = new Map<string, ClipsExtensionBuildModule>();
+
+  const entry = await loadEntryForExtension(
+    path.join(directory, filename),
+    extension,
+  );
+  modules.set(entry.name, entry);
+
+  const [translations, extensionPointSupport] = await Promise.all([
     loadTranslationsForExtension(extension),
     Promise.all(
       extension.extends.map(
         async (supported): Promise<ClipsExtensionPointSupportInput> => {
-          const [target, liveQuery, loadingUi] = await Promise.all([
+          const [target, liveQuery, loadingUI] = await Promise.all([
             validateExtensionPointTarget(supported.target),
             supported.query
               ? loadLiveQueryForExtension(supported.query, extension)
               : undefined,
             supported.loading?.ui
-              ? loadLoadingUiForExtension(supported.loading.ui, extension)
+              ? loadLoadingUIForExtension(supported.loading.ui, extension)
               : undefined,
           ]);
 
-          return {
+          const extensionPoint: ClipsExtensionPointSupportInput = {
             target,
             conditions: supported.conditions,
-            liveQuery,
-            loading: loadingUi
-              ? {
-                  ui: loadingUi,
-                }
-              : undefined,
+            entry: {
+              module: entry.name,
+            },
           };
+
+          if (liveQuery) {
+            modules.set(liveQuery.name, liveQuery);
+            extensionPoint.liveQuery = {
+              module: liveQuery.name,
+            };
+          }
+
+          if (loadingUI) {
+            modules.set(loadingUI.name, loadingUI);
+            extensionPoint.loading = {
+              module: loadingUI.name,
+            };
+          }
+
+          return extensionPoint;
         },
       ),
     ),
@@ -202,11 +223,13 @@ async function pushExtension(
 
   const buildOptions: Pick<
     PushClipsExtensionMutationVariables,
-    'code' | 'extends' | 'translations' | 'settings'
+    'build' | 'extends' | 'translations' | 'settings'
   > = {
-    code,
     translations: translations && JSON.stringify(translations),
     extends: extensionPointSupport,
+    build: {
+      modules: Array.from(modules.values()),
+    },
     settings: {
       fields: extension.settings.fields.map(
         (
@@ -308,30 +331,62 @@ async function validateExtensionPointTarget(target: string) {
   return target;
 }
 
+async function loadEntryForExtension(file: string, _extension: LocalExtension) {
+  const [code] = await Promise.all([readFile(file, 'utf8')]);
+
+  return {
+    name: '_extension.js',
+    content: code,
+    contentType: 'JAVASCRIPT',
+  } satisfies ClipsExtensionBuildModule;
+}
+
 async function loadLiveQueryForExtension(
   liveQuery: string,
   extension: LocalExtension,
 ) {
+  const absolutePath = path.resolve(extension.root, liveQuery);
   const [query, {validateAndNormalizeLiveQuery}] = await Promise.all([
-    readFile(path.resolve(extension.root, liveQuery), 'utf8'),
+    readFile(absolutePath, 'utf8'),
     import('@watching/tools/extension'),
   ]);
 
-  return validateAndNormalizeLiveQuery(query);
+  const content = await validateAndNormalizeLiveQuery(query);
+
+  return {
+    name: path.relative(extension.root, absolutePath),
+    content,
+    contentType: 'GRAPHQL',
+  } satisfies ClipsExtensionBuildModule;
 }
 
-async function loadLoadingUiForExtension(
+async function loadLoadingUIForExtension(
   ui: string,
   extension: LocalExtension,
 ) {
+  const isExternalFile = ui.endsWith('.html');
   const [html, {validateAndNormalizeLoadingUI}] = await Promise.all([
-    ui.endsWith('.html')
+    isExternalFile
       ? readFile(path.resolve(extension.root, ui), 'utf8')
       : Promise.resolve(ui),
     import('@watching/tools/extension'),
   ]);
 
-  return validateAndNormalizeLoadingUI(html.trim());
+  const content = await validateAndNormalizeLoadingUI(html.trim());
+
+  return (
+    isExternalFile
+      ? {
+          name: path.relative(extension.root, ui),
+          content,
+          contentType: 'HTML',
+        }
+      : {
+          name: '_extension.html',
+          content,
+          contentType: 'HTML',
+        }
+  ) satisfies ClipsExtensionBuildModule;
 }
 
 async function loadTranslationsForExtension(extension: LocalExtension) {
diff --git a/packages/thread-render/source/renderer.ts b/packages/thread-render/source/renderer.ts
index e18baad4..36a690cc 100644
--- a/packages/thread-render/source/renderer.ts
+++ b/packages/thread-render/source/renderer.ts
@@ -60,7 +60,9 @@ export function createRenderer<Context = Record<string, never>>({
     signal: abort.signal,
     on: events.on,
     once: events.once,
-    instance,
+    get instance() {
+      return instance.value;
+    },
     start,
     stop,
     destroy,
diff --git a/packages/thread-render/source/types.ts b/packages/thread-render/source/types.ts
index 00c6fcbe..8936dc09 100644
--- a/packages/thread-render/source/types.ts
+++ b/packages/thread-render/source/types.ts
@@ -5,9 +5,7 @@ import {type SignalRemoteReceiver} from '@remote-dom/signals';
 export interface ThreadRenderer<Context = Record<string, never>>
   extends Pick<EventEmitter<ThreadRendererEventMap>, 'on' | 'once'> {
   readonly signal: AbortSignal;
-  readonly instance: ReadonlySignal<
-    ThreadRendererInstance<Context> | undefined
-  >;
+  readonly instance: ThreadRendererInstance<Context> | undefined;
   start(): Promise<void>;
   stop(): Promise<void>;
   restart(): Promise<void>;
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index 5a5eecf2..d48ec8cf 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -405,6 +405,7 @@ model ClipsExtensionVersion {
   status       ClipsExtensionVersionStatus
   apiVersion   ClipsApiVersion
   scriptUrl    String?                     @db.VarChar(400)
+  build        Json?
   extends      Json?
   translations Json?
   settings     Json?