fix: handle model id with /

packages/frontend/src/App.svelte

@@ -153,7 +153,7 @@ onDestroy(() => {
         </Route>
 
         <Route path="/model/:id/*" let:meta>
-          <Model modelId={meta.params.id} />
+          <Model modelId={decodeURIComponent(meta.params.id)} />
         </Route>
 
         <!-- services -->

packages/frontend/src/lib/table/instructlab/InstructlabColumnModelName.svelte

@@ -8,7 +8,7 @@ export let object: InstructlabSession;
 $: name = $catalog.models.find(r => r.id === object.modelId)?.name;
 
 function openDetails(): void {
-  router.goto(`/model/${object.modelId}`);
+  router.goto(`/model/${encodeURIComponent(object.modelId)}`);
 }
 </script>
 

packages/frontend/src/lib/table/model/ModelColumnName.spec.ts

@@ -85,3 +85,34 @@ test('Expect model info lower bar to be visible', async () => {
   await userEvent.click(modelNameBtn);
   expect(routerMock).toBeCalledWith('/model/my-model');
 });
+
+test('Expect model id to be encoded', async () => {
+  const routerMock = vi.spyOn(router, 'goto');
+  const object: ModelInfo = {
+    id: 'org/my-model',
+    description: '',
+    license: 'apache-2',
+    name: 'My model',
+    registry: 'registry',
+    url: 'url',
+    file: {
+      file: 'file',
+      size: 1000,
+      path: 'path',
+    },
+    memory: 1000,
+  };
+  render(ModelColumnName, { object });
+  const name = screen.getByLabelText('Model Name');
+  expect(name.textContent).equal('My model');
+
+  const info = screen.getByLabelText('Model Info');
+  expect(info.textContent).equal('registry - apache-2');
+
+  const importedInfo = screen.queryByLabelText('Imported Model Info');
+  expect(importedInfo).not.toBeInTheDocument();
+
+  const modelNameBtn = screen.getByRole('button', { name: 'Open Model Details' });
+  await userEvent.click(modelNameBtn);
+  expect(routerMock).toBeCalledWith('/model/org%2Fmy-model');
+});

packages/frontend/src/lib/table/model/ModelColumnName.svelte

@@ -5,7 +5,7 @@ import { router } from 'tinro';
 export let object: ModelInfo;
 
 function openDetails(): void {
-  router.goto(`/model/${object.id}`);
+  router.goto(`/model/${encodeURIComponent(object.id)}`);
 }
 </script>
 

packages/frontend/src/pages/InferenceServerDetails.svelte

@@ -299,7 +299,7 @@ function handleOnChange(): void {
                             class="w-full bg-[var(--pd-label-bg)] text-[var(--pd-label-text)] rounded-md px-2 py-1 flex flex-col gap-y-4">
                             <div class="flex flex-row gap-2 items-center">
                               <div class="grow text-sm" aria-label="Model name">
-                                <a href="/model/{model.id}" class="flex items-center">
+                                <a href="/model/{encodeURIComponent(model.id)}" class="flex items-center">
                                   {model.name}
                                   <Fa class="ml-2" icon={faArrowUpRightFromSquare} />
                                 </a>

packages/frontend/src/pages/Model.svelte

@@ -15,7 +15,7 @@ export function goToUpPage(): void {
 </script>
 
 <DetailsPage
-  title={model?.name ?? ''}
+  title={model?.name ?? modelId}
   breadcrumbLeftPart="Models"
   breadcrumbRightPart={model?.name ?? ''}
   breadcrumbTitle="Go back to Models"