Merge pull request 'feat(ui): services in sidebar and sidebar pane' (#5072) from ui/list-services-sidebar into main

Reviewed-on: https://git.clan.lol/clan/clan-core/pulls/5072

pkgs/clan-app/ui/src/components/Sidebar/SidebarBody.tsx

@@ -5,7 +5,7 @@ import Icon from "../Icon/Icon";
 import { Typography } from "@/src/components/Typography/Typography";
 import { For, Show } from "solid-js";
 import { MachineStatus } from "@/src/components/MachineStatus/MachineStatus";
-import { buildMachinePath, useClanURI } from "@/src/hooks/clan";
+import { buildMachinePath, buildServicePath } from "@/src/hooks/clan";
 import { useMachineStateQuery } from "@/src/hooks/queries";
 import { SidebarProps } from "./Sidebar";
 import { Button } from "../Button/Button";
@@ -33,19 +33,19 @@ const MachineRoute = (props: MachineProps) => {
             size="xs"
             weight="bold"
             color="primary"
-            inverted={true}
+            inverted
           >
             {props.name}
           </Typography>
           <MachineStatus status={status()} />
         </div>
         <div class="flex w-full flex-row items-center gap-1">
-          <Icon icon="Flash" size="0.75rem" inverted={true} color="tertiary" />
+          <Icon icon="Flash" size="0.75rem" inverted color="tertiary" />
           <Typography
             hierarchy="label"
             family="mono"
             size="s"
-            inverted={true}
+            inverted
             color="primary"
           >
             {props.serviceCount}
@@ -56,18 +56,13 @@ const MachineRoute = (props: MachineProps) => {
   );
 };
 
-export const SidebarBody = (props: SidebarProps) => {
+const Machines = () => {
-  const clanURI = useClanURI();
-
   const ctx = useClanContext();
+  if (!ctx) {
+    throw new Error("ClanContext not found");
+  }
 
-  const sectionLabels = (props.staticSections || []).map(
+  const clanURI = ctx.clanURI;
-    (section) => section.title,
-  );
-
-  // controls which sections are open by default
-  // we want them all to be open by default
-  const defaultAccordionValues = ["your-machines", ...sectionLabels];
 
   const machines = () => {
     if (!ctx.machinesQuery.isSuccess) {
@@ -79,13 +74,7 @@ export const SidebarBody = (props: SidebarProps) => {
   };
 
   return (
-    <div class="sidebar-body">
+    <Accordion.Item class="item" value="machines">
-      <Accordion
-        class="accordion"
-        multiple
-        defaultValue={defaultAccordionValues}
-      >
-        <Accordion.Item class="item" value="your-machines">
       <Accordion.Header class="header">
         <Accordion.Trigger class="trigger">
           <Typography
@@ -93,17 +82,12 @@ export const SidebarBody = (props: SidebarProps) => {
             hierarchy="label"
             family="mono"
             size="xs"
-                inverted={true}
+            inverted
             color="tertiary"
           >
             Your Machines
           </Typography>
-              <Icon
+          <Icon icon="CaretDown" color="tertiary" inverted size="0.75rem" />
-                icon="CaretDown"
-                color="tertiary"
-                inverted={true}
-                size="0.75rem"
-              />
         </Accordion.Trigger>
       </Accordion.Header>
       <Accordion.Content class="content">
@@ -111,12 +95,7 @@ export const SidebarBody = (props: SidebarProps) => {
           when={machines()}
           fallback={
             <div class="flex w-full flex-col items-center justify-center gap-2.5">
-                  <Typography
+              <Typography hierarchy="body" size="s" weight="medium" inverted>
-                    hierarchy="body"
-                    size="s"
-                    weight="medium"
-                    inverted
-                  >
                 No machines yet
               </Typography>
               <Button
@@ -137,7 +116,7 @@ export const SidebarBody = (props: SidebarProps) => {
                   clanURI={clanURI}
                   machineID={id}
                   name={machine.data.name || id}
-                      serviceCount={0}
+                  serviceCount={machine?.instance_refs?.length ?? 0}
                 />
               )}
             </For>
@@ -145,6 +124,99 @@ export const SidebarBody = (props: SidebarProps) => {
         </Show>
       </Accordion.Content>
     </Accordion.Item>
+  );
+};
+
+export const ServiceRoute = (props: {
+  clanURI: string;
+  machineName?: string;
+  label: string;
+  id: string;
+  module: { input?: string | null | undefined; name: string };
+}) => (
+  <A href={buildServicePath(props)} replace={true}>
+    <div class="flex w-full flex-col gap-2">
+      <Typography
+        hierarchy="label"
+        size="s"
+        weight="bold"
+        color="primary"
+        inverted
+      >
+        {props.label}
+      </Typography>
+    </div>
+  </A>
+);
+
+const Services = () => {
+  const ctx = useClanContext();
+  if (!ctx) {
+    throw new Error("ClanContext not found");
+  }
+
+  const serviceInstances = () => {
+    if (!ctx.serviceInstancesQuery.isSuccess) {
+      return [];
+    }
+
+    return Object.entries(ctx.serviceInstancesQuery.data).map(
+      ([id, instance]) => {
+        const moduleName = instance.module.name;
+
+        const label = moduleName == id ? moduleName : `${moduleName} (${id})`;
+
+        return { id, label, module: instance.module };
+      },
+    );
+  };
+
+  return (
+    <Accordion.Item class="item" value="services">
+      <Accordion.Header class="header">
+        <Accordion.Trigger class="trigger">
+          <Typography
+            class="section-title"
+            hierarchy="label"
+            family="mono"
+            size="xs"
+            inverted
+            color="tertiary"
+          >
+            Services
+          </Typography>
+          <Icon icon="CaretDown" color="tertiary" inverted size="0.75rem" />
+        </Accordion.Trigger>
+      </Accordion.Header>
+      <Accordion.Content class="content">
+        <nav>
+          <For each={serviceInstances()}>
+            {(instance) => <ServiceRoute clanURI={ctx.clanURI} {...instance} />}
+          </For>
+        </nav>
+      </Accordion.Content>
+    </Accordion.Item>
+  );
+};
+
+export const SidebarBody = (props: SidebarProps) => {
+  const sectionLabels = (props.staticSections || []).map(
+    (section) => section.title,
+  );
+
+  // controls which sections are open by default
+  // we want them all to be open by default
+  const defaultAccordionValues = ["machines", "services", ...sectionLabels];
+
+  return (
+    <div class="sidebar-body">
+      <Accordion
+        class="accordion"
+        multiple
+        defaultValue={defaultAccordionValues}
+      >
+        <Machines />
+        <Services />
 
         <For each={props.staticSections}>
           {(section) => (
@@ -156,7 +228,7 @@ export const SidebarBody = (props: SidebarProps) => {
                     hierarchy="label"
                     family="mono"
                     size="xs"
-                    inverted={true}
+                    inverted
                     color="tertiary"
                   >
                     {section.title}
@@ -164,7 +236,7 @@ export const SidebarBody = (props: SidebarProps) => {
                   <Icon
                     icon="CaretDown"
                     color="tertiary"
-                    inverted={true}
+                    inverted
                     size="0.75rem"
                   />
                 </Accordion.Trigger>
@@ -179,7 +251,7 @@ export const SidebarBody = (props: SidebarProps) => {
                           size="xs"
                           weight="bold"
                           color="primary"
-                          inverted={true}
+                          inverted
                         >
                           {link.label}
                         </Typography>

pkgs/clan-app/ui/src/hooks/clan.ts

@@ -1,6 +1,6 @@
 import { callApi } from "@/src/hooks/api";
 import { addClanURI, setActiveClanURI } from "@/src/stores/clan";
-import { Params, Navigator, useParams } from "@solidjs/router";
+import { Params, Navigator, useParams, useSearchParams } from "@solidjs/router";
 
 export const encodeBase64 = (value: string) => window.btoa(value);
 export const decodeBase64 = (value: string) => window.atob(value);
@@ -30,6 +30,47 @@ export const buildClanPath = (clanURI: string) => {
 export const buildMachinePath = (clanURI: string, name: string) =>
   buildClanPath(clanURI) + "/machines/" + name;
 
+export const buildServicePath = (props: {
+  clanURI: string;
+  id: string;
+  module: {
+    name: string;
+    input?: string | null | undefined;
+  };
+}) => {
+  const { clanURI, id, module } = props;
+
+  const moduleName = encodeBase64(module.name);
+  const idEncoded = encodeBase64(id);
+
+  const result =
+    buildClanPath(clanURI) +
+    `/services/${moduleName}/${idEncoded}` +
+    (module.input ? `?input=${module.input}` : "");
+
+  return result;
+};
+
+export const useServiceParams = () => {
+  const params = useParams<{
+    name?: string;
+    id?: string;
+  }>();
+
+  const [search] = useSearchParams<{ input?: string }>();
+
+  if (!params.name || !params.id) {
+    console.error("Service params not found", params, window.location.pathname);
+    throw new Error("Service params not found");
+  }
+
+  return {
+    name: decodeBase64(params.name),
+    id: decodeBase64(params.id),
+    input: search.input,
+  };
+};
+
 export const navigateToClan = (navigate: Navigator, clanURI: string) => {
   const path = buildClanPath(clanURI);
   console.log("Navigating to clan", clanURI, path);
@@ -64,7 +105,21 @@ export const machineNameParam = (params: Params) => {
   return params.machineName;
 };
 
+export const inputParam = (params: Params) => params.input;
+export const nameParam = (params: Params) => params.name;
+export const idParam = (params: Params) => params.id;
+
 export const useMachineName = (): string => machineNameParam(useParams());
+export const useInputParam = (): string => inputParam(useParams());
+export const useNameParam = (): string => nameParam(useParams());
+
+export const maybeUseIdParam = (): string | null => {
+  const params = useParams();
+  if (params.id === undefined) {
+    return null;
+  }
+  return idParam(params);
+};
 
 export const maybeUseMachineName = (): string | null => {
   const params = useParams();

pkgs/clan-app/ui/src/hooks/queries.ts

@@ -25,6 +25,9 @@ export type MachineStatus = MachineState["status"];
 export type ListMachines = SuccessData<"list_machines">;
 export type MachineDetails = SuccessData<"get_machine_details">;
 
+export type ListServiceModules = SuccessData<"list_service_modules">;
+export type ListServiceInstances = SuccessData<"list_service_instances">;
+
 export interface MachineDetail {
   tags: Tags;
   machine: Machine;
@@ -47,7 +50,7 @@ export const useMachinesQuery = (clanURI: string) => {
   const client = useApiClient();
 
   return useQuery<ListMachines>(() => ({
-    queryKey: ["clans", encodeBase64(clanURI), "machines"],
+    queryKey: [...clanKey(clanURI), "machines"],
     queryFn: async () => {
       const api = client.fetch("list_machines", {
         flake: {
@@ -64,10 +67,16 @@ export const useMachinesQuery = (clanURI: string) => {
   }));
 };
 
+export const machineKey = (clanUri: string, machineName: string) => [
+  ...clanKey(clanUri),
+  "machine",
+  encodeBase64(machineName),
+];
+
 export const useMachineQuery = (clanURI: string, machineName: string) => {
   const client = useApiClient();
   return useQuery<MachineDetail>(() => ({
-    queryKey: ["clans", encodeBase64(clanURI), "machine", machineName],
+    queryKey: [machineKey(clanURI, machineName)],
     queryFn: async () => {
       const [tagsCall, machineCall, schemaCall] = [
         client.fetch("list_tags", {
@@ -122,7 +131,7 @@ export type TagsQuery = ReturnType<typeof useTags>;
 export const useTags = (clanURI: string) => {
   const client = useApiClient();
   return useQuery(() => ({
-    queryKey: ["clans", encodeBase64(clanURI), "tags"],
+    queryKey: [...clanKey(clanURI), "tags"],
     queryFn: async () => {
       const apiCall = client.fetch("list_tags", {
         flake: {
@@ -142,8 +151,9 @@ export const useTags = (clanURI: string) => {
 export const useMachineStateQuery = (clanURI: string, machineName: string) => {
   const client = useApiClient();
   return useQuery<MachineState>(() => ({
-    queryKey: ["clans", encodeBase64(clanURI), "machine", machineName, "state"],
+    queryKey: [...machineKey(clanURI, machineName), "state"],
     staleTime: 60_000, // 1 minute stale time
+    enabled: false,
     queryFn: async () => {
       const apiCall = client.fetch("get_machine_state", {
         machine: {
@@ -166,13 +176,61 @@ export const useMachineStateQuery = (clanURI: string, machineName: string) => {
   }));
 };
 
+export const useServiceModulesQuery = (clanURI: string) => {
+  const client = useApiClient();
+
+  return useQuery<ListServiceModules>(() => ({
+    queryKey: [...clanKey(clanURI), "service_modules"],
+    queryFn: async () => {
+      const call = client.fetch("list_service_modules", {
+        flake: {
+          identifier: clanURI,
+        },
+      });
+
+      const result = await call.result;
+      if (result.status === "error") {
+        throw new Error(
+          "Error fetching service modules: " + result.errors[0].message,
+        );
+      }
+
+      return result.data;
+    },
+  }));
+};
+
+export const useServiceInstancesQuery = (clanURI: string) => {
+  const client = useApiClient();
+
+  return useQuery<ListServiceInstances>(() => ({
+    queryKey: [...clanKey(clanURI), "service_instances"],
+    queryFn: async () => {
+      const call = client.fetch("list_service_instances", {
+        flake: {
+          identifier: clanURI,
+        },
+      });
+
+      const result = await call.result;
+      if (result.status === "error") {
+        throw new Error(
+          "Error fetching service instances: " + result.errors[0].message,
+        );
+      }
+
+      return result.data;
+    },
+  }));
+};
+
 export const useMachineDetailsQuery = (
   clanURI: string,
   machineName: string,
 ) => {
   const client = useApiClient();
   return useQuery<MachineDetails>(() => ({
-    queryKey: ["clans", encodeBase64(clanURI), "machine_detail", machineName],
+    queryKey: [machineKey(clanURI, machineName), "details"],
     queryFn: async () => {
       const call = client.fetch("get_machine_details", {
         machine: {
@@ -202,7 +260,7 @@ export const ClanDetailsPersister = experimental_createQueryPersister({
 export const useClanDetailsQuery = (clanURI: string) => {
   const client = useApiClient();
   return useQuery<ClanDetails>(() => ({
-    queryKey: ["clans", encodeBase64(clanURI), "details"],
+    queryKey: [...clanKey(clanURI), "details"],
     persister: ClanDetailsPersister.persisterFn,
     queryFn: async () => {
       const args = {
@@ -253,7 +311,8 @@ export const useClanListQuery = (
 
   return useQueries(() => ({
     queries: clanURIs.map((clanURI) => {
-      const queryKey = ["clans", encodeBase64(clanURI), "details"];
+      // @BMG: Is duplicating query key intentional?
+      const queryKey = [...clanKey(clanURI), "details"];
 
       return {
         // eslint-disable-next-line @tanstack/query/exhaustive-deps
@@ -322,7 +381,7 @@ export type MachineFlashOptionsQuery = UseQueryResult<MachineFlashOptions>;
 export const useMachineFlashOptions = (): MachineFlashOptionsQuery => {
   const client = useApiClient();
   return useQuery<MachineFlashOptions>(() => ({
-    queryKey: ["clans", "machine_flash_options"],
+    queryKey: ["flash_options"],
     queryFn: async () => {
       const call = client.fetch("get_machine_flash_options", {});
       const result = await call.result;
@@ -486,7 +545,7 @@ export type ServiceModules = SuccessData<"list_service_modules">;
 export const useServiceModules = (clanUri: string) => {
   const client = useApiClient();
   return useQuery(() => ({
-    queryKey: ["clans", encodeBase64(clanUri), "service_modules"],
+    queryKey: [...clanKey(clanUri), "service_modules"],
     queryFn: async () => {
       const call = client.fetch("list_service_modules", {
         flake: {
@@ -506,12 +565,14 @@ export const useServiceModules = (clanUri: string) => {
   }));
 };
 
+export const clanKey = (clanUri: string) => ["clans", encodeBase64(clanUri)];
+
 export type ServiceInstancesQuery = ReturnType<typeof useServiceInstances>;
 export type ServiceInstances = SuccessData<"list_service_instances">;
 export const useServiceInstances = (clanUri: string) => {
   const client = useApiClient();
   return useQuery(() => ({
-    queryKey: ["clans", encodeBase64(clanUri), "service_instances"],
+    queryKey: [...clanKey(clanUri), "service_instances"],
     queryFn: async () => {
       const call = client.fetch("list_service_instances", {
         flake: {

pkgs/clan-app/ui/src/routes/Clan/Clan.tsx

@@ -1,4 +1,4 @@
-import { RouteSectionProps, useNavigate } from "@solidjs/router";
+import { RouteSectionProps, useLocation, useNavigate } from "@solidjs/router";
 import {
   Component,
   createContext,
@@ -17,13 +17,15 @@ import {
   useClanURI,
   useMachineName,
 } from "@/src/hooks/clan";
-import { CubeScene, setWorldMode, worldMode } from "@/src/scene/cubes";
+import { CubeScene } from "@/src/scene/cubes";
 import {
   ClanDetails,
+  ListServiceInstances,
   MachinesQueryResult,
   useClanDetailsQuery,
   useClanListQuery,
   useMachinesQuery,
+  useServiceInstancesQuery,
 } from "@/src/hooks/queries";
 import { clanURIs, setStore, store } from "@/src/stores/clan";
 import { produce } from "solid-js/store";
@@ -33,37 +35,27 @@ import styles from "./Clan.module.css";
 import { Sidebar } from "@/src/components/Sidebar/Sidebar";
 import { UseQueryResult } from "@tanstack/solid-query";
 import { ListClansModal } from "@/src/modals/ListClansModal/ListClansModal";
-import {
+
-  ServiceWorkflow,
-  SubmitServiceHandler,
-} from "@/src/workflows/Service/Service";
-import { useApiClient } from "@/src/hooks/ApiClient";
-import toast from "solid-toast";
 import { AddMachine } from "@/src/workflows/AddMachine/AddMachine";
+import { SelectService } from "@/src/workflows/Service/SelectServiceFlyout";
 
-interface ClanContextProps {
+export type WorldMode = "default" | "select" | "service" | "create" | "move";
-  clanURI: string;
-  machinesQuery: MachinesQueryResult;
-  activeClanQuery: UseQueryResult<ClanDetails>;
-  otherClanQueries: UseQueryResult<ClanDetails>[];
-  allClansQueries: UseQueryResult<ClanDetails>[];
-
-  isLoading(): boolean;
-  isError(): boolean;
-
-  showAddMachine(): boolean;
-  setShowAddMachine(value: boolean): void;
-}
 
 function createClanContext(
   clanURI: string,
   machinesQuery: MachinesQueryResult,
   activeClanQuery: UseQueryResult<ClanDetails>,
   otherClanQueries: UseQueryResult<ClanDetails>[],
+  serviceInstancesQuery: UseQueryResult<ListServiceInstances>,
 ) {
+  const [worldMode, setWorldMode] = createSignal<WorldMode>("select");
   const [showAddMachine, setShowAddMachine] = createSignal(false);
+
+  const navigate = useNavigate();
+  const location = useLocation();
+
   const allClansQueries = [activeClanQuery, ...otherClanQueries];
-  const allQueries = [machinesQuery, ...allClansQueries];
+  const allQueries = [machinesQuery, ...allClansQueries, serviceInstancesQuery];
 
   return {
     clanURI,
@@ -71,14 +63,23 @@ function createClanContext(
     activeClanQuery,
     otherClanQueries,
     allClansQueries,
+    serviceInstancesQuery,
     isLoading: () => allQueries.some((q) => q.isLoading),
     isError: () => activeClanQuery.isError,
     showAddMachine,
     setShowAddMachine,
+    navigateToRoot: () => {
+      if (location.pathname === buildClanPath(clanURI)) return;
+      navigate(buildClanPath(clanURI), { replace: true });
+    },
+    setWorldMode,
+    worldMode,
   };
 }
 
-const ClanContext = createContext<ClanContextProps>();
+const ClanContext = createContext<
+  ReturnType<typeof createClanContext> | undefined
+>();
 
 export const useClanContext = () => {
   const ctx = useContext(ClanContext);
@@ -104,12 +105,14 @@ export const Clan: Component<RouteSectionProps> = (props) => {
   );
 
   const machinesQuery = useMachinesQuery(clanURI);
+  const serviceInstancesQuery = useServiceInstancesQuery(clanURI);
 
   const ctx = createClanContext(
     clanURI,
     machinesQuery,
     activeClanQuery,
     otherClanQueries,
+    serviceInstancesQuery,
   );
 
   return (
@@ -192,33 +195,7 @@ const ClanSceneController = (props: RouteSectionProps) => {
     }),
   );
 
-  const client = useApiClient();
+  const location = useLocation();
-  const handleSubmitService: SubmitServiceHandler = async (
-    instance,
-    action,
-  ) => {
-    console.log(action, "Instance", instance);
-
-    if (action !== "create") {
-      toast.error("Only creating new services is supported");
-      return;
-    }
-    const call = client.fetch("create_service_instance", {
-      flake: {
-        identifier: ctx.clanURI,
-      },
-      module_ref: instance.module,
-      roles: instance.roles,
-    });
-    const result = await call.result;
-
-    if (result.status === "error") {
-      toast.error("Error creating service instance");
-      console.error("Error creating service instance", result.errors);
-    }
-    toast.success("Created");
-    setWorldMode("select");
-  };
 
   return (
     <>
@@ -254,14 +231,19 @@ const ClanSceneController = (props: RouteSectionProps) => {
         isLoading={ctx.isLoading()}
         cubesQuery={ctx.machinesQuery}
         toolbarPopup={
-          <Show when={worldMode() === "service"}>
+          <Show when={ctx.worldMode() === "service"}>
-            <ServiceWorkflow
+            <Show
-              handleSubmit={handleSubmitService}
+              when={location.pathname.includes("/services/")}
+              fallback={
+                <SelectService
                   onClose={() => {
-                setWorldMode("select");
+                    ctx.setWorldMode("select");
-                currentPromise()?.resolve({ id: "0" });
                   }}
                 />
+              }
+            >
+              {props.children}
+            </Show>
           </Show>
         }
         onCreate={onCreate}

pkgs/clan-app/ui/src/routes/Machine/Machine.tsx

@@ -10,6 +10,7 @@ import { SidebarMachineStatus } from "@/src/components/Sidebar/SidebarMachineSta
 import { SidebarSectionInstall } from "@/src/components/Sidebar/SidebarSectionInstall";
 
 import styles from "./Machine.module.css";
+import { SectionServices } from "@/src/routes/Machine/SectionServices";
 
 export const Machine = (props: RouteSectionProps) => {
   const navigate = useNavigate();
@@ -62,6 +63,7 @@ export const Machine = (props: RouteSectionProps) => {
         />
         <SectionGeneral {...sectionProps} />
         <SectionTags {...sectionProps} />
+        <SectionServices />
       </>
     );
   };

pkgs/clan-app/ui/src/routes/Machine/SectionServices.module.css

@@ -0,0 +1,41 @@
+.sectionServices {
+  @apply overflow-hidden flex flex-col;
+  @apply bg-inv-4 rounded-md;
+
+  nav * {
+    @apply outline-none;
+  }
+
+  nav > a {
+    @apply block w-full px-2 py-1.5 min-h-7 my-2 rounded-md;
+
+    &:first-child {
+      @apply mt-0;
+    }
+
+    &:last-child {
+      @apply mb-0;
+    }
+
+    &:focus-visible {
+      background: linear-gradient(
+        90deg,
+        theme(colors.secondary.900),
+        60%,
+        theme(colors.secondary.600) 100%
+      );
+    }
+
+    &:hover {
+      @apply bg-inv-acc-2;
+    }
+
+    &:active {
+      @apply bg-inv-acc-3;
+    }
+
+    &.active {
+      @apply bg-inv-acc-2;
+    }
+  }
+}

pkgs/clan-app/ui/src/routes/Machine/SectionServices.tsx

@@ -0,0 +1,56 @@
+import { SidebarSection } from "@/src/components/Sidebar/SidebarSection";
+import { useClanContext } from "@/src/routes/Clan/Clan";
+import { For, Show } from "solid-js";
+import { useMachineName } from "@/src/hooks/clan";
+import { ServiceRoute } from "@/src/components/Sidebar/SidebarBody";
+import styles from "./SectionServices.module.css";
+
+export const SectionServices = () => {
+  const ctx = useClanContext();
+
+  const services = () => {
+    if (!(ctx.machinesQuery.isSuccess && ctx.serviceInstancesQuery.isSuccess)) {
+      return [];
+    }
+
+    const machineName = useMachineName();
+    if (!ctx.machinesQuery.data[machineName]) {
+      return [];
+    }
+
+    return (ctx.machinesQuery.data[machineName].instance_refs ?? []).map(
+      (id) => {
+        const module = ctx.serviceInstancesQuery.data?.[id].module;
+        if (!module) {
+          throw new Error(`Service instance ${id} has no module`);
+        }
+
+        return {
+          id,
+          module,
+          label: module.name == id ? module.name : `${module.name} (${id})`,
+        };
+      },
+    );
+  };
+
+  return (
+    <Show when={ctx.serviceInstancesQuery.isSuccess}>
+      <SidebarSection title="Services">
+        <div class={styles.sectionServices}>
+          <nav>
+            <For each={services()}>
+              {(instance) => (
+                <ServiceRoute
+                  clanURI={ctx.clanURI}
+                  machineName={useMachineName()}
+                  {...instance}
+                />
+              )}
+            </For>
+          </nav>
+        </div>
+      </SidebarSection>
+    </Show>
+  );
+};

pkgs/clan-app/ui/src/routes/Service/Service.tsx

@@ -0,0 +1,59 @@
+import { RouteSectionProps, useNavigate } from "@solidjs/router";
+import { useClanContext } from "@/src/routes/Clan/Clan";
+import { ServiceWorkflow } from "@/src/workflows/Service/Service";
+import { SubmitServiceHandler } from "@/src/workflows/Service/models";
+import { buildClanPath } from "@/src/hooks/clan";
+import { useApiClient } from "@/src/hooks/ApiClient";
+import { useQueryClient } from "@tanstack/solid-query";
+import { clanKey } from "@/src/hooks/queries";
+import { onMount } from "solid-js";
+
+export const Service = (props: RouteSectionProps) => {
+  const ctx = useClanContext();
+
+  const navigate = useNavigate();
+
+  const client = useApiClient();
+
+  const queryClient = useQueryClient();
+
+  onMount(() => {
+    ctx.setWorldMode("service");
+  });
+
+  const handleSubmit: SubmitServiceHandler = async (instance, action) => {
+    console.log("Service submitted", instance, action);
+
+    if (action !== "create") {
+      console.warn("Updating service instances is not supported yet");
+      return;
+    }
+
+    const call = client.fetch("create_service_instance", {
+      flake: {
+        identifier: ctx.clanURI,
+      },
+      module_ref: instance.module,
+      roles: instance.roles,
+    });
+    const result = await call.result;
+
+    if (result.status === "error") {
+      console.error("Error creating service instance", result.errors);
+    }
+
+    queryClient.invalidateQueries({
+      queryKey: clanKey(ctx.clanURI),
+    });
+
+    ctx.setWorldMode("select");
+  };
+
+  const handleClose = () => {
+    console.log("Service closed, navigating back");
+    navigate(buildClanPath(ctx.clanURI), { replace: true });
+    ctx.setWorldMode("select");
+  };
+
+  return <ServiceWorkflow handleSubmit={handleSubmit} onClose={handleClose} />;
+};

pkgs/clan-app/ui/src/routes/index.tsx

@@ -2,6 +2,7 @@ import type { RouteDefinition } from "@solidjs/router/dist/types";
 import { Onboarding } from "@/src/routes/Onboarding/Onboarding";
 import { Clan } from "@/src/routes/Clan/Clan";
 import { Machine } from "@/src/routes/Machine/Machine";
+import { Service } from "@/src/routes/Service/Service";
 
 export const Routes: RouteDefinition[] = [
   {
@@ -30,6 +31,15 @@ export const Routes: RouteDefinition[] = [
           {
             path: "/machines/:machineName",
             component: Machine,
+            children: [
+              {
+                path: "/",
+              },
+            ],
+          },
+          {
+            path: "/services/:name/:id",
+            component: Service,
           },
         ],
       },

pkgs/clan-app/ui/src/scene/cubes.tsx

@@ -31,6 +31,7 @@ import {
   setHighlightGroups,
 } from "./highlightStore";
 import { createMachineMesh } from "./MachineRepr";
+import { useClanContext } from "@/src/routes/Clan/Clan";
 
 function intersectMachines(
   event: MouseEvent,
@@ -94,12 +95,6 @@ export function useMachineClick() {
   return lastClickedMachine;
 }
 
-/*Gloabl signal*/
-const [worldMode, setWorldMode] = createSignal<
-  "default" | "select" | "service" | "create" | "move"
->("select");
-export { worldMode, setWorldMode };
-
 export function CubeScene(props: {
   cubesQuery: MachinesQueryResult;
   onCreate: () => Promise<{ id: string }>;
@@ -111,6 +106,8 @@ export function CubeScene(props: {
   clanURI: string;
   toolbarPopup?: JSX.Element;
 }) {
+  const ctx = useClanContext();
+
   let container: HTMLDivElement;
   let scene: THREE.Scene;
   let camera: THREE.OrthographicCamera;
@@ -440,7 +437,7 @@ export function CubeScene(props: {
     updateCameraInfo();
 
     createEffect(
-      on(worldMode, (mode) => {
+      on(ctx.worldMode, (mode) => {
         if (mode === "create") {
           actionBase!.visible = true;
         } else {
@@ -466,7 +463,7 @@ export function CubeScene(props: {
     // - Select/deselects a cube in mode
     // - Creates a new cube in "create" mode
     const onClick = (event: MouseEvent) => {
-      if (worldMode() === "create") {
+      if (ctx.worldMode() === "create") {
         props
           .onCreate()
           .then(({ id }) => {
@@ -484,16 +481,16 @@ export function CubeScene(props: {
           .finally(() => {
             if (actionBase) actionBase.visible = false;
 
-            setWorldMode("select");
+            ctx.setWorldMode("select");
           });
       }
-      if (worldMode() === "move") {
+      if (ctx.worldMode() === "move") {
         const currId = menuIntersection().at(0);
         const pos = cursorPosition();
         if (!currId || !pos) return;
 
         props.setMachinePos(currId, pos);
-        setWorldMode("select");
+        ctx.setWorldMode("select");
         clearHighlight("move");
       }
 
@@ -513,13 +510,14 @@ export function CubeScene(props: {
 
         if (!id) return;
 
-        if (worldMode() === "select") props.onSelect(new Set<string>([id]));
+        if (ctx.worldMode() === "select") props.onSelect(new Set<string>([id]));
 
+        console.log("Clicked on machine", id);
         emitMachineClick(id); // notify subscribers
       } else {
         emitMachineClick(null);
 
-        if (worldMode() === "select") props.onSelect(new Set<string>());
+        if (ctx.worldMode() === "select") props.onSelect(new Set<string>());
       }
     };
 
@@ -561,7 +559,7 @@ export function CubeScene(props: {
       if (e.button === 0) {
         // Left button
 
-        if (worldMode() === "select" && machines.length) {
+        if (ctx.worldMode() === "select" && machines.length) {
           // Disable controls to avoid conflict
           controls.enabled = false;
 
@@ -571,7 +569,7 @@ export function CubeScene(props: {
             // Set machine as flying
             setHighlightGroups({ move: new Set(machines) });
 
-            setWorldMode("move");
+            ctx.setWorldMode("move");
             renderLoop.requestRender();
           }, 500);
           setCancelMove(cancelMove);
@@ -597,14 +595,14 @@ export function CubeScene(props: {
         // Always re-enable controls
         controls.enabled = true;
 
-        if (worldMode() === "move") {
+        if (ctx.worldMode() === "move") {
           // Set machine as not flying
           props.setMachinePos(
             highlightGroups["move"].values().next().value!,
             cursorPosition() || null,
           );
           clearHighlight("move");
-          setWorldMode("select");
+          ctx.setWorldMode("select");
           renderLoop.requestRender();
         }
       }
@@ -691,13 +689,14 @@ export function CubeScene(props: {
 
   const onAddClick = (event: MouseEvent) => {
     setPositionMode("grid");
-    setWorldMode("create");
+    ctx.setWorldMode("create");
     renderLoop.requestRender();
   };
   const onMouseMove = (event: MouseEvent) => {
-    if (!(worldMode() === "create" || worldMode() === "move")) return;
+    if (!(ctx.worldMode() === "create" || ctx.worldMode() === "move")) return;
 
-    const actionRepr = worldMode() === "create" ? actionBase : actionMachine;
+    const actionRepr =
+      ctx.worldMode() === "create" ? actionBase : actionMachine;
     if (!actionRepr) return;
 
     actionRepr.visible = true;
@@ -732,7 +731,7 @@ export function CubeScene(props: {
     }
   };
   const handleMenuSelect = (mode: "move") => {
-    setWorldMode(mode);
+    ctx.setWorldMode(mode);
     setHighlightGroups({ move: new Set(menuIntersection()) });
 
     // Find the position of the first selected machine
@@ -752,7 +751,7 @@ export function CubeScene(props: {
   };
 
   createEffect(
-    on(worldMode, (mode) => {
+    on(ctx.worldMode, (mode) => {
       console.log("World mode changed to", mode);
     }),
   );
@@ -775,10 +774,10 @@ export function CubeScene(props: {
       <div
         class={cx(
           "cubes-scene-container",
-          worldMode() === "default" && "cursor-no-drop",
+          ctx.worldMode() === "default" && "cursor-no-drop",
-          worldMode() === "select" && "cursor-pointer",
+          ctx.worldMode() === "select" && "cursor-pointer",
-          worldMode() === "service" && "cursor-pointer",
+          ctx.worldMode() === "service" && "cursor-pointer",
-          worldMode() === "create" && "cursor-cell",
+          ctx.worldMode() === "create" && "cursor-cell",
           isDragging() && "!cursor-grabbing",
         )}
         ref={(el) => (container = el)}
@@ -792,24 +791,25 @@ export function CubeScene(props: {
             description="Select machine"
             name="Select"
             icon="Cursor"
-            onClick={() => setWorldMode("select")}
+            onClick={() => ctx.setWorldMode("select")}
-            selected={worldMode() === "select"}
+            selected={ctx.worldMode() === "select"}
           />
           <ToolbarButton
             description="Create new machine"
             name="new-machine"
             icon="NewMachine"
             onClick={onAddClick}
-            selected={worldMode() === "create"}
+            selected={ctx.worldMode() === "create"}
           />
           <Divider orientation="vertical" />
           <ToolbarButton
             description="Add new Service"
             name="modules"
             icon="Services"
-            selected={worldMode() === "service"}
+            selected={ctx.worldMode() === "service"}
             onClick={() => {
-              setWorldMode("service");
+              ctx.navigateToRoot();
+              ctx.setWorldMode("service");
             }}
           />
           <ToolbarButton

pkgs/clan-app/ui/src/workflows/Service/SelectServiceFlyout.tsx

@@ -0,0 +1,120 @@
+import { Search } from "@/src/components/Search/Search";
+import { Typography } from "@/src/components/Typography/Typography";
+import { buildServicePath, useClanURI } from "@/src/hooks/clan";
+import { useServiceInstances, useServiceModules } from "@/src/hooks/queries";
+import { useNavigate } from "@solidjs/router";
+import { createEffect, createSignal, Show } from "solid-js";
+import { Module } from "./models";
+import Icon from "@/src/components/Icon/Icon";
+import { Combobox } from "@kobalte/core/combobox";
+import { useClickOutside } from "@/src/hooks/useClickOutside";
+
+interface FlyoutProps {
+  onClose: () => void;
+}
+export const SelectService = (props: FlyoutProps) => {
+  const clanURI = useClanURI();
+
+  const serviceModulesQuery = useServiceModules(clanURI);
+  const serviceInstancesQuery = useServiceInstances(clanURI);
+
+  const [moduleOptions, setModuleOptions] = createSignal<Module[]>([]);
+
+  createEffect(() => {
+    if (serviceModulesQuery.data && serviceInstancesQuery.data) {
+      setModuleOptions(
+        serviceModulesQuery.data.modules.map((currService) => ({
+          value: `${currService.usage_ref.name}:${currService.usage_ref.input}`,
+          label: currService.usage_ref.name,
+          raw: currService,
+        })),
+      );
+    }
+  });
+
+  const handleChange = (module: Module | null) => {
+    if (!module) return;
+
+    const serviceURL = buildServicePath({
+      clanURI,
+      id: module.raw.instance_refs[0] || module.raw.usage_ref.name,
+      module: {
+        name: module.raw.usage_ref.name,
+        input: module.raw.usage_ref.input,
+      },
+    });
+    navigate(serviceURL);
+  };
+  const navigate = useNavigate();
+
+  let ref: HTMLDivElement;
+
+  useClickOutside(
+    () => ref,
+    () => {
+      props.onClose();
+    },
+  );
+  return (
+    <div
+      ref={(e) => (ref = e)}
+      class="absolute bottom-full left-1/2 mb-2 -translate-x-1/2"
+    >
+      <div class="w-[30rem]">
+        <Search<Module>
+          loading={
+            serviceModulesQuery.isLoading || serviceInstancesQuery.isLoading
+          }
+          height="13rem"
+          onChange={handleChange}
+          options={moduleOptions()}
+          renderItem={(item, opts) => {
+            return (
+              <div class="flex items-center justify-between gap-2 overflow-hidden rounded-md px-2 py-1 pr-4">
+                <div class="flex size-8 shrink-0 items-center justify-center rounded-md bg-white">
+                  <Icon icon="Code" />
+                </div>
+                <div class="flex w-full flex-col">
+                  <Combobox.ItemLabel class="flex gap-1.5">
+                    <Show when={item.raw.instance_refs.length > 0}>
+                      <div class="flex items-center rounded bg-[#76FFA4] px-1 py-0.5">
+                        <Typography hierarchy="label" weight="bold" size="xxs">
+                          Added
+                        </Typography>
+                      </div>
+                    </Show>
+                    <Typography
+                      hierarchy="body"
+                      size="s"
+                      weight="medium"
+                      inverted
+                    >
+                      {item.label}
+                    </Typography>
+                  </Combobox.ItemLabel>
+                  <Typography
+                    hierarchy="body"
+                    size="xxs"
+                    weight="normal"
+                    color="quaternary"
+                    inverted
+                    class="flex justify-between"
+                  >
+                    <span class="inline-block max-w-80 truncate align-middle">
+                      {item.raw.info.manifest.description}
+                    </span>
+                    <span class="inline-block max-w-32 truncate align-middle">
+                      <Show when={!item.raw.native} fallback="by clan-core">
+                        by {item.raw.usage_ref.input}
+                      </Show>
+                    </span>
+                  </Typography>
+                </div>
+              </div>
+            );
+          }}
+        />
+      </div>
+    </div>
+  );
+};

pkgs/clan-app/ui/src/workflows/Service/Service.stories.tsx

@@ -160,6 +160,9 @@ export const SelectRoleMembers: Story = {
       handleSubmit={(instance) => {
         console.log("Submitted instance:", instance);
       }}
+      onClose={() => {
+        console.log("Closed");
+      }}
       initialStep="select:members"
       initialStore={{
         currentRole: "peer",

pkgs/clan-app/ui/src/workflows/Service/Service.tsx

@@ -4,10 +4,9 @@ import {
   StepperProvider,
   useStepper,
 } from "@/src/hooks/stepper";
-import { useClanURI } from "@/src/hooks/clan";
+import { useClanURI, useServiceParams } from "@/src/hooks/clan";
 import {
   MachinesQuery,
-  ServiceModules,
   TagsQuery,
   useMachinesQuery,
   useServiceInstances,
@@ -18,18 +17,15 @@ import {
   createEffect,
   createMemo,
   createSignal,
-  For,
-  JSX,
   Show,
   on,
   onMount,
+  For,
 } from "solid-js";
-import { Search } from "@/src/components/Search/Search";
 import Icon from "@/src/components/Icon/Icon";
 import { Combobox } from "@kobalte/core/combobox";
 import { Typography } from "@/src/components/Typography/Typography";
-import { TagSelect } from "@/src/components/Search/TagSelect";
+
-import { Tag } from "@/src/components/Tag/Tag";
 import { createForm, FieldValues } from "@modular-forms/solid";
 import styles from "./Service.module.css";
 import { TextInput } from "@/src/components/Form/TextInput";
@@ -40,152 +36,16 @@ import { SearchMultiple } from "@/src/components/Search/MultipleSearch";
 import { useMachineClick } from "@/src/scene/cubes";
 import {
   clearAllHighlights,
-  highlightGroups,
   setHighlightGroups,
 } from "@/src/scene/highlightStore";
-import { useClickOutside } from "@/src/hooks/useClickOutside";
+import {
-
+  getRoleMembers,
-type ModuleItem = ServiceModules["modules"][number];
+  RoleType,
-
+  ServiceStoreType,
-interface Module {
+  SubmitServiceHandler,
-  value: string;
+} from "./models";
-  label: string;
+import { TagSelect } from "@/src/components/Search/TagSelect";
-  raw: ModuleItem;
+import { Tag } from "@/src/components/Tag/Tag";
-}
-
-const SelectService = () => {
-  const clanURI = useClanURI();
-  const stepper = useStepper<ServiceSteps>();
-
-  const serviceModulesQuery = useServiceModules(clanURI);
-  const serviceInstancesQuery = useServiceInstances(clanURI);
-  const machinesQuery = useMachinesQuery(clanURI);
-
-  const [moduleOptions, setModuleOptions] = createSignal<Module[]>([]);
-  createEffect(() => {
-    if (serviceModulesQuery.data && serviceInstancesQuery.data) {
-      setModuleOptions(
-        serviceModulesQuery.data.modules.map((currService) => ({
-          value: `${currService.usage_ref.name}:${currService.usage_ref.input}`,
-          label: currService.usage_ref.name,
-          raw: currService,
-        })),
-      );
-    }
-  });
-  const [store, set] = getStepStore<ServiceStoreType>(stepper);
-
-  return (
-    <Search<Module>
-      loading={serviceModulesQuery.isLoading}
-      height="13rem"
-      onChange={(module) => {
-        if (!module) return;
-
-        set("module", {
-          name: module.raw.usage_ref.name,
-          input: module.raw.usage_ref.input,
-          raw: module.raw,
-        });
-        // TODO: Ideally we need to ask
-        // - create new
-        // - update existing (and select which one)
-
-        // For now:
-        // Create a new instance, if there are no instances yet
-        // Update the first instance, if there is one
-        if (module.raw.instance_refs.length === 0) {
-          set("action", "create");
-        } else {
-          if (!serviceInstancesQuery.data) return;
-          if (!machinesQuery.data) return;
-          set("action", "update");
-
-          const instanceName = module.raw.instance_refs[0];
-          const instance = serviceInstancesQuery.data[instanceName];
-          console.log("Editing existing instance", module);
-
-          for (const role of Object.keys(instance.roles || {})) {
-            const tags = Object.keys(instance.roles?.[role].tags || {});
-            const machines = Object.keys(instance.roles?.[role].machines || {});
-
-            const machineTags = machines.map((m) => ({
-              value: "m_" + m,
-              label: m,
-              type: "machine" as const,
-            }));
-            const tagsTags = tags.map((t) => {
-              return {
-                value: "t_" + t,
-                label: t,
-                type: "tag" as const,
-                members: Object.entries(machinesQuery.data || {})
-                  .filter(([_, m]) => m.data.tags?.includes(t))
-                  .map(([k]) => k),
-              };
-            });
-            console.log("Members for role", role, [
-              ...machineTags,
-              ...tagsTags,
-            ]);
-            if (!store.roles) {
-              set("roles", {});
-            }
-            const roleMembers = [...machineTags, ...tagsTags].sort((a, b) =>
-              a.label.localeCompare(b.label),
-            );
-            set("roles", role, roleMembers);
-            console.log("set", store.roles);
-          }
-          // Initialize the roles with the existing members
-        }
-
-        stepper.next();
-      }}
-      options={moduleOptions()}
-      renderItem={(item, opts) => {
-        return (
-          <div class="flex items-center justify-between gap-2 overflow-hidden rounded-md px-2 py-1 pr-4">
-            <div class="flex size-8 shrink-0 items-center justify-center rounded-md bg-white">
-              <Icon icon="Code" />
-            </div>
-            <div class="flex w-full flex-col">
-              <Combobox.ItemLabel class="flex gap-1.5">
-                <Show when={item.raw.instance_refs.length > 0}>
-                  <div class="flex items-center rounded bg-[#76FFA4] px-1 py-0.5">
-                    <Typography hierarchy="label" weight="bold" size="xxs">
-                      Added
-                    </Typography>
-                  </div>
-                </Show>
-                <Typography hierarchy="body" size="s" weight="medium" inverted>
-                  {item.label}
-                </Typography>
-              </Combobox.ItemLabel>
-              <Typography
-                hierarchy="body"
-                size="xxs"
-                weight="normal"
-                color="quaternary"
-                inverted
-                class="flex justify-between"
-              >
-                <span class="inline-block max-w-80 truncate align-middle">
-                  {item.raw.info.manifest.description}
-                </span>
-                <span class="inline-block max-w-32 truncate align-middle">
-                  <Show when={!item.raw.native} fallback="by clan-core">
-                    by {item.raw.usage_ref.input}
-                  </Show>
-                </span>
-              </Typography>
-            </div>
-          </div>
-        );
-      }}
-    />
-  );
-};
 
 const useOptions = (tagsQuery: TagsQuery, machinesQuery: MachinesQuery) =>
   createMemo<TagType[]>(() => {
@@ -215,22 +75,78 @@ const useOptions = (tagsQuery: TagsQuery, machinesQuery: MachinesQuery) =>
     );
   });
 
+const sanitizeModuleInput = (
+  input: string | undefined,
+  core_input_name: string,
+) => {
+  if (!input) return null;
+
+  if (input === core_input_name) return null;
+
+  return input;
+};
+
 interface RolesForm extends FieldValues {
   roles: Record<string, string[]>;
   instanceName: string;
 }
 const ConfigureService = () => {
   const stepper = useStepper<ServiceSteps>();
+  const clanURI = useClanURI();
+  const machinesQuery = useMachinesQuery(clanURI);
+  const serviceModulesQuery = useServiceModules(clanURI);
+  const serviceInstancesQuery = useServiceInstances(clanURI);
+  const routerProps = useServiceParams();
+
   const [store, set] = getStepStore<ServiceStoreType>(stepper);
 
   const [formStore, { Form, Field }] = createForm<RolesForm>({
     initialValues: {
       // Default to the module name, until we support multiple instances
-      instanceName: store.module.name,
+      instanceName: routerProps.id,
     },
   });
 
-  const machinesQuery = useMachinesQuery(useClanURI());
+  const selectedModule = createMemo(() => {
+    if (!serviceModulesQuery.data) return undefined;
+    return serviceModulesQuery.data.modules.find(
+      (m) =>
+        m.usage_ref.name === routerProps.name &&
+        // left side is string | null
+        // right side is string | undefined
+        m.usage_ref.input ===
+          sanitizeModuleInput(
+            routerProps.input,
+            serviceModulesQuery.data.core_input_name,
+          ),
+    );
+  });
+
+  createEffect(
+    on(
+      () => [serviceInstancesQuery.data, machinesQuery.data] as const,
+      ([instances, machines]) => {
+        // Wait for all queries to be ready
+        if (!instances || !machines) return;
+
+        const instance = instances[routerProps.id || routerProps.name];
+
+        set("roles", {});
+        if (!instance) {
+          set("action", "create");
+          return;
+        }
+
+        for (const role of Object.keys(instance.roles || {})) {
+          // Get Role members
+          const roleMembers = getRoleMembers(instance, machines, role);
+          set("roles", role, roleMembers);
+        }
+        set("action", "update");
+      },
+    ),
+  );
+
   const tagsQuery = useTags(useClanURI());
 
   const options = useOptions(tagsQuery, machinesQuery);
@@ -249,13 +165,15 @@ const ConfigureService = () => {
         },
       ]),
     );
-
     store.handleSubmit(
       {
         name: values.instanceName,
         module: {
-          name: store.module.name,
+          name: routerProps.name,
-          input: store.module.input,
+          input: sanitizeModuleInput(
+            routerProps.input,
+            serviceModulesQuery.data?.core_input_name || "clan-core",
+          ),
         },
         roles,
       },
@@ -271,7 +189,7 @@ const ConfigureService = () => {
         </div>
         <div class="flex flex-col">
           <Typography hierarchy="body" size="s" weight="medium" inverted>
-            {store.module.name}
+            {routerProps.name}
           </Typography>
           <Field name="instanceName">
             {(field, input) => (
@@ -294,11 +212,15 @@ const ConfigureService = () => {
           ghost
           size="s"
           class="ml-auto"
-          onClick={store.close}
+          onClick={() => store.close()}
         />
       </div>
       <div class={styles.content}>
-        <For each={Object.keys(store.module.raw?.info.roles || {})}>
+        <Show
+          when={serviceModulesQuery.data && store.roles}
+          fallback={<div>Loading...</div>}
+        >
+          <For each={Object.keys(selectedModule()?.info.roles || {})}>
             {(role) => {
               const values = store.roles?.[role] || [];
               return (
@@ -328,20 +250,33 @@ const ConfigureService = () => {
               );
             }}
           </For>
+        </Show>
       </div>
       <div class={cx(styles.footer, styles.backgroundAlt)}>
-        <BackButton ghost hierarchy="primary" class="mr-auto" />
+        <Button
-
+          hierarchy="secondary"
-        <Button hierarchy="secondary" type="submit">
+          type="submit"
-          <Show when={store.action === "create"}>Add Service</Show>
+          loading={!serviceInstancesQuery.data}
-          <Show when={store.action === "update"}>Save Changes</Show>
+        >
+          <Show when={serviceInstancesQuery.data}>
+            {(d) => (
+              <>
+                <Show
+                  when={Object.keys(d()).includes(routerProps.id)}
+                  fallback={"Add Service"}
+                >
+                  Save Changes
+                </Show>
+              </>
+            )}
+          </Show>
         </Button>
       </div>
     </Form>
   );
 };
 
-type TagType =
+export type TagType =
   | {
       value: string;
       label: string;
@@ -362,31 +297,36 @@ const ConfigureRole = () => {
     store.roles?.[store.currentRole || ""] || [],
   );
 
+  const clanUri = useClanURI();
+  const machinesQuery = useMachinesQuery(clanUri);
+
   const lastClickedMachine = useMachineClick();
 
-  createEffect(() => {
+  createEffect(
-    console.log("Current role", store.currentRole, members());
+    on(members, (m) => {
       clearAllHighlights();
       setHighlightGroups({
         [store.currentRole as string]: new Set(
-        members().flatMap((m) => {
+          m.flatMap((m) => {
             if (m.type === "machine") return m.label;
 
             return m.members;
           }),
         ),
       });
+    }),
+  );
 
-    console.log("now", highlightGroups);
+  onMount(() => {
+    setHighlightGroups(() => ({}));
   });
-  onMount(() => setHighlightGroups(() => ({})));
 
   createEffect(
     on(lastClickedMachine, (machine) => {
       // const machine = lastClickedMachine();
       const currentMembers = members();
-      console.log("Clicked machine", machine, currentMembers);
       if (!machine) return;
+
       const machineTagName = "m_" + machine;
 
       const existing = currentMembers.find((m) => m.value === machineTagName);
@@ -403,7 +343,6 @@ const ConfigureRole = () => {
     }),
   );
 
-  const machinesQuery = useMachinesQuery(useClanURI());
   const tagsQuery = useTags(useClanURI());
 
   const options = useOptions(tagsQuery, machinesQuery);
@@ -428,12 +367,7 @@ const ConfigureRole = () => {
             headerClass={cx(styles.backgroundAlt, "flex flex-col gap-2.5")}
             headerChildren={
               <div class="flex w-full gap-2.5">
-                <BackButton
+                <BackButton ghost size="xs" hierarchy="primary" />
-                  ghost
-                  size="xs"
-                  hierarchy="primary"
-                  // onClick={() => clearAllHighlights()}
-                />
                 <Typography
                   hierarchy="body"
                   size="s"
@@ -505,10 +439,6 @@ const ConfigureRole = () => {
 };
 
 const steps = [
-  {
-    id: "select:service",
-    content: SelectService,
-  },
   {
     id: "view:members",
     content: ConfigureService,
@@ -522,79 +452,34 @@ const steps = [
 
 export type ServiceSteps = typeof steps;
 
-// TODO: Ideally we would impot this from a backend model package
-export interface InventoryInstance {
-  name: string;
-  module: {
-    name: string;
-    input?: string | null;
-  };
-  roles: Record<string, RoleType>;
-}
-
-interface RoleType {
-  machines: Record<string, { settings?: unknown }>;
-  tags: Record<string, unknown>;
-}
-
-export interface ServiceStoreType {
-  module: {
-    name: string;
-    input?: string | null;
-    raw?: ModuleItem;
-  };
-  roles: Record<string, TagType[]>;
-  currentRole?: string;
-  close: () => void;
-  handleSubmit: SubmitServiceHandler;
-  action: "create" | "update";
-}
-
-export type SubmitServiceHandler = (
-  values: InventoryInstance,
-  action: "create" | "update",
-) => void | Promise<void>;
-
 interface ServiceWorkflowProps {
   initialStep?: ServiceSteps[number]["id"];
   initialStore?: Partial<ServiceStoreType>;
-  onClose?: () => void;
+  onClose: () => void;
   handleSubmit: SubmitServiceHandler;
-  rootProps?: JSX.HTMLAttributes<HTMLDivElement>;
 }
 
 export const ServiceWorkflow = (props: ServiceWorkflowProps) => {
   const stepper = createStepper(
     { steps },
     {
-      initialStep: props.initialStep || "select:service",
+      initialStep: props.initialStep || "view:members",
       initialStoreData: {
         ...props.initialStore,
-        close: () => props.onClose?.(),
+        close: props.onClose,
         handleSubmit: props.handleSubmit,
       } satisfies Partial<ServiceStoreType>,
     },
   );
+
   createEffect(() => {
     if (stepper.currentStep().id !== "select:members") {
       clearAllHighlights();
     }
   });
 
-  let ref: HTMLDivElement;
-  useClickOutside(
-    () => ref,
-    () => {
-      if (stepper.currentStep().id === "select:service") props.onClose?.();
-    },
-  );
   return (
-    <div
+    <div class="absolute bottom-full left-1/2 mb-2 -translate-x-1/2">
-      ref={(e) => (ref = e)}
-      id="add-service"
-      class="absolute bottom-full left-1/2 mb-2 -translate-x-1/2"
-      {...props.rootProps}
-    >
       <StepperProvider stepper={stepper}>
         <div class="w-[30rem]">{stepper.currentStep().content()}</div>
       </StepperProvider>

pkgs/clan-app/ui/src/workflows/Service/models.ts

@@ -0,0 +1,81 @@
+import {
+  MachinesQuery,
+  ServiceInstancesQuery,
+  ServiceModules,
+} from "@/src/hooks/queries";
+import { TagType } from "./Service";
+
+export interface ServiceStoreType {
+  roles: Record<string, TagType[]>;
+  currentRole?: string;
+  close: () => void;
+  handleSubmit: SubmitServiceHandler;
+  action: "create" | "update";
+}
+
+// TODO: Ideally we would impot this from a backend model package
+export interface InventoryInstance {
+  name: string;
+  module: {
+    name: string;
+    input?: string | null;
+  };
+  roles: Record<string, RoleType>;
+}
+
+export interface RoleType {
+  machines: Record<string, { settings?: unknown }>;
+  tags: Record<string, unknown>;
+}
+
+export type SubmitServiceHandler = (
+  values: InventoryInstance,
+  action: "create" | "update",
+) => void | Promise<void>;
+
+export type ModuleItem = ServiceModules["modules"][number];
+
+export interface Module {
+  value: string;
+  label: string;
+  raw: ModuleItem;
+}
+
+type ValueOf<T> = T[keyof T];
+
+/**
+ * Collect all members (machines and tags) for a given role in a service instance
+ *
+ * TODO: Make this native feature of the API
+ *
+ */
+export function getRoleMembers(
+  instance: ValueOf<NonNullable<ServiceInstancesQuery["data"]>>,
+  all_machines: NonNullable<MachinesQuery["data"]>,
+  role: string,
+) {
+  const tags = Object.keys(instance.roles?.[role].tags || {});
+  const machines = Object.keys(instance.roles?.[role].machines || {});
+
+  const machineTags = machines.map((m) => ({
+    value: "m_" + m,
+    label: m,
+    type: "machine" as const,
+  }));
+  const tagsTags = tags.map((t) => {
+    return {
+      value: "t_" + t,
+      label: t,
+      type: "tag" as const,
+      members: Object.entries(all_machines)
+        .filter(([_, m]) => m.data.tags?.includes(t))
+        .map(([k]) => k),
+    };
+  });
+  console.log("Members for role", role, [...machineTags, ...tagsTags]);
+
+  const roleMembers = [...machineTags, ...tagsTags].sort((a, b) =>
+    a.label.localeCompare(b.label),
+  );
+  return roleMembers;
+}