Feat/computer use in chat toggle

.gitignore

@@ -88,3 +88,9 @@ e2e/playwright-report
 e2e/test-results.json
 playwright/.auth
 e2e/playwright/.auth
+
+
+# harnesses
+.omo
+.omp
+.pi

CHANGELOG.md

@@ -4,7 +4,7 @@
 
 ### Chores
 
-* **deps:** bump @iblai/iblai-js to 2.2.7 ([462b98f](https://github.com/iblai/os/commit/462b98fa48202ea7dd1e778382815523037014db))
+- **deps:** bump @iblai/iblai-js to 2.2.7 ([462b98f](https://github.com/iblai/os/commit/462b98fa48202ea7dd1e778382815523037014db))
 
 ## [0.108.11](https://github.com/iblai/os/compare/v0.108.10...v0.108.11) (2026-07-30)
 

app/platform/[tenantKey]/[mentorId]/_components/app-sidebar/chats/chat-row.tsx

@@ -104,6 +104,7 @@ export function ChatRowItem({
   isPinned,
   isLoading,
   canExport = true,
+  awaitingPermission = false,
   onPinToggle,
   onExport,
   onDelete,
@@ -114,6 +115,8 @@ export function ChatRowItem({
   isPinned: boolean;
   isLoading: boolean;
   canExport?: boolean;
+  /** Code is blocked on a permission answer in this chat. */
+  awaitingPermission?: boolean;
   onPinToggle: () => void;
   onExport: () => void;
   onDelete: () => void;
@@ -137,6 +140,19 @@ export function ChatRowItem({
             : 'text-[#4a5568] hover:bg-[#f4f4f4]',
         )}
       >
+        {/* Code's prompts only render in the chat that raised them, so a background
+            chat would otherwise wait unseen and time out as denied after 180s. This is
+            the only signal telling the user where to look — deliberately in the row's
+            own muted grey rather than an accent colour, so it reads as a hint you can
+            find when you look for it, not an alert competing with the chat title. */}
+        {awaitingPermission && (
+          <span
+            data-testid="chat-awaiting-permission"
+            title={t('awaitingPermission')}
+            aria-label={t('awaitingPermission')}
+            className="size-1.5 shrink-0 rounded-full bg-[#9ca3af]"
+          />
+        )}
         <span className="line-clamp-1 min-w-0 flex-1 overflow-hidden">
           {chatRowLabel(row, t('noContent'))}
         </span>

app/platform/[tenantKey]/[mentorId]/_components/app-sidebar/chats/chats-section.tsx

@@ -22,6 +22,7 @@ import {
 
 import { ChatRow, chatRowLabel } from './chat-row-label';
 import { ChatRowItem } from './chat-row';
+import { useCodePermissionSessions } from '@/components/chat/code-permission-card';
 import { useRecentChats } from './use-recent-chats';
 
 const NAV_MUTED = '#5f5f61';
@@ -76,6 +77,10 @@ export function SidebarChatsSection({
     onAfterNav,
   });
 
+  // Chats where Code is blocked on an answer. Its prompts render only in the chat that
+  // raised them, so without this a background chat waits unseen until it times out.
+  const awaitingPermission = useCodePermissionSessions();
+
   // Render helpers -----------------------------------------------------
 
   const renderRow = (row: ChatRow, kind: 'pinned' | 'recent') => (
@@ -87,6 +92,7 @@ export function SidebarChatsSection({
       isPinned={kind === 'pinned'}
       isLoading={actingSessionId === row.session_id}
       canExport={canExport}
+      awaitingPermission={awaitingPermission.has(row.session_id)}
       onPinToggle={() =>
         kind === 'pinned' ? handleUnpin(row) : handlePin(row)
       }

app/platform/[tenantKey]/[mentorId]/_components/nav-bar/__tests__/index.test.tsx

@@ -415,12 +415,34 @@ vi.mock('@/components/modals/auth-modal', () => ({
 }));
 
 let lastCreditBalanceProps: any = null;
+// On-device selection, driven per-test; default OFF so existing tests see the
+// pre-badge nav-bar. One catalog model lets the badge resolve a display name.
+let mockLocalEnabled = false;
+let mockLocalModelId: string | null = null;
 vi.mock('@iblai/iblai-js/web-containers', () => ({
   // The toggle now ships from the SDK; tests don't exercise its internals,
   // so a marker-only stub is enough — it also blocks the SDK's transitive
   // axios chain from being pulled into the test's module graph. The marker
   // lets path-gating tests assert whether the chip is mounted at all.
+
   ChatPrivacyToggle: () => <div data-testid="chat-privacy-toggle" />,
+  // On-device model helpers read by `useSelectedLocalModel` (the top-left
+  // badge). Default to local mode OFF so the nav-bar renders exactly as it did
+  // before the badge existed (cloud selector shown, no badge).
+  isLocalLLMEnabled: () => mockLocalEnabled,
+  getLocalLLMModel: () => mockLocalModelId,
+  // The hook reconciles the tool-support cache against the catalog on read.
+  getLocalLLMToolSupport: () => true,
+  setLocalLLMToolSupport: () => {},
+  LOCAL_MODELS: [
+    {
+      name: 'Llama 3.2',
+      provider: 'Meta',
+      id: 'llama3.2',
+      size: '2.0 GB',
+      tool_support: true,
+    },
+  ],
   NotificationDropdown: () => (
     <div data-testid="notification-dropdown">Notifications</div>
   ),
@@ -583,6 +605,8 @@ describe('NavBar', () => {
     };
     mockAllTenants = [{ key: 'test-tenant' }];
     lastCreditBalanceProps = null;
+    mockLocalEnabled = false;
+    mockLocalModelId = null;
     emitMock.mockClear();
     navigateToHomeMock.mockClear();
     // Suppress console.log during tests
@@ -664,6 +688,51 @@ describe('NavBar', () => {
       expect(screen.getByLabelText('LLM Model Selector')).toBeInTheDocument();
     });
 
+    it('shows the on-device model badge and hides the cloud selector when local mode is on', () => {
+      mockIsAdmin = true;
+      mockUserIsStudent = false;
+      mockPathname = '/platform/tenant123/mentor456';
+      mockLocalEnabled = true;
+      mockLocalModelId = 'llama3.2';
+      const store = createTestStore();
+
+      render(
+        <Provider store={store}>
+          <NavBar />
+        </Provider>,
+      );
+
+      const badge = screen.getByTestId('local-model-indicator');
+      expect(badge).toHaveTextContent('Llama 3.2');
+      expect(badge).toHaveTextContent('On-device');
+      // The on-device badge replaces the cloud model selector while local is on.
+      expect(
+        screen.queryByLabelText('LLM Model Selector'),
+      ).not.toBeInTheDocument();
+    });
+
+    it('opens the model picker when the on-device badge is clicked, so an admin can still choose an LLM while local is on', () => {
+      mockIsAdmin = true;
+      mockUserIsStudent = false;
+      mockPathname = '/platform/tenant123/mentor456';
+      mockLocalEnabled = true;
+      mockLocalModelId = 'llama3.2';
+      const store = createTestStore();
+
+      render(
+        <Provider store={store}>
+          <NavBar />
+        </Provider>,
+      );
+
+      // Picker is closed until the badge is clicked.
+      expect(
+        screen.queryByTestId('llm-provider-modal'),
+      ).not.toBeInTheDocument();
+      fireEvent.click(screen.getByTestId('local-model-indicator'));
+      expect(screen.getByTestId('llm-provider-modal')).toBeInTheDocument();
+    });
+
     it('hides the LLM model selector on the tenant-scoped projects index page', () => {
       mockIsAdmin = true;
       mockUserIsStudent = false;

app/platform/[tenantKey]/[mentorId]/_components/nav-bar/__tests__/user-profile-anonymous.test.tsx

@@ -132,11 +132,19 @@ vi.mock('@iblai/iblai-js/web-utils', () => ({
   },
 }));
 
-// Mock @iblai/iblai-api to provide the enum
+// Mock @iblai/iblai-api to provide the enums. A factory mock replaces the WHOLE
+// module, so every enum reached transitively from the nav-bar import graph must
+// be listed here — `PromptVisibilityEnum` (pulled in via the prompt modals) is
+// read at module scope, so omitting it fails the file at import time.
 vi.mock('@iblai/iblai-api', () => ({
   MentorVisibilityEnum: {
     VIEWABLE_BY_ANYONE: 'VIEWABLE_BY_ANYONE',
   },
+  PromptVisibilityEnum: {
+    VIEWABLE_BY_TENANT_ADMINS: 'viewable_by_tenant_admins',
+    VIEWABLE_BY_TENANT_STUDENTS: 'viewable_by_tenant_students',
+    VIEWABLE_BY_ANYONE: 'viewable_by_anyone',
+  },
   UserApp: {},
 }));
 

app/platform/[tenantKey]/[mentorId]/_components/nav-bar/__tests__/user-profile-non-anonymous.test.tsx

@@ -108,10 +108,19 @@ vi.mock('@iblai/iblai-js/web-utils', () => ({
   },
 }));
 
+// A factory mock replaces the WHOLE module, so every enum reached transitively
+// from the nav-bar import graph must be listed here — `PromptVisibilityEnum`
+// (pulled in via the prompt modals) is read at module scope, so omitting it
+// fails the file at import time.
 vi.mock('@iblai/iblai-api', () => ({
   MentorVisibilityEnum: {
     VIEWABLE_BY_ANYONE: 'VIEWABLE_BY_ANYONE',
   },
+  PromptVisibilityEnum: {
+    VIEWABLE_BY_TENANT_ADMINS: 'viewable_by_tenant_admins',
+    VIEWABLE_BY_TENANT_STUDENTS: 'viewable_by_tenant_students',
+    VIEWABLE_BY_ANYONE: 'viewable_by_anyone',
+  },
   UserApp: {},
 }));
 

app/platform/[tenantKey]/[mentorId]/_components/nav-bar/__tests__/user-profile-tenant-switch.test.tsx

@@ -131,11 +131,19 @@ vi.mock('@iblai/iblai-js/web-utils', () => ({
   },
 }));
 
-// Mock @iblai/iblai-api to provide the enum
+// Mock @iblai/iblai-api to provide the enums. A factory mock replaces the WHOLE
+// module, so every enum reached transitively from the nav-bar import graph must
+// be listed here — `PromptVisibilityEnum` (pulled in via the prompt modals) is
+// read at module scope, so omitting it fails the file at import time.
 vi.mock('@iblai/iblai-api', () => ({
   MentorVisibilityEnum: {
     VIEWABLE_BY_ANYONE: 'VIEWABLE_BY_ANYONE',
   },
+  PromptVisibilityEnum: {
+    VIEWABLE_BY_TENANT_ADMINS: 'viewable_by_tenant_admins',
+    VIEWABLE_BY_TENANT_STUDENTS: 'viewable_by_tenant_students',
+    VIEWABLE_BY_ANYONE: 'viewable_by_anyone',
+  },
   UserApp: {},
 }));