[OPIK-4987] [FE][BE] feat: integrate Ollie Console sidebar into Opik frontend

apps/opik-backend/config.yml

@@ -792,6 +792,9 @@ serviceToggles:
   # Default: false
   # Description: Whether or not Agent Configuration feature is enabled
   agentConfigurationEnabled: ${TOGGLE_AGENT_CONFIGURATION_ENABLED:-"false"}
+  # Default: false
+  # Description: Whether or not Assistant Sidebar is enabled
+  assistantSidebarEnabled: ${TOGGLE_ASSISTANT_SIDEBAR_ENABLED:-"false"}
 
 # Local Runner configuration
 localRunner:

apps/opik-backend/src/main/java/com/comet/opik/infrastructure/ServiceTogglesConfig.java

@@ -54,4 +54,6 @@ public class ServiceTogglesConfig {
     @NotNull boolean collaboratorsTabEnabled;
     @JsonProperty
     @NotNull boolean agentConfigurationEnabled;
+    @JsonProperty
+    @NotNull boolean assistantSidebarEnabled;
 }

apps/opik-frontend/.env.development

@@ -1,3 +1,4 @@
 VITE_BASE_URL=/
 VITE_BASE_API_URL=/api
-VITE_BASE_OPIK_AI_URL=/opik-ai
+VITE_BASE_OPIK_AI_URL=/opik-ai
+VITE_ASSISTANT_SIDEBAR_URL=http://localhost:3333

apps/opik-frontend/package.json

@@ -15,6 +15,7 @@
   },
   "scripts": {
     "start": "vite",
+    "dev:assistant": "VITE_ASSISTANT_SIDEBAR_ENABLED=true vite",
     "build": "tsc && vite build",
     "serve": "vite preview",
     "test": "vitest",

apps/opik-frontend/src/api/api.ts

@@ -38,6 +38,7 @@ export const PLAYGROUND_EVALUATION_REST_ENDPOINT =
   "/v1/private/playground/evaluations/";
 export const DASHBOARDS_REST_ENDPOINT = "/v1/private/dashboards/";
 export const AGENT_CONFIGS_REST_ENDPOINT = "/v1/private/agent-configs/";
+export const LOCAL_RUNNERS_REST_ENDPOINT = "/v1/private/local-runners/";
 
 export const COMPARE_EXPERIMENTS_KEY = "compare-experiments";
 export const SPANS_KEY = "spans";
@@ -59,6 +60,7 @@ export const TRACE_AI_ASSISTANT_KEY = "trace-analyzer-history";
 export const DASHBOARDS_KEY = "dashboards";
 export const DASHBOARD_KEY = "dashboard";
 export const AGENT_CONFIGS_KEY = "agent-configs";
+export const LOCAL_RUNNERS_KEY = "local-runners";
 
 // stats for feedback
 export const STATS_COMET_ENDPOINT = "https://stats.comet.com/notify/event/";

apps/opik-frontend/src/api/local-runners/useLocalRunnerById.ts

@@ -0,0 +1,47 @@
+import { QueryFunctionContext, useQuery } from "@tanstack/react-query";
+import api, {
+  LOCAL_RUNNERS_REST_ENDPOINT,
+  LOCAL_RUNNERS_KEY,
+} from "@/api/api";
+
+interface LocalRunner {
+  id: string;
+  name: string;
+  project_id: string;
+  status: "pairing" | "connected" | "disconnected";
+  connected_at: string | null;
+  agents: Array<{
+    name: string;
+    description: string;
+  }>;
+}
+
+type UseLocalRunnerByIdParams = {
+  runnerId: string;
+};
+
+const getLocalRunnerById = async (
+  { signal }: QueryFunctionContext,
+  { runnerId }: UseLocalRunnerByIdParams,
+) => {
+  const { data } = await api.get<LocalRunner>(
+    LOCAL_RUNNERS_REST_ENDPOINT + runnerId,
+    { signal },
+  );
+
+  return data;
+};
+
+export default function useLocalRunnerById(
+  params: UseLocalRunnerByIdParams,
+  options?: {
+    enabled?: boolean;
+    refetchInterval?: number | false;
+  },
+) {
+  return useQuery({
+    queryKey: [LOCAL_RUNNERS_KEY, params],
+    queryFn: (context) => getLocalRunnerById(context, params),
+    ...options,
+  });
+}

apps/opik-frontend/src/api/local-runners/useLocalRunnerPairMutation.ts

@@ -0,0 +1,27 @@
+import { useMutation } from "@tanstack/react-query";
+import api, { LOCAL_RUNNERS_REST_ENDPOINT } from "@/api/api";
+
+interface LocalRunnerPairResponse {
+  pairing_code: string;
+  runner_id: string;
+  expires_in_seconds: number;
+}
+
+type UseLocalRunnerPairMutationParams = {
+  projectId: string;
+};
+
+const useLocalRunnerPairMutation = () => {
+  return useMutation({
+    mutationFn: async ({ projectId }: UseLocalRunnerPairMutationParams) => {
+      const { data } = await api.post<LocalRunnerPairResponse>(
+        `${LOCAL_RUNNERS_REST_ENDPOINT}pairs`,
+        { project_id: projectId },
+      );
+
+      return data;
+    },
+  });
+};
+
+export default useLocalRunnerPairMutation;

apps/opik-frontend/src/main.scss

@@ -505,6 +505,22 @@
   body {
     @apply bg-background text-foreground comet-body;
   }
+
+  /* Reset @layer base styles (preflight, border-border, body font/color)
+     at the microfrontend boundary. revert-layer rolls back only this layer,
+     so unlayered ollie.css still applies normally. */
+  .comet-assistant-sidebar-root {
+    font: revert-layer;
+    color: revert-layer;
+    letter-spacing: revert-layer;
+    line-height: revert-layer;
+  }
+
+  .comet-assistant-sidebar-root *,
+  .comet-assistant-sidebar-root *::before,
+  .comet-assistant-sidebar-root *::after {
+    all: revert-layer;
+  }
 }
 
 /* custom classes */
@@ -580,8 +596,11 @@
   }
 
   .comet-content-inset {
-    --comet-content-width: calc(100vw - var(--sidebar-width));
+    --comet-content-width: calc(
+      100vw - var(--sidebar-width) - var(--assistant-sidebar-width, 0px)
+    );
     left: var(--sidebar-width);
+    right: var(--assistant-sidebar-width, 0px);
   }
 
   .comet-table-row-best td {