diff --git a/__tests__/components/chat/MessageList.test.tsx b/__tests__/components/chat/MessageList.test.tsx
index a0fea0f..2ae85b4 100644
--- a/__tests__/components/chat/MessageList.test.tsx
+++ b/__tests__/components/chat/MessageList.test.tsx
@@ -4,6 +4,20 @@ import '@testing-library/jest-dom';
 import MessageList from '../../../src/renderer/components/chat/MessageList';
 import type { Message } from '../../../src/renderer/stores/agentStore';
 
+jest.mock('framer-motion', () => {
+  const React = require('react');
+  return {
+    motion: {
+      div: React.forwardRef(
+        (
+          props: React.HTMLAttributes<HTMLDivElement>,
+          ref: React.ForwardedRef<HTMLDivElement>
+        ) => React.createElement('div', { ...props, ref })
+      ),
+    },
+  };
+});
+
 jest.mock('../../../src/renderer/components/chat/MessageBubble', () => {
   return function MockMessageBubble({ message }: { message: Message }) {
     return <div data-testid={`message-${message.id}`}>{message.content}</div>;
@@ -20,6 +34,7 @@ Object.defineProperty(Element.prototype, 'scrollIntoView', {
   writable: true,
 });
 
+
 describe('MessageList', () => {
   const mockMessages: Message[] = [
     {
@@ -39,9 +54,7 @@ describe('MessageList', () => {
   it('should render empty state when no messages', () => {
     render(<MessageList messages={[]} />);
 
-    expect(
-      screen.getByText('Welcome to Conversational Agent')
-    ).toBeInTheDocument();
+    expect(screen.getByText('Welcome to HOL Desktop')).toBeInTheDocument();
     expect(
       screen.getByText(/I can help you with Hedera Hashgraph operations/)
     ).toBeInTheDocument();
@@ -77,21 +90,19 @@ describe('MessageList', () => {
   it('should show loading indicator when isLoading is true', () => {
     render(<MessageList messages={mockMessages} isLoading={true} />);
 
-    expect(screen.getByText('Agent is thinking...')).toBeInTheDocument();
+    expect(screen.getByText('Assistant is thinking...')).toBeInTheDocument();
   });
 
   it('should not show loading indicator when isLoading is false', () => {
     render(<MessageList messages={mockMessages} isLoading={false} />);
 
-    expect(screen.queryByText('Agent is thinking...')).not.toBeInTheDocument();
+    expect(screen.queryByText('Assistant is thinking...')).not.toBeInTheDocument();
   });
 
   it('should not show empty state when messages are present', () => {
     render(<MessageList messages={mockMessages} />);
 
-    expect(
-      screen.queryByText('Welcome to Conversational Agent')
-    ).not.toBeInTheDocument();
+    expect(screen.queryByText('Welcome to HOL Desktop')).not.toBeInTheDocument();
   });
 
   it('should render messages in correct order', () => {
@@ -131,8 +142,18 @@ describe('MessageList', () => {
     render(<MessageList messages={singleMessage} />);
 
     expect(screen.getByTestId('message-msg-1')).toBeInTheDocument();
-    expect(
-      screen.queryByText('Welcome to Conversational Agent')
-    ).not.toBeInTheDocument();
+    expect(screen.queryByText('Welcome to HOL Desktop')).not.toBeInTheDocument();
+  });
+
+  it('should render custom empty state when provided', () => {
+    render(
+      <MessageList
+        messages={[]}
+        emptyState={<div data-testid='custom-empty'>Moonscape Copilot is ready</div>}
+      />
+    );
+
+    expect(screen.getByTestId('custom-empty')).toBeInTheDocument();
+    expect(screen.queryByText('Welcome to HOL Desktop')).not.toBeInTheDocument();
   });
 });
diff --git a/__tests__/components/shell/browser-assistant-panel.test.tsx b/__tests__/components/shell/browser-assistant-panel.test.tsx
new file mode 100644
index 0000000..83005da
--- /dev/null
+++ b/__tests__/components/shell/browser-assistant-panel.test.tsx
@@ -0,0 +1,176 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import BrowserAssistantPanel from '../../../src/renderer/components/shell/BrowserAssistantPanel';
+
+const agentStoreState: Record<string, unknown> = {};
+const configStoreState: Record<string, unknown> = {};
+const notificationStoreState: Record<string, unknown> = {};
+
+jest.mock('framer-motion', () => {
+  const React = require('react');
+const create = (element: string) =>
+    React.forwardRef((props: Record<string, unknown>, ref: React.Ref<HTMLElement>) => {
+      const {
+        whileHover,
+        whileTap,
+        initial,
+        animate,
+        exit,
+        transition,
+        layout,
+        variants,
+        addEventListener,
+        removeEventListener,
+        ...rest
+      } = props;
+      return React.createElement(element, { ...rest, ref }, rest.children);
+    });
+  return {
+    motion: {
+      div: create('div'),
+      button: create('button'),
+      span: create('span'),
+    },
+    AnimatePresence: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  };
+});
+
+jest.mock('../../../src/renderer/lib/utils', () => ({
+  cn: (...classes: unknown[]) => classes.filter(Boolean).join(' '),
+}));
+
+jest.mock('../../../src/renderer/components/chat/headers/AnimatedSuggestions', () => ({
+  __esModule: true,
+  default: ({ onSelect }: { onSelect: (text: string) => void }) => (
+    <button type='button' data-testid='animated-suggestions' onClick={() => onSelect('')} />
+  ),
+}));
+
+jest.mock('framer-motion', () => {
+  const React = require('react');
+  return {
+    motion: {
+      div: React.forwardRef(
+        (
+          props: React.HTMLAttributes<HTMLDivElement>,
+          ref: React.ForwardedRef<HTMLDivElement>
+        ) => React.createElement('div', { ...props, ref })
+      ),
+    },
+  };
+});
+
+jest.mock('react-router-dom', () => ({
+  useNavigate: () => jest.fn(),
+}));
+
+jest.mock('../../../src/renderer/hooks/useAgentInit', () => ({
+  useAgentInit: jest.fn(),
+}));
+
+const fileAttachmentsMock = jest.fn();
+
+jest.mock('../../../src/renderer/hooks/useFileAttachments', () => ({
+  __esModule: true,
+  default: (...args: unknown[]) => fileAttachmentsMock(...args),
+}));
+
+jest.mock('../../../src/renderer/stores/agentStore', () => ({
+  useAgentStore: (selector: (state: Record<string, unknown>) => unknown) => selector(agentStoreState),
+}));
+
+jest.mock('../../../src/renderer/stores/configStore', () => ({
+  useConfigStore: (selector: (state: Record<string, unknown>) => unknown) => selector(configStoreState),
+}));
+
+jest.mock('../../../src/renderer/stores/notificationStore', () => ({
+  useNotificationStore: (selector: (state: Record<string, unknown>) => unknown) => selector(notificationStoreState),
+}));
+
+  Object.defineProperty(window.HTMLElement.prototype, 'scrollIntoView', {
+    configurable: true,
+    value: jest.fn(),
+    writable: true,
+  });
+
+  const mediaQueryList = window.matchMedia('(prefers-reduced-motion: reduce)');
+  if (mediaQueryList) {
+    const prototype = Object.getPrototypeOf(mediaQueryList) as Record<string, unknown>;
+    if (typeof prototype.addEventListener !== 'function') {
+      prototype.addEventListener = jest.fn();
+    }
+    if (typeof prototype.removeEventListener !== 'function') {
+      prototype.removeEventListener = jest.fn();
+    }
+  }
+
+
+describe('BrowserAssistantPanel', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    Object.keys(agentStoreState).forEach((key) => {
+      delete agentStoreState[key];
+    });
+    Object.assign(agentStoreState, {
+      isConnected: true,
+      status: 'connected',
+      connect: jest.fn(),
+      sendMessage: jest.fn(),
+      messages: [],
+      isTyping: false,
+      chatContext: { mode: 'personal' },
+      currentSession: { id: 'session-1', name: 'Session', mode: 'personal' },
+      createSession: jest.fn(),
+      loadSession: jest.fn(),
+    });
+
+    Object.keys(configStoreState).forEach((key) => {
+      delete configStoreState[key];
+    });
+    Object.assign(configStoreState, {
+      config: null,
+      isConfigured: true,
+    });
+
+    Object.keys(notificationStoreState).forEach((key) => {
+      delete notificationStoreState[key];
+    });
+    Object.assign(notificationStoreState, {
+      addNotification: jest.fn(),
+    });
+
+    fileAttachmentsMock.mockReturnValue({
+      files: [],
+      addFiles: jest.fn(),
+      removeFile: jest.fn(),
+      reset: jest.fn(),
+      fileError: null,
+      toBase64: jest.fn(),
+    });
+  });
+
+  it('renders browser-specific empty state copy', () => {
+    render(
+      <BrowserAssistantPanel
+        isOpen
+        sessionId='session-1'
+        hostLabel='hedera.kiloscribe.com'
+        currentUrl='https://hedera.kiloscribe.com'
+        pageTitle='Hedera Docs'
+        onSessionCreated={jest.fn()}
+        fetchPageContext={async () => null}
+        onClose={jest.fn()}
+        dock='right'
+        onDockChange={jest.fn()}
+      />
+    );
+
+    expect(screen.getByText(/Moonscape Copilot/i)).toBeInTheDocument();
+    expect(screen.getByText(/Try asking/i)).toBeInTheDocument();
+    expect(
+      screen.queryByText(/I can help you with Hedera Hashgraph operations/)
+    ).not.toBeInTheDocument();
+  });
+});
diff --git a/__tests__/components/shell/browser-surface.layout.test.tsx b/__tests__/components/shell/browser-surface.layout.test.tsx
new file mode 100644
index 0000000..670deba
--- /dev/null
+++ b/__tests__/components/shell/browser-surface.layout.test.tsx
@@ -0,0 +1,254 @@
+import React from 'react';
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { BrowserSurfaceForTesting } from '../../../src/renderer/components/shell/ShellBrowserWindow';
+import { MemoryRouter } from 'react-router-dom';
+
+jest.mock('framer-motion', () => {
+  const React = require('react');
+const create = (element: string) =>
+    React.forwardRef((props: Record<string, unknown>, ref: React.Ref<HTMLElement>) => {
+      const {
+        whileHover,
+        whileTap,
+        initial,
+        animate,
+        exit,
+        transition,
+        layout,
+        variants,
+        addEventListener,
+        removeEventListener,
+        ...rest
+      } = props;
+      return React.createElement(element, { ...rest, ref }, rest.children);
+    });
+  return {
+    motion: {
+      div: create('div'),
+      button: create('button'),
+      span: create('span'),
+    },
+    AnimatePresence: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  };
+});
+
+jest.mock('../../../src/renderer/lib/utils', () => ({
+  cn: (...classes: unknown[]) => classes.filter(Boolean).join(' '),
+}));
+
+jest.mock('../../../src/renderer/components/chat/headers/AnimatedSuggestions', () => ({
+  __esModule: true,
+  default: ({ onSelect }: { onSelect: (text: string) => void }) => (
+    <button type='button' data-testid='animated-suggestions' onClick={() => onSelect('')} />
+  ),
+}));
+
+jest.mock('../../../src/renderer/components/shell/ShellWindow', () => {
+  const React = require('react');
+  const ShellWindow = ({ children }: { children: React.ReactNode }) => <>{children}</>;
+  return {
+    __esModule: true,
+    ShellWindow,
+    default: ShellWindow,
+    useShellWindowControls: () => ({
+      minimize: jest.fn(),
+      close: jest.fn(),
+      toggleExpand: jest.fn(),
+      isExpanded: false,
+      isMinimized: false,
+    }),
+  };
+});
+
+jest.mock('../../../src/renderer/components/shell/ShellContext', () => ({
+  __esModule: true,
+  SHELL_WINDOWS: {
+    browser: {
+      label: 'Browser',
+      title: 'Browser',
+      icon: () => null,
+    },
+  },
+  useShell: () => ({
+    registerWindow: jest.fn(),
+    unregisterWindow: jest.fn(),
+    minimizeWindow: jest.fn(),
+    restoreWindow: jest.fn(),
+    isWindowMinimized: () => false,
+    setActiveWindow: jest.fn(),
+    getWindowState: () => null,
+    setWindowState: jest.fn(),
+    clearWindowState: jest.fn(),
+    resetWindowMetadata: jest.fn(),
+    setWindowMetadata: jest.fn(),
+    windowMetadata: {
+      browser: {
+        icon: () => null,
+      },
+    },
+  }),
+}));
+
+jest.mock('../../../src/renderer/hooks/useAgentInit', () => ({
+  useAgentInit: jest.fn(),
+}));
+
+const createMockBrowserApi = () => {
+  return {
+    attach: jest.fn().mockResolvedValue(undefined),
+    detach: jest.fn().mockResolvedValue(undefined),
+    setBounds: jest.fn().mockResolvedValue(undefined),
+    getState: jest.fn().mockResolvedValue({
+      requestedUrl: 'https://hedera.kiloscribe.com',
+      currentUrl: 'https://hedera.kiloscribe.com',
+      title: 'KiloScribe',
+      isLoading: false,
+      canGoBack: false,
+      canGoForward: false,
+      lastError: null,
+    }),
+    onState: jest.fn().mockReturnValue(jest.fn()),
+    navigate: jest.fn(),
+    reload: jest.fn(),
+    goBack: jest.fn(),
+    goForward: jest.fn(),
+    executeJavaScript: jest.fn().mockResolvedValue(null),
+  };
+};
+
+const renderBrowserSurface = () => {
+  return render(
+    <MemoryRouter>
+      <BrowserSurfaceForTesting />
+    </MemoryRouter>
+  );
+};
+
+beforeEach(() => {
+  jest.useFakeTimers();
+
+  const browserApi = createMockBrowserApi();
+  (window as unknown as { electron: unknown }).electron = {
+    browser: browserApi,
+    openExternal: jest.fn(),
+  };
+
+  class PointerEventPolyfill extends MouseEvent {
+    constructor(type: string, props?: MouseEventInit) {
+      super(type, props);
+    }
+  }
+
+  (window as unknown as { PointerEvent: typeof MouseEvent }).PointerEvent =
+    PointerEventPolyfill as unknown as typeof MouseEvent;
+
+  class ResizeObserverStub {
+    callback: ResizeObserverCallback;
+
+    constructor(callback: ResizeObserverCallback) {
+      this.callback = callback;
+    }
+
+    observe(): void {}
+
+    disconnect(): void {}
+  }
+
+  (window as unknown as { ResizeObserver: ResizeObserver }).ResizeObserver = ResizeObserverStub as unknown as ResizeObserver;
+
+  if (typeof window.matchMedia !== 'function') {
+    Object.defineProperty(window, 'matchMedia', {
+      configurable: true,
+      writable: true,
+      value: jest.fn().mockImplementation((query: string) => ({
+        matches: false,
+        media: query,
+        addListener: jest.fn(),
+        removeListener: jest.fn(),
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+        dispatchEvent: jest.fn(),
+      })),
+    });
+  }
+
+  const mediaQueryList = window.matchMedia('(prefers-reduced-motion: reduce)');
+  if (mediaQueryList) {
+    const prototype = Object.getPrototypeOf(mediaQueryList) as Record<string, unknown>;
+    if (typeof prototype.addEventListener !== 'function') {
+      prototype.addEventListener = jest.fn();
+    }
+    if (typeof prototype.removeEventListener !== 'function') {
+      prototype.removeEventListener = jest.fn();
+    }
+  }
+});
+
+afterEach(() => {
+  jest.useRealTimers();
+  jest.clearAllTimers();
+});
+
+const openAssistant = async () => {
+  const toggle = screen.getByRole('button', { name: /toggle assistant/i });
+  await act(async () => {
+    fireEvent.click(toggle);
+  });
+
+  await waitFor(() => {
+    expect(screen.getByTestId('assistant-dock')).toBeInTheDocument();
+  });
+};
+
+describe('BrowserSurface layout', () => {
+  it('cycles dock placement using layout controls', async () => {
+    renderBrowserSurface();
+
+    await openAssistant();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('assistant-dock')).toHaveAttribute('data-dock', 'right');
+    });
+
+    const dockBottom = screen.getByRole('button', { name: /dock assistant to bottom/i });
+    fireEvent.click(dockBottom);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('assistant-dock')).toHaveAttribute('data-dock', 'bottom');
+    });
+
+    const dockLeft = screen.getByRole('button', { name: /dock assistant to left/i });
+    fireEvent.click(dockLeft);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('assistant-dock')).toHaveAttribute('data-dock', 'left');
+    });
+  });
+
+  it('resizes assistant panel with drag handle', async () => {
+    renderBrowserSurface();
+    await openAssistant();
+
+    const getWidth = () => {
+      const container = screen.getByTestId('assistant-dock');
+      const value = container.style.width;
+      return value ? parseFloat(value.replace('px', '')) : 0;
+    };
+
+    const resizer = screen.getByTestId('assistant-resizer');
+
+    const initialWidth = getWidth();
+    expect(initialWidth).toBeGreaterThan(0);
+
+    await act(async () => {
+      fireEvent.pointerDown(resizer, { clientX: 100, clientY: 100 });
+      fireEvent.pointerMove(window, { clientX: 60, clientY: 100 });
+      fireEvent.pointerUp(window);
+    });
+
+    await waitFor(() => {
+      expect(getWidth()).toBeGreaterThan(initialWidth);
+    });
+  });
+});
diff --git a/__tests__/components/shell/media-library-retro.test.tsx b/__tests__/components/shell/media-library-retro.test.tsx
new file mode 100644
index 0000000..5aa3290
--- /dev/null
+++ b/__tests__/components/shell/media-library-retro.test.tsx
@@ -0,0 +1,80 @@
+import React from 'react';
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MediaLibrary } from '../../../src/renderer/components/media/MediaLibrary';
+
+const buildJob = (overrides: Partial<Parameters<typeof MediaLibrary>[0]['jobs'][number]> = {}) => ({
+  id: 'job-1',
+  topic: '0.0.1001',
+  imageTopic: '0.0.1001',
+  mimeType: 'image/png',
+  type: 'file',
+  name: 'Retro Badge',
+  createdAt: new Date('2024-01-01T00:00:00.000Z'),
+  ...overrides,
+});
+
+const baseProps = {
+  jobs: [] as ReturnType<typeof buildJob>[],
+  isLoading: false,
+  error: null,
+  hasLoaded: true,
+  network: 'testnet' as const,
+  onRefresh: jest.fn(),
+};
+
+describe('MediaLibrary retro shell refinements', () => {
+  it('anchors the search bar at the leading edge of the toolbar', () => {
+    render(<MediaLibrary {...baseProps} />);
+
+    const search = screen.getByTestId('media-toolbar-search');
+    const viewToggle = screen.getByTestId('media-toolbar-view-toggle');
+
+    expect(search.compareDocumentPosition(viewToggle) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+  });
+
+  it('exposes topic id with copy controls in icon view', () => {
+    const jobs = [buildJob()];
+
+    render(<MediaLibrary {...baseProps} jobs={jobs} />);
+
+    expect(screen.getByText(/Topic ID/i)).toHaveTextContent('Topic ID 0.0.1001');
+    expect(screen.getAllByRole('button', { name: /copy topic id/i }).length).toBeGreaterThan(0);
+  });
+
+  it('surfaces topic column in list view without a date column', async () => {
+    const user = userEvent.setup();
+    const jobs = [buildJob()];
+
+    render(<MediaLibrary {...baseProps} jobs={jobs} />);
+
+    await user.click(screen.getByRole('button', { name: /list view/i }));
+
+    expect(screen.queryByText(/Date Modified/i)).not.toBeInTheDocument();
+    expect(screen.getByTestId('media-list-header-topic')).toHaveTextContent('Topic ID');
+
+    const row = screen.getByTestId('media-list-item-job-1');
+    expect(within(row).getByRole('button', { name: /copy topic id/i })).toBeInTheDocument();
+  });
+
+  it('provides topic details within column view preview', async () => {
+    const user = userEvent.setup();
+    const jobs = [buildJob()];
+
+    render(<MediaLibrary {...baseProps} jobs={jobs} />);
+
+    await user.click(screen.getByRole('button', { name: /columns view/i }));
+
+    const detailRegion = screen.getByTestId('media-column-preview');
+    expect(within(detailRegion).getByText(/Topic ID 0.0.1001/)).toBeInTheDocument();
+    expect(within(detailRegion).getByRole('button', { name: /copy topic id/i })).toBeInTheDocument();
+  });
+
+  it('renders toolbar controls and item counter', () => {
+    render(<MediaLibrary {...baseProps} />);
+
+    expect(screen.getByTestId('media-toolbar-search')).toBeInTheDocument();
+    expect(screen.getByTestId('media-toolbar-view-toggle')).toBeInTheDocument();
+    expect(screen.getAllByText(/items$/i)[0]).toBeInTheDocument();
+  });
+});
diff --git a/__tests__/desktop-hol-shell.test.tsx b/__tests__/desktop-hol-shell.test.tsx
new file mode 100644
index 0000000..d1aa41a
--- /dev/null
+++ b/__tests__/desktop-hol-shell.test.tsx
@@ -0,0 +1,154 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { DesktopShellRouter } from '../src/renderer/components/shell/DesktopShellRouter';
+
+jest.mock('framer-motion', () => {
+  const React = require('react');
+  const MOTION_PROPS = new Set(['initial', 'animate', 'exit', 'transition', 'whileHover', 'whileTap', 'layout']);
+  const createMock = (tag: string) => {
+    const Component = React.forwardRef<HTMLElement, Record<string, unknown>>(({ children, ...rest }, ref) => {
+      const safeProps: Record<string, unknown> = {};
+      Object.entries(rest).forEach(([key, value]) => {
+        if (!MOTION_PROPS.has(key)) {
+          safeProps[key] = value;
+        }
+      });
+      return React.createElement(tag, { ref, ...safeProps }, children);
+    });
+    Component.displayName = `MockMotion(${tag})`;
+    return Component;
+  };
+
+  return {
+    __esModule: true,
+    motion: new Proxy(
+      {},
+      {
+        get: (_target, prop: string) => createMock(prop),
+      }
+    ),
+    AnimatePresence: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  };
+});
+
+jest.mock('../src/renderer/components/shell/BuilderStudioRouter', () => ({
+  __esModule: true,
+  default: () => <div data-testid='builder-studio-window'>Builder Studio</div>,
+}));
+
+jest.mock('../src/renderer/components/shell/ShellTaskbar', () => ({
+  __esModule: true,
+  ShellTaskbar: () => <div data-testid='shell-taskbar'>Taskbar</div>,
+  default: () => <div data-testid='shell-taskbar'>Taskbar</div>,
+}));
+
+jest.mock('../src/renderer/components/brand/SaucerSwapLogo', () => ({
+  __esModule: true,
+  default: () => <div />,
+}));
+
+jest.mock('../src/renderer/components/shell/ShellThemeToggle', () => ({
+  __esModule: true,
+  default: () => <div />,
+}));
+
+jest.mock('../src/renderer/stores/configStore', () => {
+  const mockConfigState = { config: null };
+  const mockUseConfigStore = Object.assign(
+    (selector?: (state: typeof mockConfigState) => unknown) => {
+      if (typeof selector === 'function') {
+        return selector(mockConfigState);
+      }
+      return mockConfigState;
+    },
+    {
+      getState: () => mockConfigState,
+    }
+  );
+
+  return {
+    __esModule: true,
+    useConfigStore: mockUseConfigStore,
+  };
+});
+
+jest.mock('../src/renderer/pages/ChatPage', () => ({
+  __esModule: true,
+  default: () => <div data-testid='chat-window'>Chat Page</div>,
+}));
+
+beforeAll(() => {
+  if (typeof window.matchMedia !== 'function') {
+    Object.defineProperty(window, 'matchMedia', {
+      writable: true,
+      value: () => ({
+        matches: false,
+        media: '',
+        onchange: null,
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+        addListener: jest.fn(),
+        removeListener: jest.fn(),
+        dispatchEvent: jest.fn(),
+      }),
+    });
+  }
+});
+
+const renderShell = (initialEntries: string[]) => {
+  return render(
+    <MemoryRouter initialEntries={initialEntries}>
+      <DesktopShellRouter />
+    </MemoryRouter>
+  );
+};
+
+describe('DesktopShellRouter', () => {
+  it('renders HOL desktop launch icons', () => {
+    renderShell(['/']);
+    expect(screen.getAllByRole('button', { name: /chat agent/i }).length).toBeGreaterThanOrEqual(1);
+    expect(screen.getAllByRole('button', { name: /moonscape/i }).length).toBeGreaterThanOrEqual(1);
+  });
+
+  it('preloads browser webview with default homepage', () => {
+    renderShell(['/browser']);
+    const addressInput = screen.getByRole('textbox', { name: /browser address/i }) as HTMLInputElement;
+    const browserSurface = screen.getByTestId('browser-surface');
+    expect(addressInput.value).toBe('https://hedera.kiloscribe.com');
+    expect(browserSurface).toHaveAttribute('data-current-url', 'https://hedera.kiloscribe.com');
+    expect(screen.getByRole('button', { name: /close browser/i })).toBeInTheDocument();
+  });
+
+  it('updates webview source when a new address is submitted', async () => {
+    renderShell(['/browser']);
+    const addressInput = screen.getByRole('textbox', { name: /browser address/i });
+    fireEvent.change(addressInput, { target: { value: 'example.com' } });
+    expect(screen.getByRole('textbox', { name: /browser address/i })).toHaveValue('example.com');
+    const form = addressInput.closest('form');
+    expect(form).not.toBeNull();
+    if (form) {
+      fireEvent.submit(form);
+    }
+    await waitFor(() => {
+      expect(screen.getByRole('textbox', { name: /browser address/i })).toHaveValue('https://example.com');
+    });
+    await waitFor(() => {
+      expect(screen.getByTestId('browser-surface')).toHaveAttribute('data-current-url', 'https://example.com');
+    });
+  });
+
+  it('closes an open window and returns to desktop', () => {
+    renderShell(['/browser']);
+    fireEvent.click(screen.getByRole('button', { name: /close browser/i }));
+    expect(screen.getAllByRole('button', { name: /chat agent/i }).length).toBeGreaterThanOrEqual(1);
+    expect(screen.queryByRole('button', { name: /close browser/i })).not.toBeInTheDocument();
+  });
+
+  it('renders acknowledgements window without builder sidebar', () => {
+    renderShell(['/acknowledgements']);
+
+    expect(screen.queryByTestId('builder-studio-window')).not.toBeInTheDocument();
+    expect(screen.getByText(/acknowledgements/i)).toBeInTheDocument();
+  });
+});
diff --git a/__tests__/hcs-inscription-select.test.tsx b/__tests__/hcs-inscription-select.test.tsx
new file mode 100644
index 0000000..703afc0
--- /dev/null
+++ b/__tests__/hcs-inscription-select.test.tsx
@@ -0,0 +1,124 @@
+import React from 'react';
+import { act, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { InscriptionSelect } from '../src/renderer/components/hcs10/InscriptionSelect';
+import { useWalletStore } from '../src/renderer/stores/walletStore';
+
+/**
+ * Sample inscription job returned by the Kiloscribe jobs endpoint
+ */
+const mockJobResponse = [
+  {
+    tx_id: '0.0.1234-1717171717-000000001',
+    topic_id: '0.0.5678',
+    mimeType: 'image/png',
+    createdAt: '2024-01-01T00:00:00.000Z',
+    type: 'file',
+    name: 'Profile Icon',
+  },
+];
+
+describe('InscriptionSelect existing inscriptions', () => {
+  const createFetchResponse = () =>
+    ({
+      ok: true,
+      json: async () => mockJobResponse,
+    }) as Response;
+  let fetchSpy: jest.SpyInstance;
+  let createdFetchStub = false;
+
+  beforeEach(() => {
+    if (typeof global.fetch !== 'function') {
+      global.fetch = (jest.fn(() => Promise.resolve(createFetchResponse())) as unknown) as typeof fetch;
+      createdFetchStub = true;
+    }
+
+    fetchSpy = jest.spyOn(global, 'fetch').mockResolvedValue(createFetchResponse());
+
+    act(() => {
+      useWalletStore.setState({
+        isConnected: true,
+        accountId: '0.0.1234',
+        network: 'testnet',
+      });
+    });
+  });
+
+  afterEach(() => {
+    fetchSpy.mockRestore();
+
+    if (createdFetchStub) {
+      delete (global as { fetch?: typeof fetch }).fetch;
+      createdFetchStub = false;
+    }
+
+    act(() => {
+      useWalletStore.setState({
+        isConnected: false,
+        accountId: null,
+        network: 'testnet',
+      });
+    });
+  });
+
+  it('loads previous inscriptions on demand', async () => {
+    const user = userEvent.setup();
+    const handleChange = jest.fn();
+
+    render(
+      <InscriptionSelect
+        onChange={handleChange}
+        introMessage='Intro'
+        warningMessage='Warning'
+        network='testnet'
+        messageEnabled
+      />
+    );
+
+    const loadButton = screen.getByRole('button', {
+      name: /load existing inscriptions/i,
+    });
+    await user.click(loadButton);
+
+    await waitFor(() => {
+      expect(global.fetch).toHaveBeenCalledWith('https://kiloscribe.com/api/jobs', {
+        headers: {
+          'x-account-id': '0.0.1234',
+          'x-type': 'file',
+        },
+        method: 'GET',
+      });
+    });
+
+    expect(
+      await screen.findByText('Profile Icon')
+    ).toBeInTheDocument();
+  });
+
+  it('selects an existing inscription and emits hcs url', async () => {
+    const user = userEvent.setup();
+    const handleChange = jest.fn();
+
+    render(
+      <InscriptionSelect
+        onChange={handleChange}
+        introMessage='Intro'
+        warningMessage='Warning'
+        network='testnet'
+        messageEnabled
+      />
+    );
+
+    const loadButton = screen.getByRole('button', {
+      name: /load existing inscriptions/i,
+    });
+    await user.click(loadButton);
+
+    const selectButton = await screen.findByRole('button', {
+      name: /use profile icon/i,
+    });
+    await user.click(selectButton);
+
+    expect(handleChange).toHaveBeenCalledWith('hcs://1/0.0.5678');
+  });
+});
diff --git a/__tests__/renderer/components/settings/configurationIntegration.test.tsx b/__tests__/renderer/components/settings/configurationIntegration.test.tsx
deleted file mode 100644
index 8c29885..0000000
--- a/__tests__/renderer/components/settings/configurationIntegration.test.tsx
+++ /dev/null
@@ -1,305 +0,0 @@
-;(window as any).electron = {
-  getEnvironmentConfig: jest.fn(() => Promise.resolve({ enableMainnet: false })),
-  testHederaConnection: jest.fn(() => Promise.resolve({ success: true })),
-  testOpenAIConnection: jest.fn(() => Promise.resolve({ success: true })),
-  testAnthropicConnection: jest.fn(() => Promise.resolve({ success: true })),
-  saveConfig: jest.fn(() => Promise.resolve(undefined)),
-  loadConfig: jest.fn(() => Promise.resolve({})),
-  reset: jest.fn(),
-};
-
-import React from 'react';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { MemoryRouter } from 'react-router-dom';
-import SettingsPage from '../../../../src/renderer/pages/SettingsPage';
-import { useConfigStore } from '../../../../src/renderer/stores/configStore';
-import type { ConfigStore } from '../../../../src/renderer/stores/configStore';
-
-jest.mock('../../../../src/renderer/stores/configStore');
-
-describe('Configuration Save/Load Integration', () => {
-  const mockUseConfigStore = useConfigStore as jest.MockedFunction<
-    typeof useConfigStore
-  >;
-
-  const mockStore = {
-    config: {
-      hedera: {
-        accountId: '',
-        privateKey: '',
-        network: 'testnet' as const,
-      },
-      openai: {
-        apiKey: '',
-        model: 'gpt-4' as const,
-      },
-      advanced: {
-        theme: 'light' as const,
-        autoStart: false,
-      },
-    },
-    isLoading: false,
-    error: null,
-    setHederaAccountId: jest.fn(),
-    setHederaPrivateKey: jest.fn(),
-    setHederaNetwork: jest.fn(),
-    setOpenAIApiKey: jest.fn(),
-    setOpenAIModel: jest.fn(),
-    setTheme: jest.fn(),
-    setAutoStart: jest.fn(),
-    saveConfig: jest.fn(),
-    loadConfig: jest.fn(),
-    testHederaConnection: jest.fn(),
-    testOpenAIConnection: jest.fn(),
-    isHederaConfigValid: jest.fn(),
-    isOpenAIConfigValid: jest.fn(),
-    clearError: jest.fn(),
-    setAnthropicApiKey: jest.fn(),
-    setAnthropicModel: jest.fn(),
-    setLLMProvider: jest.fn(),
-    setLogLevel: jest.fn(),
-    setOperationalMode: jest.fn(),
-    setAutonomousMode: jest.fn(),
-    testAnthropicConnection: jest.fn(),
-    isAnthropicConfigValid: jest.fn(),
-    isLLMConfigValid: jest.fn(),
-    isConfigured: jest.fn(),
-  };
-
-  beforeEach(() => {
-    mockUseConfigStore.mockReturnValue(mockStore as ConfigStore);
-
-    window.electron = {
-      saveConfig: jest.fn().mockResolvedValue(undefined),
-      loadConfig: jest.fn().mockResolvedValue({
-        hedera: {
-          accountId: '0.0.54321',
-          privateKey: 'loaded-key',
-          network: 'mainnet' as const,
-        },
-        openai: {
-          apiKey: 'sk-loaded-key',
-          model: 'gpt-3.5-turbo' as const,
-        },
-        advanced: {
-          theme: 'dark' as const,
-          autoStart: true,
-        },
-      }),
-      testHederaConnection: jest.fn().mockResolvedValue({ success: true }),
-      testOpenAIConnection: jest.fn().mockResolvedValue({ success: true }),
-    };
-  });
-
-  it('should load configuration on mount', async () => {
-    render(
-      <MemoryRouter>
-        <SettingsPage />
-      </MemoryRouter>
-    );
-
-    await waitFor(() => {
-      expect(mockStore.loadConfig).toHaveBeenCalled();
-    });
-  });
-
-  it('should auto-save valid configuration changes', async () => {
-    const user = userEvent.setup();
-
-    mockStore.isHederaConfigValid.mockReturnValue(true);
-    mockStore.isOpenAIConfigValid.mockReturnValue(true);
-
-    render(
-      <MemoryRouter>
-        <SettingsPage />
-      </MemoryRouter>
-    );
-
-    const hederaTab = screen.getByText(/hedera/i, { selector: 'button' });
-    fireEvent.click(hederaTab);
-
-    const accountIdInput = screen.getByLabelText(/account id/i);
-    await user.clear(accountIdInput);
-    await user.type(accountIdInput, '0.0.12345');
-
-    await waitFor(() => {
-      expect(mockStore.setHederaAccountId).toHaveBeenCalledWith('0.0.12345');
-    });
-
-    await waitFor(
-      () => {
-        expect(mockStore.saveConfig).toHaveBeenCalled();
-      },
-      { timeout: 3000 }
-    );
-  });
-
-  it('should not auto-save invalid configuration', async () => {
-    const user = userEvent.setup();
-
-    mockStore.isHederaConfigValid.mockReturnValue(false);
-
-    render(
-      <MemoryRouter>
-        <SettingsPage />
-      </MemoryRouter>
-    );
-
-    const hederaTab = screen.getByText(/hedera/i, { selector: 'button' });
-    fireEvent.click(hederaTab);
-
-    const accountIdInput = screen.getByLabelText(/account id/i);
-    await user.type(accountIdInput, 'invalid');
-
-    await waitFor(() => {
-      expect(mockStore.setHederaAccountId).toHaveBeenCalledWith('invalid');
-    });
-
-    await new Promise((resolve) => setTimeout(resolve, 3000));
-
-    expect(mockStore.saveConfig).not.toHaveBeenCalled();
-  });
-
-  it('should display save errors', async () => {
-    mockStore.saveConfig.mockRejectedValue(
-      new Error('Failed to save configuration')
-    );
-    mockStore.error = 'Failed to save configuration';
-
-    render(
-      <MemoryRouter>
-        <SettingsPage />
-      </MemoryRouter>
-    );
-
-    await waitFor(() => {
-      expect(
-        screen.getByText(/failed to save configuration/i)
-      ).toBeInTheDocument();
-    });
-  });
-
-  it('should display load errors', async () => {
-    mockStore.loadConfig.mockRejectedValue(
-      new Error('Failed to load configuration')
-    );
-    mockStore.error = 'Failed to load configuration';
-
-    render(
-      <MemoryRouter>
-        <SettingsPage />
-      </MemoryRouter>
-    );
-
-    await waitFor(() => {
-      expect(
-        screen.getByText(/failed to load configuration/i)
-      ).toBeInTheDocument();
-    });
-  });
-
-  it('should handle configuration migration', async () => {
-    const oldConfig = {
-      hederaAccountId: '0.0.11111',
-      hederaPrivateKey: 'old-key',
-      openaiApiKey: 'sk-old-key',
-    };
-
-    window.electron.loadConfig = jest.fn().mockResolvedValue(oldConfig);
-
-    render(
-      <MemoryRouter>
-        <SettingsPage />
-      </MemoryRouter>
-    );
-
-    await waitFor(() => {
-      expect(mockStore.loadConfig).toHaveBeenCalled();
-    });
-
-    await waitFor(() => {
-      expect(mockStore.saveConfig).toHaveBeenCalled();
-    });
-  });
-
-  it('should validate all fields before enabling save', async () => {
-    const user = userEvent.setup();
-
-    render(
-      <MemoryRouter>
-        <SettingsPage />
-      </MemoryRouter>
-    );
-
-    const saveButton = screen.getByText(/save configuration/i);
-    expect(saveButton).toBeDisabled();
-
-    const hederaTab = screen.getByText(/hedera/i, { selector: 'button' });
-    fireEvent.click(hederaTab);
-
-    const accountIdInput = screen.getByLabelText(/account id/i);
-    const privateKeyInput = screen.getByLabelText(/private key/i);
-
-    await user.type(accountIdInput, '0.0.12345');
-    await user.type(
-      privateKeyInput,
-      '302e020100300506032b657004220420' + '0'.repeat(64)
-    );
-
-    const openaiTab = screen.getByText(/openai/i, { selector: 'button' });
-    fireEvent.click(openaiTab);
-
-    const apiKeyInput = screen.getByLabelText(/api key/i);
-    await user.type(apiKeyInput, 'sk-test-key');
-
-    mockStore.isHederaConfigValid.mockReturnValue(true);
-    mockStore.isOpenAIConfigValid.mockReturnValue(true);
-
-    await waitFor(() => {
-      expect(saveButton).not.toBeDisabled();
-    });
-  });
-
-  it('should reset form to saved values on cancel', async () => {
-    const savedConfig = {
-      hedera: {
-        accountId: '0.0.99999',
-        privateKey: 'saved-key',
-        network: 'mainnet' as const,
-      },
-      openai: {
-        apiKey: 'sk-saved-key',
-        model: 'gpt-4' as const,
-      },
-      advanced: {
-        theme: 'dark' as const,
-        autoStart: true,
-      },
-    };
-
-    mockStore.config = savedConfig;
-
-    render(
-      <MemoryRouter>
-        <SettingsPage />
-      </MemoryRouter>
-    );
-
-    const user = userEvent.setup();
-
-    const hederaTab = screen.getByText(/hedera/i, { selector: 'button' });
-    fireEvent.click(hederaTab);
-
-    const accountIdInput = screen.getByLabelText(/account id/i);
-    await user.clear(accountIdInput);
-    await user.type(accountIdInput, '0.0.12345');
-
-    const cancelButton = screen.getByText(/cancel/i);
-    fireEvent.click(cancelButton);
-
-    await waitFor(() => {
-      expect(mockStore.loadConfig).toHaveBeenCalled();
-    });
-  });
-});
diff --git a/__tests__/renderer/components/shell/browserAssistantComposer.test.tsx b/__tests__/renderer/components/shell/browserAssistantComposer.test.tsx
new file mode 100644
index 0000000..b9f78b8
--- /dev/null
+++ b/__tests__/renderer/components/shell/browserAssistantComposer.test.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { MoonscapeComposer } from '../../../../src/renderer/components/shell/BrowserAssistantPanel';
+
+describe('MoonscapeComposer', () => {
+  const baseProps = {
+    connected: true,
+    submitting: false,
+    fileError: null,
+    files: [] as File[],
+    onChange: () => undefined,
+    onSubmit: () => undefined,
+    onFileAdd: () => undefined,
+    onFileRemove: () => undefined,
+  };
+
+  it('aligns send button with composer input height', () => {
+    render(
+      <MoonscapeComposer
+        {...baseProps}
+        value=''
+      />
+    );
+
+    const textarea = screen.getByPlaceholderText(/ask me about this page/i);
+    const layout = textarea.closest('div')?.parentElement;
+    expect(layout?.className).toContain('items-stretch');
+
+    const sendButton = screen.getByRole('button', { name: /send/i });
+    expect(sendButton.className).toContain('min-h-[44px]');
+    expect(sendButton.className).toContain('self-stretch');
+  });
+});
diff --git a/__tests__/renderer/components/shell/shellHomeLight.test.tsx b/__tests__/renderer/components/shell/shellHomeLight.test.tsx
new file mode 100644
index 0000000..4d9e412
--- /dev/null
+++ b/__tests__/renderer/components/shell/shellHomeLight.test.tsx
@@ -0,0 +1,103 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import ShellHome from '../../../../src/renderer/components/shell/ShellHome';
+
+const mockUseConfigStore = jest.fn();
+
+jest.mock('../../../../src/renderer/stores/configStore', () => ({
+  __esModule: true,
+  useConfigStore: () => mockUseConfigStore(),
+}));
+
+jest.mock('framer-motion', () => {
+  const React = require('react');
+  const MOTION_PROPS = new Set(['initial', 'animate', 'exit', 'transition', 'whileHover', 'whileTap', 'layout']);
+  const createMock = (tag: string) => {
+    const Component = React.forwardRef<HTMLElement, Record<string, unknown>>(({ children, ...rest }, ref) => {
+      const safeProps: Record<string, unknown> = {};
+      Object.entries(rest).forEach(([key, value]) => {
+        if (!MOTION_PROPS.has(key)) {
+          safeProps[key] = value;
+        }
+      });
+      return React.createElement(tag, { ref, ...safeProps }, children);
+    });
+    Component.displayName = `MockMotion(${tag})`;
+    return Component;
+  };
+
+  return {
+    __esModule: true,
+    motion: new Proxy(
+      {},
+      {
+        get: (_target, prop: string) => createMock(prop),
+      }
+    ),
+    AnimatePresence: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  };
+});
+
+jest.mock('../../../../src/renderer/components/shell/useShellNavigation', () => ({
+  useShellNavigation: () => ({ open: jest.fn(), goHome: jest.fn() }),
+}));
+
+describe('ShellHome light theme styling', () => {
+  beforeEach(() => {
+    mockUseConfigStore.mockReturnValue({
+      config: { advanced: { theme: 'light' } },
+    });
+
+    if (typeof window.matchMedia !== 'function') {
+      Object.defineProperty(window, 'matchMedia', {
+        writable: true,
+        value: () => ({
+          matches: false,
+          media: '',
+          onchange: null,
+          addEventListener: jest.fn(),
+          removeEventListener: jest.fn(),
+          addListener: jest.fn(),
+          removeListener: jest.fn(),
+          dispatchEvent: jest.fn(),
+        }),
+      });
+    }
+  });
+
+  afterEach(() => {
+    mockUseConfigStore.mockReset();
+  });
+
+  it('renders light-mode icon styling with accent background and white icon', () => {
+    render(
+      <MemoryRouter initialEntries={['/']}>
+        <Routes>
+          <Route path='/' element={<ShellHome />} />
+        </Routes>
+      </MemoryRouter>
+    );
+
+    const chatButton = screen.getByRole('button', { name: /chat agent/i });
+    const iconContainer = chatButton.querySelector('div');
+    expect(iconContainer?.className).toContain('bg-white');
+    expect(iconContainer?.className).toContain('border-gray-200');
+
+    const svg = chatButton.querySelector('svg');
+    expect(svg?.classList.toString()).toContain('text-blue-500');
+  });
+
+  it('renders mac-style status line in hero', () => {
+    render(
+      <MemoryRouter initialEntries={['/']}>
+        <Routes>
+          <Route path='/' element={<ShellHome />} />
+        </Routes>
+      </MemoryRouter>
+    );
+
+    const statusLine = screen.getByTestId('shell-status-line');
+    expect(statusLine.className).toMatch(/tracking-\[/);
+  });
+});
diff --git a/__tests__/renderer/components/shell/shellLayoutTheme.test.tsx b/__tests__/renderer/components/shell/shellLayoutTheme.test.tsx
new file mode 100644
index 0000000..e30c34a
--- /dev/null
+++ b/__tests__/renderer/components/shell/shellLayoutTheme.test.tsx
@@ -0,0 +1,106 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import ShellLayout from '../../../../src/renderer/components/shell/ShellLayout';
+
+jest.mock('framer-motion', () => {
+  const React = require('react');
+  const MOTION_PROPS = new Set(['initial', 'animate', 'exit', 'transition', 'whileHover', 'whileTap', 'layout']);
+  const createMock = (tag: string) => {
+    const Component = React.forwardRef<HTMLElement, Record<string, unknown>>(({ children, ...rest }, ref) => {
+      const safeProps: Record<string, unknown> = {};
+      Object.entries(rest).forEach(([key, value]) => {
+        if (!MOTION_PROPS.has(key)) {
+          safeProps[key] = value;
+        }
+      });
+      return React.createElement(tag, { ref, ...safeProps }, children);
+    });
+    Component.displayName = `MockMotion(${tag})`;
+    return Component;
+  };
+
+  return {
+    __esModule: true,
+    motion: new Proxy(
+      {},
+      {
+        get: (_target, prop: string) => createMock(prop),
+      }
+    ),
+    AnimatePresence: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  };
+});
+
+const mockUseConfigStore = jest.fn();
+
+jest.mock('../../../../src/renderer/stores/configStore', () => ({
+  __esModule: true,
+  useConfigStore: () => mockUseConfigStore(),
+}));
+
+jest.mock('../../../../src/renderer/components/shell/ShellTaskbar.tsx', () => ({
+  __esModule: true,
+  ShellTaskbar: () => <div data-testid='mock-shell-taskbar'>Taskbar</div>,
+  default: () => <div data-testid='mock-shell-taskbar'>Taskbar</div>,
+}));
+
+jest.mock('../../../../src/renderer/components/shell/WalletDisplay.tsx', () => ({
+  __esModule: true,
+  default: () => <div data-testid='mock-wallet-display'>Wallet</div>,
+}));
+
+jest.mock('../../../../src/renderer/components/shell/ShellThemeToggle.tsx', () => ({
+  __esModule: true,
+  default: () => <button type='button'>toggle</button>,
+}));
+
+jest.mock('../../../../src/renderer/components/ui/Logo.tsx', () => ({
+  __esModule: true,
+  default: () => <div data-testid='mock-logo'>logo</div>,
+}));
+
+jest.mock('../../../../src/renderer/components/shell/ShellContext', () => ({
+  __esModule: true,
+  useShell: () => ({ setActiveWindow: jest.fn() }),
+}));
+
+const renderShellLayout = () => {
+  return render(
+    <MemoryRouter initialEntries={['/']}>
+      <Routes>
+        <Route element={<ShellLayout />}>
+          <Route index element={<div data-testid='shell-layout-content'>content</div>} />
+        </Route>
+      </Routes>
+    </MemoryRouter>
+  );
+};
+
+describe('ShellLayout theme integration', () => {
+  afterEach(() => {
+    mockUseConfigStore.mockReset();
+  });
+
+  it('applies light theme classes when configuration is light', () => {
+    mockUseConfigStore.mockReturnValue({ config: { advanced: { theme: 'light' } } });
+
+    renderShellLayout();
+
+    const root = screen.getByTestId('shell-layout-root');
+    expect(root).toHaveAttribute('data-shell-theme', 'light');
+    expect(root.className).toContain('shell-theme-light');
+    expect(root.className).toContain('from-hol-wallpaper-start');
+  });
+
+  it('applies dark theme classes when configuration is dark', () => {
+    mockUseConfigStore.mockReturnValue({ config: { advanced: { theme: 'dark' } } });
+
+    renderShellLayout();
+
+    const root = screen.getByTestId('shell-layout-root');
+    expect(root).toHaveAttribute('data-shell-theme', 'dark');
+    expect(root.className).toContain('shell-theme-dark');
+    expect(root.className).toContain('dark:from-gray-900');
+  });
+});
diff --git a/__tests__/renderer/components/ui/ApiKeyGuide.test.tsx b/__tests__/renderer/components/ui/ApiKeyGuide.test.tsx
index b7c07cc..58fb437 100644
--- a/__tests__/renderer/components/ui/ApiKeyGuide.test.tsx
+++ b/__tests__/renderer/components/ui/ApiKeyGuide.test.tsx
@@ -37,7 +37,7 @@ Object.defineProperty(navigator, 'clipboard', {
 });
 
 import React from 'react';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { render, screen, fireEvent, waitFor, act } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { ApiKeyGuide } from '../../../../src/renderer/components/ui/ApiKeyGuide';
 
@@ -137,8 +137,8 @@ describe('ApiKeyGuide Component', () => {
     it('renders Anthropic step numbers correctly', () => {
       render(<ApiKeyGuide {...defaultProps} provider="anthropic" />);
 
-      const stepElements = screen.getAllByText(/[1-4]/);
-      expect(stepElements).toHaveLength(4);
+      const stepCircles = document.querySelectorAll('.w-8.h-8.rounded-full');
+      expect(stepCircles).toHaveLength(5);
     });
 
     it('renders Anthropic external links', () => {
@@ -196,13 +196,17 @@ describe('ApiKeyGuide Component', () => {
     });
 
     it('calls clipboard API when copy button is clicked', async () => {
-      const user = userEvent.setup();
       render(<ApiKeyGuide {...defaultProps} />);
 
       const copyButton = screen.getByTestId('copy-icon').closest('button');
+      expect(copyButton).not.toBeNull();
       if (copyButton) {
-        await user.click(copyButton);
-        expect(mockClipboard.writeText).toHaveBeenCalledWith('sk-your-api-key-here');
+        await act(async () => {
+          fireEvent.click(copyButton);
+        });
+        await waitFor(() =>
+          expect(mockClipboard.writeText).toHaveBeenCalledWith('sk-your-api-key-here')
+        );
       }
     });
 
@@ -264,7 +268,7 @@ describe('ApiKeyGuide Component', () => {
     it('renders with proper ARIA attributes', () => {
       render(<ApiKeyGuide {...defaultProps} />);
 
-      const headings = screen.getAllByRole('heading');
+      const headings = screen.getAllByTestId('typography-h6');
       expect(headings.length).toBeGreaterThan(0);
     });
 
@@ -289,18 +293,6 @@ describe('ApiKeyGuide Component', () => {
       }).not.toThrow();
     });
 
-    it('handles clipboard API errors gracefully', async () => {
-      mockClipboard.writeText.mockRejectedValueOnce(new Error('Clipboard not available'));
-
-      const user = userEvent.setup();
-      render(<ApiKeyGuide {...defaultProps} />);
-
-      const copyButton = screen.getByTestId('copy-icon').closest('button');
-      if (copyButton) {
-        await user.click(copyButton);
-        expect(mockClipboard.writeText).toHaveBeenCalled();
-      }
-    });
   });
 
   describe('Content Accuracy', () => {
diff --git a/__tests__/renderer/pages/settings-page.test.tsx b/__tests__/renderer/pages/settings-page.test.tsx
new file mode 100644
index 0000000..3ef48ad
--- /dev/null
+++ b/__tests__/renderer/pages/settings-page.test.tsx
@@ -0,0 +1,249 @@
+;(window as any).electron = {
+  getEnvironmentConfig: jest.fn(() => Promise.resolve({ enableMainnet: false })),
+  testHederaConnection: jest.fn(() => Promise.resolve({ success: true })),
+  testOpenAIConnection: jest.fn(() => Promise.resolve({ success: true })),
+  testAnthropicConnection: jest.fn(() => Promise.resolve({ success: true })),
+  saveConfig: jest.fn(() => Promise.resolve(undefined)),
+  loadConfig: jest.fn(() => Promise.resolve({})),
+  reset: jest.fn(),
+};
+
+import React from 'react';
+import { render, screen, act, fireEvent, waitFor } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import SettingsPage from '../../../src/renderer/pages/SettingsPage';
+import { useConfigStore } from '../../../src/renderer/stores/configStore';
+import type { ConfigStore } from '../../../src/renderer/stores/configStore';
+
+jest.mock('../../../src/renderer/stores/configStore');
+jest.mock('framer-motion', () => {
+  const React = require('react');
+  const MOTION_PROPS = new Set(['initial', 'animate', 'exit', 'transition', 'whileHover', 'whileTap', 'layout']);
+  const createMock = (tag: string) => {
+    const Component = React.forwardRef<HTMLElement, Record<string, unknown>>(({ children, ...rest }, ref) => {
+      const safeProps: Record<string, unknown> = {};
+      Object.entries(rest).forEach(([key, value]) => {
+        if (!MOTION_PROPS.has(key)) {
+          safeProps[key] = value;
+        }
+      });
+      return React.createElement(tag, { ref, ...safeProps }, children);
+    });
+    Component.displayName = `MockMotion(${tag})`;
+    return Component;
+  };
+
+  return {
+    __esModule: true,
+    motion: new Proxy(
+      {},
+      {
+        get: (_target, prop: string) => createMock(prop),
+      }
+    ),
+    AnimatePresence: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  };
+});
+jest.mock('../../../src/renderer/stores/agentStore', () => ({
+  useAgentStore: () => ({
+    isConnected: false,
+    connect: jest.fn(),
+    disconnect: jest.fn(),
+  }),
+}));
+
+describe('SettingsPage', () => {
+  const mockUseConfigStore = useConfigStore as jest.MockedFunction<typeof useConfigStore> & {
+    subscribe?: jest.Mock;
+    getState?: jest.Mock;
+  };
+
+  let mockStore: ConfigStore;
+  let subscribeCallback: ((state: ConfigStore, prevState: ConfigStore) => void) | null;
+
+  beforeEach(() => {
+    jest.useFakeTimers();
+    subscribeCallback = null;
+
+    (window as any).electron = {
+      getEnvironmentConfig: jest.fn(() => Promise.resolve({ enableMainnet: false })),
+      testHederaConnection: jest.fn(() => Promise.resolve({ success: true })),
+      testOpenAIConnection: jest.fn(() => Promise.resolve({ success: true })),
+      testAnthropicConnection: jest.fn(() => Promise.resolve({ success: true })),
+      saveConfig: jest.fn(() => Promise.resolve(undefined)),
+      loadConfig: jest.fn(() => Promise.resolve({})),
+      reset: jest.fn(),
+    };
+
+    mockStore = {
+      config: {
+        hedera: {
+          accountId: '',
+          privateKey: '',
+          network: 'testnet',
+        },
+        openai: {
+          apiKey: '',
+          model: 'gpt-4',
+        },
+        advanced: {
+          theme: 'light',
+          autoStart: false,
+        },
+      },
+      isLoading: false,
+      error: null,
+      setHederaAccountId: jest.fn(),
+      setHederaPrivateKey: jest.fn(),
+      setHederaNetwork: jest.fn(),
+      setOpenAIApiKey: jest.fn(),
+      setOpenAIModel: jest.fn(),
+      setTheme: jest.fn(),
+      setAutoStart: jest.fn(),
+      saveConfig: jest.fn().mockResolvedValue(undefined),
+      loadConfig: jest.fn().mockResolvedValue(undefined),
+      testHederaConnection: jest.fn(),
+      testOpenAIConnection: jest.fn(),
+      isHederaConfigValid: jest.fn().mockReturnValue(true),
+      isOpenAIConfigValid: jest.fn().mockReturnValue(true),
+      clearError: jest.fn(),
+      setAnthropicApiKey: jest.fn(),
+      setAnthropicModel: jest.fn(),
+      setLLMProvider: jest.fn(),
+      setLogLevel: jest.fn(),
+      setOperationalMode: jest.fn(),
+      setAutonomousMode: jest.fn(),
+      testAnthropicConnection: jest.fn(),
+      isAnthropicConfigValid: jest.fn().mockReturnValue(true),
+      isLLMConfigValid: jest.fn().mockReturnValue(true),
+      isConfigured: jest.fn().mockReturnValue(false),
+    } as ConfigStore;
+
+    const subscribeMock = jest.fn(
+      (listener: (state: ConfigStore, prevState: ConfigStore) => void) => {
+        subscribeCallback = listener;
+        return jest.fn();
+      }
+    );
+
+    const getStateMock = jest.fn(() => mockStore);
+
+    mockUseConfigStore.mockReturnValue(mockStore);
+    mockUseConfigStore.subscribe = subscribeMock;
+    mockUseConfigStore.getState = getStateMock;
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+    jest.clearAllMocks();
+  });
+
+  const renderPage = async () => {
+    await act(async () => {
+      render(
+        <MemoryRouter>
+          <SettingsPage />
+        </MemoryRouter>
+      );
+    });
+  };
+
+  it('loads configuration on mount', async () => {
+    await renderPage();
+
+    await waitFor(() => {
+      expect(mockStore.loadConfig).toHaveBeenCalled();
+    });
+  });
+
+  it('auto-saves valid configuration changes after debounce', async () => {
+    await renderPage();
+
+    const nextState = {
+      ...mockStore,
+      config: {
+        ...mockStore.config,
+        hedera: { ...mockStore.config.hedera, accountId: '0.0.12345' },
+      },
+    } as ConfigStore;
+
+    act(() => {
+      subscribeCallback?.(nextState, mockStore);
+    });
+
+    act(() => {
+      jest.runAllTimers();
+    });
+
+    await waitFor(() => {
+      expect(mockStore.saveConfig).toHaveBeenCalled();
+    });
+  });
+
+  it('does not auto-save when configuration is invalid', async () => {
+    mockStore.isHederaConfigValid.mockReturnValue(false);
+    await renderPage();
+
+    const nextState = {
+      ...mockStore,
+      config: {
+        ...mockStore.config,
+        hedera: { ...mockStore.config.hedera, accountId: '0.0.invalid' },
+      },
+    } as ConfigStore;
+
+    act(() => {
+      subscribeCallback?.(nextState, mockStore);
+    });
+
+    act(() => {
+      jest.runAllTimers();
+    });
+
+    expect(mockStore.saveConfig).not.toHaveBeenCalled();
+  });
+
+  it('invokes manual save handler when save button is clicked', async () => {
+    await renderPage();
+
+    const saveButton = await screen.findByRole('button', {
+      name: /save configuration/i,
+    });
+
+    fireEvent.click(saveButton);
+
+    await waitFor(() => {
+      expect(mockStore.saveConfig).toHaveBeenCalled();
+    });
+  });
+
+  it('resets configuration when cancel is clicked after changes', async () => {
+    await renderPage();
+
+    const cancelButton = await screen.findByRole('button', {
+      name: /cancel/i,
+    });
+
+    expect(cancelButton).toBeDisabled();
+
+    const updatedState = {
+      ...mockStore,
+      config: {
+        ...mockStore.config,
+        hedera: { ...mockStore.config.hedera, privateKey: 'updated-key' },
+      },
+    } as ConfigStore;
+
+    act(() => {
+      subscribeCallback?.(updatedState, mockStore);
+    });
+
+    expect(cancelButton).not.toBeDisabled();
+
+    fireEvent.click(cancelButton);
+
+    await waitFor(() => {
+      expect(mockStore.loadConfig).toHaveBeenCalledTimes(2);
+    });
+  });
+});
diff --git a/__tests__/renderer/stores/pluginStore.test.ts b/__tests__/renderer/stores/pluginStore.test.ts
index fcfcf68..ef67847 100644
--- a/__tests__/renderer/stores/pluginStore.test.ts
+++ b/__tests__/renderer/stores/pluginStore.test.ts
@@ -1,14 +1,34 @@
-import { act, renderHook } from '@testing-library/react'
+import { act } from '@testing-library/react'
 import { usePluginStore } from '../../../src/renderer/stores/pluginStore'
 import { mockElectronBridge, factories } from '../../utils/testHelpers'
 
 describe('pluginStore', () => {
   let mockElectron: ReturnType<typeof mockElectronBridge>
 
+  const resetStoreState = () => {
+    usePluginStore.setState({
+      plugins: {},
+      searchResults: [],
+      installProgress: {},
+      updateInfo: {},
+      runtimeContexts: {},
+      isSearching: false,
+      isInstalling: false,
+      isLoading: false,
+      searchQuery: undefined,
+      searchError: undefined,
+      installError: undefined,
+      error: null,
+      initializationState: 'pending',
+      pluginInitStates: {},
+    })
+  }
+
   beforeEach(() => {
     mockElectron = mockElectronBridge()
     window.electron = mockElectron
     jest.clearAllMocks()
+    resetStoreState()
   })
 
   afterEach(() => {
@@ -48,7 +68,7 @@ describe('pluginStore', () => {
       expect(mockElectron.searchPlugins).toHaveBeenCalledWith('test')
       expect(state.searchResults).toEqual(mockResults)
       expect(state.isSearching).toBe(false)
-      expect(state.searchError).toBeNull()
+      expect(state.searchError).toBeUndefined()
       expect(state.searchQuery).toBe('test')
     })
 
@@ -72,20 +92,27 @@ describe('pluginStore', () => {
     })
 
     it('should set loading state during search', async () => {
-      const { result } = renderHook(() => usePluginStore())
-
+      let resolveSearch: ((value: { success: boolean; data: unknown[] }) => void) | undefined
       mockElectron.searchPlugins.mockImplementation(
-        () => new Promise(resolve => setTimeout(() => resolve({ success: true, data: [] }), 100))
+        () =>
+          new Promise(resolve => {
+            resolveSearch = resolve
+          })
       )
 
-      const searchPromise = act(async () => {
-        return result.current.searchPlugins('test')
+      let searchPromise: Promise<void> | undefined
+      await act(async () => {
+        searchPromise = usePluginStore.getState().searchPlugins('test')
+        expect(usePluginStore.getState().isSearching).toBe(true)
       })
 
-      expect(result.current.isSearching).toBe(true)
+      resolveSearch?.({ success: true, data: [] })
 
-      await searchPromise
-      expect(result.current.isSearching).toBe(false)
+      await act(async () => {
+        await searchPromise
+      })
+
+      expect(usePluginStore.getState().isSearching).toBe(false)
     })
   })
 
@@ -110,7 +137,7 @@ describe('pluginStore', () => {
       expect(mockElectron.installPlugin).toHaveBeenCalledWith('test-plugin', undefined)
       expect(state.plugins['test-plugin']).toEqual(mockPlugin)
       expect(state.isInstalling).toBe(false)
-      expect(state.installError).toBeNull()
+      expect(state.installError).toBeUndefined()
     })
 
     it('should handle installation errors', async () => {
@@ -132,61 +159,66 @@ describe('pluginStore', () => {
     })
 
     it('should track installation progress', async () => {
-      const { result } = renderHook(() => usePluginStore())
       const mockPlugin = factories.plugin()
 
+      let resolveInstall: ((value: { success: boolean; data: unknown }) => void) | undefined
       mockElectron.installPlugin.mockImplementation(
-        () => new Promise(resolve => {
-          setTimeout(() => resolve({ success: true, data: mockPlugin }), 100)
-        })
+        () =>
+          new Promise(resolve => {
+            resolveInstall = resolve
+          })
       )
 
-      const installPromise = act(async () => {
-        return result.current.installPlugin('test-plugin')
+      let installPromise: Promise<void> | undefined
+
+      await act(async () => {
+        installPromise = usePluginStore.getState().installPlugin('test-plugin')
+        expect(usePluginStore.getState().isInstalling).toBe(true)
+        expect(Object.keys(usePluginStore.getState().installProgress)).toHaveLength(1)
       })
 
-      expect(result.current.isInstalling).toBe(true)
-      expect(Object.keys(result.current.installProgress)).toHaveLength(1)
+      resolveInstall?.({ success: true, data: mockPlugin })
+
+      await act(async () => {
+        await installPromise
+      })
 
-      await installPromise
-      expect(result.current.isInstalling).toBe(false)
+      expect(usePluginStore.getState().isInstalling).toBe(false)
     })
   })
 
   describe('uninstallPlugin', () => {
     it('should uninstall plugin successfully', async () => {
-      const { result } = renderHook(() => usePluginStore())
       const mockPlugin = factories.plugin({ id: 'test-plugin', enabled: false })
 
-      act(() => {
-        result.current.plugins = { 'test-plugin': mockPlugin }
+      await act(async () => {
+        usePluginStore.setState({ plugins: { 'test-plugin': mockPlugin } })
       })
 
       mockElectron.uninstallPlugin.mockResolvedValue({ success: true })
 
       await act(async () => {
-        await result.current.uninstallPlugin('test-plugin')
+        await usePluginStore.getState().uninstallPlugin('test-plugin')
       })
 
       expect(mockElectron.uninstallPlugin).toHaveBeenCalledWith('test-plugin')
-      expect(result.current.plugins['test-plugin']).toBeUndefined()
-      expect(result.current.isLoading).toBe(false)
-      expect(result.current.error).toBeNull()
+      expect(usePluginStore.getState().plugins['test-plugin']).toBeUndefined()
+      expect(usePluginStore.getState().isLoading).toBe(false)
+      expect(usePluginStore.getState().error).toBeNull()
     })
 
     it('should disable plugin before uninstalling if enabled', async () => {
-      const { result } = renderHook(() => usePluginStore())
       const mockPlugin = factories.plugin({ id: 'test-plugin', enabled: true })
 
-      act(() => {
-        result.current.plugins = { 'test-plugin': mockPlugin }
+      await act(async () => {
+        usePluginStore.setState({ plugins: { 'test-plugin': mockPlugin } })
       })
 
       mockElectron.disablePlugin.mockResolvedValue({ success: true })
       mockElectron.uninstallPlugin.mockResolvedValue({ success: true })
 
       await act(async () => {
-        await result.current.uninstallPlugin('test-plugin')
+        await usePluginStore.getState().uninstallPlugin('test-plugin')
       })
 
       expect(mockElectron.disablePlugin).toHaveBeenCalledWith('test-plugin')
@@ -194,11 +226,10 @@ describe('pluginStore', () => {
     })
 
     it('should handle uninstall errors', async () => {
-      const { result } = renderHook(() => usePluginStore())
       const mockPlugin = factories.plugin({ id: 'test-plugin' })
 
-      act(() => {
-        result.current.plugins = { 'test-plugin': mockPlugin }
+      await act(async () => {
+        usePluginStore.setState({ plugins: { 'test-plugin': mockPlugin } })
       })
 
       mockElectron.uninstallPlugin.mockResolvedValue({
@@ -208,42 +239,39 @@ describe('pluginStore', () => {
 
       await act(async () => {
         try {
-          await result.current.uninstallPlugin('test-plugin')
-        } catch (_error) {
-        }
+          await usePluginStore.getState().uninstallPlugin('test-plugin')
+        } catch (_error) {}
       })
 
-      expect(result.current.isLoading).toBe(false)
-      expect(result.current.error).toBe('Uninstall failed')
+      expect(usePluginStore.getState().isLoading).toBe(false)
+      expect(usePluginStore.getState().error).toBe('Uninstall failed')
     })
   })
 
   describe('enablePlugin', () => {
     it('should enable plugin successfully', async () => {
-      const { result } = renderHook(() => usePluginStore())
       const mockPlugin = factories.plugin({ id: 'test-plugin', enabled: false })
 
-      act(() => {
-        result.current.plugins = { 'test-plugin': mockPlugin }
+      await act(async () => {
+        usePluginStore.setState({ plugins: { 'test-plugin': mockPlugin } })
       })
 
       mockElectron.enablePlugin.mockResolvedValue({ success: true })
 
       await act(async () => {
-        await result.current.enablePlugin('test-plugin')
+        await usePluginStore.getState().enablePlugin('test-plugin')
       })
 
       expect(mockElectron.enablePlugin).toHaveBeenCalledWith('test-plugin')
-      expect(result.current.plugins['test-plugin'].enabled).toBe(true)
-      expect(result.current.plugins['test-plugin'].status).toBe('enabled')
+      expect(usePluginStore.getState().plugins['test-plugin'].enabled).toBe(true)
+      expect(usePluginStore.getState().plugins['test-plugin'].status).toBe('enabled')
     })
 
     it('should handle enable errors', async () => {
-      const { result } = renderHook(() => usePluginStore())
       const mockPlugin = factories.plugin({ id: 'test-plugin', enabled: false })
 
-      act(() => {
-        result.current.plugins = { 'test-plugin': mockPlugin }
+      await act(async () => {
+        usePluginStore.setState({ plugins: { 'test-plugin': mockPlugin } })
       })
 
       mockElectron.enablePlugin.mockResolvedValue({
@@ -253,41 +281,38 @@ describe('pluginStore', () => {
 
       await act(async () => {
         try {
-          await result.current.enablePlugin('test-plugin')
-        } catch (_error) {
-        }
+          await usePluginStore.getState().enablePlugin('test-plugin')
+        } catch (_error) {}
       })
 
-      expect(result.current.plugins['test-plugin'].enabled).toBe(false)
-      expect(result.current.plugins['test-plugin'].status).toBe('disabled')
-      expect(result.current.error).toBe('Enable failed')
+      expect(usePluginStore.getState().plugins['test-plugin'].enabled).toBe(false)
+      expect(usePluginStore.getState().plugins['test-plugin'].status).toBe('disabled')
+      expect(usePluginStore.getState().error).toBe('Enable failed')
     })
   })
 
   describe('disablePlugin', () => {
     it('should disable plugin successfully', async () => {
-      const { result } = renderHook(() => usePluginStore())
       const mockPlugin = factories.plugin({ id: 'test-plugin', enabled: true })
 
-      act(() => {
-        result.current.plugins = { 'test-plugin': mockPlugin }
+      await act(async () => {
+        usePluginStore.setState({ plugins: { 'test-plugin': mockPlugin } })
       })
 
       mockElectron.disablePlugin.mockResolvedValue({ success: true })
 
       await act(async () => {
-        await result.current.disablePlugin('test-plugin')
+        await usePluginStore.getState().disablePlugin('test-plugin')
       })
 
       expect(mockElectron.disablePlugin).toHaveBeenCalledWith('test-plugin')
-      expect(result.current.plugins['test-plugin'].enabled).toBe(false)
-      expect(result.current.plugins['test-plugin'].status).toBe('disabled')
+      expect(usePluginStore.getState().plugins['test-plugin'].enabled).toBe(false)
+      expect(usePluginStore.getState().plugins['test-plugin'].status).toBe('disabled')
     })
   })
 
   describe('utility methods', () => {
     beforeEach(() => {
-      const { result } = renderHook(() => usePluginStore())
       const plugins = {
         'plugin-1': factories.plugin({ id: 'plugin-1', enabled: true, type: 'npm' }),
         'plugin-2': factories.plugin({ id: 'plugin-2', enabled: false, type: 'local' }),
@@ -295,65 +320,60 @@ describe('pluginStore', () => {
       }
 
       act(() => {
-        result.current.plugins = plugins
+        usePluginStore.setState({ plugins })
       })
     })
 
     it('should get plugin by id', () => {
-      const { result } = renderHook(() => usePluginStore())
-      const plugin = result.current.getPluginById('plugin-1')
+      const plugin = usePluginStore.getState().getPluginById('plugin-1')
 
       expect(plugin).toBeDefined()
       expect(plugin?.id).toBe('plugin-1')
     })
 
     it('should get enabled plugins', () => {
-      const { result } = renderHook(() => usePluginStore())
-      const enabledPlugins = result.current.getEnabledPlugins()
+      const enabledPlugins = usePluginStore.getState().getEnabledPlugins()
 
       expect(enabledPlugins).toHaveLength(2)
       expect(enabledPlugins.every(p => p.enabled)).toBe(true)
     })
 
     it('should get plugins by type', () => {
-      const { result } = renderHook(() => usePluginStore())
-      const npmPlugins = result.current.getPluginsByType('npm')
-      const localPlugins = result.current.getPluginsByType('local')
+      const npmPlugins = usePluginStore.getState().getPluginsByType('npm')
+      const localPlugins = usePluginStore.getState().getPluginsByType('local')
 
       expect(npmPlugins).toHaveLength(2)
       expect(localPlugins).toHaveLength(1)
     })
 
     it('should check initialization status', () => {
-      const { result } = renderHook(() => usePluginStore())
-
-      expect(result.current.isInitialized()).toBe(false)
+      expect(usePluginStore.getState().isInitialized()).toBe(false)
 
       act(() => {
-        result.current.initializationState = 'ready'
+        usePluginStore.setState({ initializationState: 'ready' })
       })
 
-      expect(result.current.isInitialized()).toBe(true)
+      expect(usePluginStore.getState().isInitialized()).toBe(true)
     })
   })
 
   describe('clearError', () => {
     it('should clear all error states', () => {
-      const { result } = renderHook(() => usePluginStore())
-
       act(() => {
-        result.current.error = 'General error'
-        result.current.searchError = 'Search error'
-        result.current.installError = 'Install error'
+        usePluginStore.setState({
+          error: 'General error',
+          searchError: 'Search error',
+          installError: 'Install error',
+        })
       })
 
       act(() => {
-        result.current.clearError()
+        usePluginStore.getState().clearError()
       })
 
-      expect(result.current.error).toBeNull()
-      expect(result.current.searchError).toBeNull()
-      expect(result.current.installError).toBeNull()
+      expect(usePluginStore.getState().error).toBeNull()
+      expect(usePluginStore.getState().searchError).toBeUndefined()
+      expect(usePluginStore.getState().installError).toBeUndefined()
     })
   })
-})
\ No newline at end of file
+})
diff --git a/__tests__/renderer/utils/markdownProcessor.test.ts b/__tests__/renderer/utils/markdownProcessor.test.ts
index b0a79ee..37bdf4c 100644
--- a/__tests__/renderer/utils/markdownProcessor.test.ts
+++ b/__tests__/renderer/utils/markdownProcessor.test.ts
@@ -1,355 +1,10 @@
 import { processMarkdown } from '../../../src/renderer/utils/markdownProcessor';
 
-describe('processMarkdown', () => {
-  describe('Math Expressions', () => {
-    test('should process display math expressions with escaped brackets', () => {
-      const input = 'Here is a formula: \\[E = mc^2\\]';
-      const expected = 'Here is a formula: <div class="math-display my-3 p-3 bg-white/10 dark:bg-gray-800/50 rounded-lg overflow-x-auto border border-white/20"><code class="text-sm font-mono text-gray-900 dark:text-gray-100">E = mc^2</code></div>';
-
-      const result = processMarkdown(input);
-      expect(result).toBe(expected);
-    });
-
-    test('should process inline math expressions with escaped parentheses', () => {
-      const input = 'The equation \\(a^2 + b^2 = c^2\\) is Pythagorean';
-      const expected = 'The equation <code class="inline-math px-1.5 py-0.5 bg-white/10 dark:bg-gray-800/50 rounded font-mono text-sm text-gray-900 dark:text-gray-100">a^2 + b^2 = c^2</code> is Pythagorean';
-
-      const result = processMarkdown(input);
-      expect(result).toBe(expected);
-    });
-
-    test('should process double dollar display math', () => {
-      const input = 'Formula: $$\\int_0^\\infty e^{-x^2} dx$$';
-      const expected = 'Formula: <div class="math-display my-3 p-3 bg-white/10 dark:bg-gray-800/50 rounded-lg overflow-x-auto border border-white/20"><code class="text-sm font-mono text-gray-900 dark:text-gray-100">\\int_0^\\infty e^{-x^2} dx</code></div>';
-
-      const result = processMarkdown(input);
-      expect(result).toBe(expected);
-    });
-
-    test('should process single dollar inline math', () => {
-      const input = 'Use $x = 5$ in the equation';
-      const expected = 'Use <code class="inline-math px-1.5 py-0.5 bg-white/10 dark:bg-gray-800/50 rounded font-mono text-sm text-gray-900 dark:text-gray-100">x = 5</code> in the equation';
-
-      const result = processMarkdown(input);
-      expect(result).toBe(expected);
-    });
-
-    test('should handle complex math expressions with text commands', () => {
-      const input = '\\[\\text{Force} = m \\cdot a\\]';
-      const expected = '<div class="math-display my-3 p-3 bg-white/10 dark:bg-gray-800/50 rounded-lg overflow-x-auto border border-white/20"><code class="text-sm font-mono text-gray-900 dark:text-gray-100">Force = m cdot a</code></div>';
-
-      const result = processMarkdown(input);
-      expect(result).toBe(expected);
-    });
-
-    test('should handle math with backslashes and commas', () => {
-      const input = '\\(f(x) = \\frac{1}{x}\\)';
-      const expected = '<code class="inline-math px-1.5 py-0.5 bg-white/10 dark:bg-gray-800/50 rounded font-mono text-sm text-gray-900 dark:text-gray-100">f(x) = frac{1}{x}</code>';
-
-      const result = processMarkdown(input);
-      expect(result).toBe(expected);
-    });
-  });
-
-  describe('Code Blocks', () => {
-    test('should process inline code', () => {
-      const input = 'Use the `console.log()` function';
-      const expected = 'Use the <code class="inline-code px-1.5 py-0.5 bg-gray-100 dark:bg-gray-800 rounded font-mono text-[0.85em]">console.log()</code> function';
-
-      const result = processMarkdown(input);
-      expect(result).toBe(expected);
-    });
-
-    test('should handle code with special characters', () => {
-      const input = 'Type `npm install <package>` in terminal';
-      const expected = 'Type <code class="inline-code px-1.5 py-0.5 bg-gray-100 dark:bg-gray-800 rounded font-mono text-[0.85em]">npm install &lt;package&gt;</code> in terminal';
-
-      const result = processMarkdown(input);
-      expect(result).toBe(expected);
-    });
-
-    test('should handle multiple inline code blocks', () => {
-      const input = 'Use `function()` and `variable` together';
-      const expected = 'Use <code class="inline-code px-1.5 py-0.5 bg-gray-100 dark:bg-gray-800 rounded font-mono text-[0.85em]">function()</code> and <code class="inline-code px-1.5 py-0.5 bg-gray-100 dark:bg-gray-800 rounded font-mono text-[0.85em]">variable</code> together';
-
-      const result = processMarkdown(input);
-      expect(result).toBe(expected);
-    });
-  });
-
-  describe('Text Formatting', () => {
-    test('should process bold text with double asterisks', () => {
-      const input = 'This is **bold** text';
-      const expected = 'This is <strong class="font-semibold">bold</strong> text';
-
-      const result = processMarkdown(input);
-      expect(result).toBe(expected);
-    });
-
-    test('should process bold text with double underscores', () => {
-      const input = 'This is __bold__ text';
-      const expected = 'This is <strong class="font-semibold">bold</strong> text';
-
-      const result = processMarkdown(input);
-      expect(result).toBe(expected);
-    });
-
-    test('should process italic text with single asterisk', () => {
-      const input = 'This is *italic* text';
-      const expected = 'This is <em>italic</em> text';
-
-      const result = processMarkdown(input);
-      expect(result).toBe(expected);
-    });
-
-    test('should process italic text with single underscore', () => {
-      const input = 'This is _italic_ text';
-      const expected = 'This is <em>italic</em> text';
-
-      const result = processMarkdown(input);
-      expect(result).toBe(expected);
-    });
-
-    test('should handle nested formatting', () => {
-      const input = 'This is ***bold italic*** text';
-      const expected = 'This is <em><strong class="font-semibold">bold italic</strong></em> text';
-
-      const result = processMarkdown(input);
-      expect(result).toBe(expected);
-    });
-  });
-
-  describe('Links', () => {
-    test('should process links', () => {
-      const input = 'Visit [Google](https://google.com) for search';
-      const expected = 'Visit <a href="https://google.com" target="_blank" rel="noopener noreferrer" class="underline font-semibold hover:opacity-80">Google</a> for search';
-
-      const result = processMarkdown(input);
-      expect(result).toBe(expected);
-    });
-
-    test('should handle links with underscores in URL', () => {
-      const input = 'Check [documentation](https://example.com/docs_page)';
-      const expected = 'Check <a href="https://example.com/docs_page" target="_blank" rel="noopener noreferrer" class="underline font-semibold hover:opacity-80">documentation</a>';
-
-      const result = processMarkdown(input);
-      expect(result).toBe(expected);
-    });
-
-    test('should handle multiple links', () => {
-      const input = '[Link1](url1) and [Link2](url2)';
-      const expected = '<a href="url1" target="_blank" rel="noopener noreferrer" class="underline font-semibold hover:opacity-80">Link1</a> and <a href="url2" target="_blank" rel="noopener noreferrer" class="underline font-semibold hover:opacity-80">Link2</a>';
-
-      const result = processMarkdown(input);
-      expect(result).toBe(expected);
-    });
-  });
-
-  describe('Headings', () => {
-    test('should process H1 headings', () => {
-      const input = '# Main Title';
-      const expected = '<h1 class="text-2xl font-bold mt-4 mb-2 text-gray-900 dark:text-gray-100">Main Title</h1>';
-
-      const result = processMarkdown(input);
-      expect(result).toBe(expected);
-    });
-
-    test('should process H2 headings', () => {
-      const input = '## Section Title';
-      const expected = '<h2 class="text-xl font-bold mt-4 mb-2 text-gray-900 dark:text-gray-100">Section Title</h2>';
-
-      const result = processMarkdown(input);
-      expect(result).toBe(expected);
-    });
-
-    test('should process H3 headings', () => {
-      const input = '### Subsection Title';
-      const expected = '<h3 class="text-lg font-bold mt-4 mb-2 text-gray-900 dark:text-gray-100">Subsection Title</h3>';
-
-      const result = processMarkdown(input);
-      expect(result).toBe(expected);
-    });
-
-    test('should process H4 headings', () => {
-      const input = '#### Detail Title';
-      const expected = '<h4 class="text-base font-bold mt-3 mb-2 text-gray-900 dark:text-gray-100">Detail Title</h4>';
-
-      const result = processMarkdown(input);
-      expect(result).toBe(expected);
-    });
-
-    test('should process multiple headings', () => {
-      const input = '# Title\n## Subtitle\n### Section';
-      const expected = '<h1 class="text-2xl font-bold mt-4 mb-2 text-gray-900 dark:text-gray-100">Title</h1>\n<h2 class="text-xl font-bold mt-4 mb-2 text-gray-900 dark:text-gray-100">Subtitle</h2>\n<h3 class="text-lg font-bold mt-4 mb-2 text-gray-900 dark:text-gray-100">Section</h3>';
-
-      const result = processMarkdown(input);
-      expect(result).toBe(expected);
-    });
-  });
-
-  describe('Lists', () => {
-    test('should process unordered list with dashes', () => {
-      const input = '- Item 1\n- Item 2\n- Item 3';
-      const expected = '<ul class="my-2 space-y-1 list-disc"><li class="ml-4">Item 1</li><li class="ml-4">Item 2</li><li class="ml-4">Item 3</li></ul>';
-
-      const result = processMarkdown(input);
-      expect(result).toBe(expected);
-    });
-
-    test('should process unordered list with asterisks', () => {
-      const input = '* Item 1\n* Item 2';
-      const expected = '<em> Item 1\n</em> Item 2';
-
-      const result = processMarkdown(input);
-      expect(result).toBe(expected);
-    });
-
-    test('should handle single list item', () => {
-      const input = '- Single item';
-      const expected = '<ul class="my-2 space-y-1 list-disc"><li class="ml-4">Single item</li></ul>';
-
-      const result = processMarkdown(input);
-      expect(result).toBe(expected);
-    });
-  });
-
-  describe('Line Breaks', () => {
-    test('should convert newlines to br tags', () => {
-      const input = 'Line 1\nLine 2\nLine 3';
-      const expected = 'Line 1\nLine 2\nLine 3';
-
-      const result = processMarkdown(input);
-      expect(result).toBe(expected);
-    });
-
-    test('should handle mixed content with line breaks', () => {
-      const input = '# Title\n\nSome text\n\n- Item 1\n- Item 2';
-      const expected = '<h1 class="text-2xl font-bold mt-4 mb-2 text-gray-900 dark:text-gray-100">Title</h1><br /><br />Some text\n<ul class="my-2 space-y-1 list-disc"><li class="ml-4">Item 1</li><li class="ml-4">Item 2</li></ul>';
-
-      const result = processMarkdown(input);
-      expect(result).toBe(expected);
-    });
-  });
-
-  describe('Complex Content', () => {
-    test('should process complex markdown document', () => {
-      const input = `# Document Title
-
-This is a **bold** and *italic* text with \`code\` and [link](url).
-
-## Math Section
-
-Here is inline math $E = mc^2$ and display math:
-
-$$\\int_0^1 x^2 dx$$
-
-## List of Items
-
-- First item
-- Second item with **bold** text
-- Third item
-
-## Code Examples
-
-Use \`npm install\` to install packages.`;
-
-      const result = processMarkdown(input);
-      expect(result).toContain('<h1 class="text-2xl font-bold');
-      expect(result).toContain('<strong class="font-semibold">bold</strong>');
-      expect(result).toContain('<em>italic</em>');
-      expect(result).toContain('<code class="inline-code');
-      expect(result).toContain('<a href="url"');
-      expect(result).toContain('<code class="inline-math');
-      expect(result).toContain('<code class="text-sm font-mono');
-      expect(result).toContain('<ul class="my-2 space-y-1 list-disc">');
-      expect(result).toContain('First item');
-      expect(result).toContain('Second item');
-    });
-
-    test('should handle edge cases', () => {
-      expect(processMarkdown('')).toBe('');
-
-      expect(processMarkdown('   \n  \n  ')).toBe('   \n  \n  ');
-
-      expect(processMarkdown('Plain text without markdown')).toBe('Plain text without markdown');
-    });
-
-    test('should handle nested elements correctly', () => {
-      const input = '**Bold with `code`** and *italic with [link](url)*';
-      const expected = '<strong class="font-semibold">Bold with <code class="inline-code px-1.5 py-0.5 bg-gray-100 dark:bg-gray-800 rounded font-mono text-[0.85em]">code</code></strong> and <em>italic with <a href="url" target="_blank" rel="noopener noreferrer" class="underline font-semibold hover:opacity-80">link</a></em>';
-
-      const result = processMarkdown(input);
-      expect(result).toBe(expected);
-    });
-  });
-
-  describe('Order of Processing', () => {
-    test('should process elements in correct order', () => {
-      const input = '$`code`$';
-      const result = processMarkdown(input);
-
-      expect(result).toContain('<code class="inline-math');
-      expect(result).toContain('<code class="inline-code');
-    });
-
-    test('should handle overlapping patterns correctly', () => {
-      const input = '**Bold** and *italic*';
-      const result = processMarkdown(input);
-
-      expect(result).toContain('<strong class="font-semibold">Bold</strong>');
-      expect(result).toContain('<em>italic</em>');
-    });
-  });
-
-  describe('HTML Escaping', () => {
-    test('should handle HTML-like content in code blocks', () => {
-      const input = 'Use `<div>` in HTML';
-      const expected = 'Use <code class="inline-code px-1.5 py-0.5 bg-gray-100 dark:bg-gray-800 rounded font-mono text-[0.85em]">&lt;div&gt;</code> in HTML';
-
-      const result = processMarkdown(input);
-      expect(result).toBe(expected);
-    });
-
-    test('should preserve special characters in regular text', () => {
-      const input = 'Price: $5 < $10 > $1';
-      const result = processMarkdown(input);
-
-      expect(result).toBe('Price: <code class="inline-math px-1.5 py-0.5 bg-white/10 dark:bg-gray-800/50 rounded font-mono text-sm text-gray-900 dark:text-gray-100">5 < </code>10 > $1');
-    });
-  });
-
-  describe('Performance and Edge Cases', () => {
-    test('should handle large content efficiently', () => {
-      const largeContent = 'Line\n\n'.repeat(500) + '**bold**';
-      const result = processMarkdown(largeContent);
-
-      expect(result).toContain('<strong class="font-semibold">bold</strong>');
-      expect(result.split('<br />').length).toBe(1001); // 500 double newlines create 500 <br /><br /> tags, splitting gives 1001 parts
-    });
-
-    test('should handle empty or malformed patterns', () => {
-      const inputs = [
-        '$$',           // Empty math
-        '``',           // Empty code
-        '**',           // Empty bold
-        '*',            // Single asterisk
-        '[](url)',      // Empty link text
-        '[text]()',     // Empty link URL
-        '#',            // Empty heading
-        '-',            // Empty list item
-      ];
-
-      inputs.forEach(input => {
-        expect(() => processMarkdown(input)).not.toThrow();
-      });
-    });
-
-    test('should be idempotent', () => {
-      const input = '**bold** and `code`';
-      const firstPass = processMarkdown(input);
-      const secondPass = processMarkdown(firstPass);
-
-      expect(secondPass).toBe(firstPass);
-    });
+describe('processMarkdown inline code styling', () => {
+  it('adds brand text classes for inline code in light and dark modes', () => {
+    const html = processMarkdown('`page-context.json`');
+    expect(html).toContain('inline-code');
+    expect(html).toContain('text-brand-ink');
+    expect(html).toContain('dark:text-white');
   });
 });
diff --git a/assets/moonscape-logo.png b/assets/moonscape-logo.png
new file mode 100644
index 0000000..938e1fb
Binary files /dev/null and b/assets/moonscape-logo.png differ
diff --git a/eslint.config.js b/eslint.config.js
index e821a89..2f8c55c 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -3,21 +3,99 @@ import globals from 'globals';
 import reactHooks from 'eslint-plugin-react-hooks';
 import reactRefresh from 'eslint-plugin-react-refresh';
 import tseslint from 'typescript-eslint';
-import { globalIgnores } from 'eslint/config';
 
-export default tseslint.config([
-  globalIgnores(['dist']),
+export default tseslint.config(
   {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      js.configs.recommended,
-      tseslint.configs.recommended,
-      reactHooks.configs['recommended-latest'],
-      reactRefresh.configs.vite,
+    ignores: [
+      'dist/**', 
+      '.vite/**', 
+      'node_modules/**', 
+      '*.config.js', 
+      '*.config.ts', 
+      '*.config.mjs',
+      '*.config.cjs',
+      'out/**',
+      '.yalc/**',
+      '.pnpmfile.cjs',
+      'forge.config.ts',
+      'vite.main.config.ts',
+      'vite.renderer.config.ts',
+      'vite.preload.config.ts'
     ],
+  },
+  js.configs.recommended,
+  ...tseslint.configs.recommended,
+  {
+    files: ['**/__mocks__/**/*.js'],
+    languageOptions: {
+      globals: {
+        ...globals.node,
+        module: 'writable',
+        jest: 'readonly',
+        Buffer: 'readonly',
+      },
+    },
+    rules: {
+      'no-console': 'off',
+    },
+  },
+  {
+    files: ['**/__tests__/**/*.{ts,tsx,js}', '**/*.test.{ts,tsx,js}', '**/*.spec.{ts,tsx,js}'],
+    languageOptions: {
+      globals: {
+        ...globals.jest,
+        ...globals.node,
+      },
+    },
+    rules: {
+      'no-console': 'warn',
+      '@typescript-eslint/no-explicit-any': 'warn',
+      '@typescript-eslint/no-unused-vars': 'warn',
+      '@typescript-eslint/no-require-imports': 'warn',
+      'no-empty': 'warn',
+    },
+  },
+  {
+    files: ['**/*.{ts,tsx}'],
     languageOptions: {
       ecmaVersion: 2020,
-      globals: globals.browser,
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        MAIN_WINDOW_VITE_DEV_SERVER_URL: 'readonly',
+        MAIN_WINDOW_VITE_NAME: 'readonly',
+      },
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+      '@typescript-eslint/no-explicit-any': 'error',
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        {
+          argsIgnorePattern: '^_',
+          varsIgnorePattern: '^_',
+          caughtErrorsIgnorePattern: '^_'
+        }
+      ],
+      '@typescript-eslint/ban-ts-comment': [
+        'error',
+        {
+          'ts-expect-error': 'allow-with-description',
+          'ts-ignore': true,
+          'ts-nocheck': true,
+          'ts-check': false
+        }
+      ],
+      'no-console': 'error',
+      'no-debugger': 'error',
     },
   },
-]);
+);
diff --git a/forge.config.mjs b/forge.config.mjs
index 91e6121..bb3d318 100644
--- a/forge.config.mjs
+++ b/forge.config.mjs
@@ -2,32 +2,116 @@ import { MakerSquirrel } from '@electron-forge/maker-squirrel';
 import { MakerZIP } from '@electron-forge/maker-zip';
 import { MakerDeb } from '@electron-forge/maker-deb';
 import { MakerRpm } from '@electron-forge/maker-rpm';
+import { MakerDMG } from '@electron-forge/maker-dmg';
 import { VitePlugin } from '@electron-forge/plugin-vite';
 import { config } from 'dotenv';
+import { execSync } from 'node:child_process';
+import { cpSync, existsSync, mkdirSync } from 'node:fs';
+import { join, resolve } from 'node:path';
 
-// Load environment variables
 config();
 
+function identityAvailable(id) {
+  if (!id) return false;
+  try {
+    const out = execSync('security find-identity -v -p codesigning', { stdio: ['ignore', 'pipe', 'ignore'] }).toString();
+    return out.includes(id);
+  } catch {
+    return false;
+  }
+}
+
+const envIdentity = process.env.APPLE_SIGNING_IDENTITY || process.env.CSC_NAME;
+const hasSigningIdentity = identityAvailable(envIdentity);
+
 const forgeConfig = {
   packagerConfig: {
+    packageManager: 'pnpm',
+    prune: true,
     name: 'HOL Desktop',
     icon: './assets/hol-dock',
-    appBundleId: 'com.hashgraphonline.conversational-agent',
+    appBundleId: 'com.hashgraphonline.desktop',
     appCategoryType: 'public.app-category.productivity',
     extendInfo: {
       CFBundleName: 'HOL Desktop',
       CFBundleDisplayName: 'HOL Desktop',
       CFBundleShortVersionString: '1.0.0',
     },
-    osxSign: {}, // Empty object to skip code signing
+    osxSign:
+      process.platform === 'darwin' && hasSigningIdentity
+        ? {
+            identity:
+              process.env.APPLE_SIGNING_IDENTITY || process.env.CSC_NAME,
+            hardenedRuntime: true,
+            gatekeeperAssess: false,
+            entitlements: './assets/entitlements.mac.plist',
+            'entitlements-inherit': './assets/entitlements.mac.plist',
+          }
+        : false,
+    osxNotarize:
+      process.platform === 'darwin' && process.env.SKIP_NOTARIZE !== '1' && hasSigningIdentity
+        ? (
+            process.env.NOTARY_KEYCHAIN_PROFILE || process.env.KEYCHAIN_PROFILE
+              ? {
+                  tool: 'notarytool',
+                  keychainProfile:
+                    process.env.NOTARY_KEYCHAIN_PROFILE || process.env.KEYCHAIN_PROFILE,
+                }
+              : process.env.APPLE_API_KEY &&
+                process.env.APPLE_API_ISSUER &&
+                process.env.APPLE_API_KEY_ID
+                ? {
+                    tool: 'notarytool',
+                    appleApiKey: process.env.APPLE_API_KEY,
+                    appleApiKeyId: process.env.APPLE_API_KEY_ID,
+                    appleApiIssuer: process.env.APPLE_API_ISSUER,
+                  }
+                : process.env.APPLE_ID && process.env.APPLE_APP_SPECIFIC_PASSWORD
+                ? {
+                    tool: 'notarytool',
+                    appleId: process.env.APPLE_ID,
+                    appleIdPassword: process.env.APPLE_APP_SPECIFIC_PASSWORD,
+                    teamId: process.env.APPLE_TEAM_ID,
+                  }
+                : undefined
+          )
+        : undefined,
     asar: {
       unpack: '**/*.node',
     },
-    extraResource: [{ from: './src/main/db/migrations', to: 'migrations' }],
+    extraResource: [
+      './src/main/db/migrations'
+    ],
   },
   rebuildConfig: {},
+  hooks: {
+    async packageAfterPrune(config, buildPath, electronVersion) {
+      try {
+        const srcRoot = resolve(process.cwd(), 'node_modules');
+        const destRoot = join(buildPath, 'node_modules');
+        const deps = ['better-sqlite3', 'bindings', 'file-uri-to-path'];
+        if (!existsSync(destRoot)) mkdirSync(destRoot, { recursive: true });
+        for (const dep of deps) {
+          const src = join(srcRoot, dep);
+          const dst = join(destRoot, dep);
+          if (existsSync(src)) {
+            console.log(`[forge.hook] Copying ${dep} -> staging`);
+            cpSync(src, dst, { recursive: true, dereference: true });
+          } else {
+            console.warn(`[forge.hook] Missing ${dep} in project node_modules`);
+          }
+        }
+
+        const cmd = `npx electron-rebuild -m "${buildPath}" -v ${electronVersion} -f -w better-sqlite3`;
+        console.log(`[forge.hook] Rebuilding native modules in staging: ${cmd}`);
+        const env = { ...process.env, HOME: buildPath };
+        execSync(cmd, { stdio: 'inherit', env });
+      } catch (err) {
+        console.warn('[forge.hook] electron-rebuild in staging failed:', err?.message || err);
+      }
+    },
+  },
   makers: [
-    // Windows - Squirrel.Windows installer
     new MakerSquirrel(
       {
         name: 'HashgraphOnline',
@@ -38,9 +122,14 @@ const forgeConfig = {
       },
       ['win32']
     ),
-    // ZIP archives for all platforms (primary for macOS)
     new MakerZIP({}, ['darwin', 'win32', 'linux']),
-    // Linux - RPM package
+    new MakerDMG(
+      {
+        format: 'ULFO',
+        icon: './assets/hol-dock.icns',
+      },
+      ['darwin']
+    ),
     new MakerRpm(
       {
         options: {
@@ -51,7 +140,6 @@ const forgeConfig = {
       },
       ['linux']
     ),
-    // Linux - DEB package
     new MakerDeb(
       {
         options: {
diff --git a/package.json b/package.json
index c68b22a..1445b45 100644
--- a/package.json
+++ b/package.json
@@ -107,13 +107,13 @@
   },
   "dependencies": {
     "@hashgraph/sdk": "2.72.0",
-    "@hashgraphonline/conversational-agent": "^0.2.110",
+    "@hashgraphonline/conversational-agent": "0.2.201",
     "@hashgraphonline/hashinal-wc": "1.0.104",
-    "@hashgraphonline/standards-agent-kit": "^0.2.142",
-    "@hashgraphonline/standards-sdk": "^0.1.106",
+    "@hashgraphonline/standards-agent-kit": "0.2.143",
+    "@hashgraphonline/standards-sdk": "0.1.106",
     "@hookform/resolvers": "^5.2.1",
     "@langchain/anthropic": "^0.3.27",
-    "@modelcontextprotocol/sdk": "^1.17.5",
+    "@modelcontextprotocol/sdk": "^1.18.1",
     "@monaco-editor/react": "^4.7.0",
     "@noble/hashes": "1.8.0",
     "@radix-ui/react-alert-dialog": "^1.1.15",
@@ -137,6 +137,7 @@
     "@walletconnect/types": "^2.21.8",
     "axios": "^1.11.0",
     "better-sqlite3": "12.2.0",
+    "bignumber.js": "9.3.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "dotenv": "^17.2.2",
@@ -166,16 +167,6 @@
     "onlyBuiltDependencies": [
       "electron",
       "better-sqlite3"
-    ],
-    "overrides": {
-      "@hashgraphonline/hashinal-wc": "1.0.104",
-      "@hashgraph/sdk": "2.72.0",
-      "@langchain/core": "^0.3.75",
-      "@langchain/openai": "^0.6.11",
-      "@langchain/anthropic": "^0.3.27",
-      "@langchain/community": "^0.3.11",
-      "langchain": "^0.3.31",
-      "openai": "^5.12.2"
-    }
+    ]
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fd9a922..8b39ce0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -4,16 +4,6 @@ settings:
   autoInstallPeers: true
   excludeLinksFromLockfile: false
 
-overrides:
-  '@hashgraphonline/hashinal-wc': 1.0.104
-  '@hashgraph/sdk': 2.72.0
-  '@langchain/core': ^0.3.75
-  '@langchain/openai': ^0.6.11
-  '@langchain/anthropic': ^0.3.27
-  '@langchain/community': ^0.3.11
-  langchain: ^0.3.31
-  openai: ^5.12.2
-
 pnpmfileChecksum: sha256-A3Gn4pK6R8GrMO4eC8ANcyuRYSCgYLgHvwIo1PptfHU=
 
 importers:
@@ -24,16 +14,16 @@ importers:
         specifier: 2.72.0
         version: 2.72.0(bn.js@5.2.2)(react-native@0.81.1(@babel/core@7.28.4)(@types/react@19.1.12)(react@19.1.1))
       '@hashgraphonline/conversational-agent':
-        specifier: ^0.2.109
-        version: 0.2.110(7e1d97fc4c7e5d8732d49985f6a3ca08)
+        specifier: 0.2.201
+        version: 0.2.201(7e1d97fc4c7e5d8732d49985f6a3ca08)
       '@hashgraphonline/hashinal-wc':
         specifier: 1.0.104
         version: 1.0.104(@types/react@19.1.12)(@walletconnect/types@2.21.8(ioredis@5.7.0))(@walletconnect/web3wallet@1.16.1(encoding@0.1.13)(ioredis@5.7.0)(typescript@5.9.2)(zod@3.25.76))(bn.js@5.2.2)(ioredis@5.7.0)(react-native@0.81.1(@babel/core@7.28.4)(@types/react@19.1.12)(react@19.1.1))(react@19.1.1)(typescript@5.9.2)(zod@3.25.76)
       '@hashgraphonline/standards-agent-kit':
-        specifier: ^0.2.142
-        version: 0.2.142(1aa68b4fdbc3cb28ab68251510f6f980)
+        specifier: 0.2.143
+        version: 0.2.143(1aa68b4fdbc3cb28ab68251510f6f980)
       '@hashgraphonline/standards-sdk':
-        specifier: ^0.1.106
+        specifier: 0.1.106
         version: 0.1.106(@types/react@19.1.12)(@walletconnect/qrcode-modal@1.8.0)(@walletconnect/types@2.21.8(ioredis@5.7.0))(@walletconnect/utils@2.21.8(ioredis@5.7.0)(typescript@5.9.2)(zod@3.25.76))(@walletconnect/web3wallet@1.16.1(encoding@0.1.13)(ioredis@5.7.0)(typescript@5.9.2)(zod@3.25.76))(bn.js@5.2.2)(react-native@0.81.1(@babel/core@7.28.4)(@types/react@19.1.12)(react@19.1.1))(react@19.1.1)(typescript@5.9.2)
       '@hookform/resolvers':
         specifier: ^5.2.1
@@ -42,8 +32,8 @@ importers:
         specifier: ^0.3.27
         version: 0.3.27(@langchain/core@0.3.75(openai@5.20.0(ws@8.18.2)(zod@3.25.76)))
       '@modelcontextprotocol/sdk':
-        specifier: ^1.17.5
-        version: 1.17.5
+        specifier: ^1.18.1
+        version: 1.18.1
       '@monaco-editor/react':
         specifier: ^4.7.0
         version: 4.7.0(monaco-editor@0.52.2)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
@@ -113,6 +103,9 @@ importers:
       better-sqlite3:
         specifier: 12.2.0
         version: 12.2.0
+      bignumber.js:
+        specifier: 9.3.1
+        version: 9.3.1
       class-variance-authority:
         specifier: ^0.7.1
         version: 0.7.1
@@ -676,7 +669,7 @@ packages:
       '@playwright/test': ^1.42.1
       deepmerge: ^4.3.1
       dotenv: ^16.4.5
-      openai: ^5.12.2
+      openai: ^4.62.1
       zod: ^3.23.8
 
   '@cbor-extract/cbor-extract-darwin-arm64@2.2.0':
@@ -1339,32 +1332,41 @@ packages:
   '@hashgraph/hedera-wallet-connect@1.5.1':
     resolution: {integrity: sha512-mIEoAXxq5k5ImsBD0R1ayIQK9ty7sGQyQyhPThTX6rD4VOmM6WQciJbhQ6bEYzWkvT9b/bTaYB4WRjp5iPUduQ==}
     peerDependencies:
-      '@hashgraph/sdk': 2.72.0
+      '@hashgraph/sdk': ^2.61.0
       '@walletconnect/qrcode-modal': ^1.8.0
       '@walletconnect/types': ^2.19.1
       '@walletconnect/utils': ^2.19.1
       '@walletconnect/web3wallet': ^1.16.0
 
+  '@hashgraph/proto@2.20.0':
+    resolution: {integrity: sha512-XGIHRE9jr4wnnmCG8JeUD/nyeCiiYoUt35oRJz0QdCUwJYtbEsR6tPQxO90PxJJVDI5smT1c5i0f9wRRtFDhIA==}
+    engines: {node: '>=10.0.0'}
+
   '@hashgraph/proto@2.22.0':
     resolution: {integrity: sha512-+h2qqk+KwpV+rr1AN4ip1Gel3X4v0DvFO9WH7o0ZR3gQX9pfzurptKGs30DlBnH21xPqDH61v90bZvVknE27NA==}
     engines: {node: '>=10.0.0'}
 
+  '@hashgraph/sdk@2.69.0':
+    resolution: {integrity: sha512-jU7t7j0G9eFXsrQ183NkbvsuZGHiK+XvWRTJHKdfi/m9FE69Tu/r9hP2+BZk2lskRAiTXBb7haVo4iSnLPPzAQ==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      bn.js: ^5.2.1
+
   '@hashgraph/sdk@2.72.0':
     resolution: {integrity: sha512-w35M77OAkJutENG4CldUGzfT+qubDjEYCQR5Ran75uHB+SLeCodR87AXWJ3ocr5vPaZ7lsflBXEYZLhgCi1G2g==}
     engines: {node: '>=18.0.0'}
     peerDependencies:
       bn.js: ^5.2.1
 
-  '@hashgraphonline/conversational-agent@0.2.110':
-    resolution: {integrity: sha512-BXYxVSikbZpi2c1GbIhlfoVaFzkZmdyyJwCKIBRHrzm5RnpwKCjIEqF84xZd/U5Bd+sDjTBvv5p8kveUL/TVig==}
+  '@hashgraphonline/conversational-agent@0.2.201':
+    resolution: {integrity: sha512-OJ34cKYHrfYjLg7s5mrgee0EUHjsohMzI6QvnCSyWIlHXqtWF09TThTBqRR5TXUMasSrPgB/v3SqEIbeqxRMHA==}
     hasBin: true
 
   '@hashgraphonline/hashinal-wc@1.0.104':
     resolution: {integrity: sha512-/LSXnABjTzuCKHdEhoY7fmY9ByxeHExzZpUN3mBvACMC8RQ9KELFP1eFANiBrMT2CvT0GGdxWelAfpgbbjkwkg==}
 
-  '@hashgraphonline/standards-agent-kit@0.2.142':
-    resolution: {integrity: sha512-dq2voWocONF0EsIu+e620g5fjZbzDm+dN63fAYPWXLfXWY+65XF57iEpdcfJ1UyUDg0ylHMrxblzdoV/RPjDNg==}
-    engines: {node: '>=18.0.0'}
+  '@hashgraphonline/hashinal-wc@1.0.106':
+    resolution: {integrity: sha512-hLqVPFbUXlq8XgXPezAnby0ylmXDqguw+BkvzeXa1WUzkPe+gKadv3ZtLBpJR1oSl7ycPIbZjUXioWdaxWk2cw==}
 
   '@hashgraphonline/standards-agent-kit@0.2.143':
     resolution: {integrity: sha512-RnWYMnTJyOZaoCMZqPoAfMVy9rkC6XmLSCTUsmrw5TwHpfCFyz73Z1M0g7qTUiR/k3E61Ka1K22QxmFvsHAfPg==}
@@ -1376,9 +1378,6 @@ packages:
   '@hashgraphonline/standards-sdk@0.0.188':
     resolution: {integrity: sha512-sZFGxlVH5iSGuaFT3c3z1hUi2+2EJhKUWJfLSyrSYIcMlAF9mtp4oZjSprPZZE5wacHvfn3mCCgafCR9nONHYQ==}
 
-  '@hashgraphonline/standards-sdk@0.0.192':
-    resolution: {integrity: sha512-fmAS/oqs9Vhk/61PDn6QlfhqYONJG4c5ANkbgUqdXAGGuMowApAzmkPz0AIjca5csGXOL5DyQ24xVqgty1QvHQ==}
-
   '@hashgraphonline/standards-sdk@0.1.106':
     resolution: {integrity: sha512-MM9uMn/EWUjkaXdpLTROs2P2PgcFK5TDJtvBWs9nkIBfbt8O3G4cohHo9tDrUtjG1+EDGTwf4ab8iwNsB7Cldw==}
 
@@ -1439,10 +1438,6 @@ packages:
     peerDependencies:
       react-hook-form: ^7.55.0
 
-  '@hsuite/did-sdk-js@1.0.4':
-    resolution: {integrity: sha512-dkJ0mtUo1SAo6+4cAY0AE6CaKrZzNZz2rHviUL6UENQLYU3S5IDRoNSo/X9RNNDyyl79YB4PwkB6ksUufCQcmA==}
-    engines: {node: '>=16.13.1', npm: '>=8.1.2'}
-
   '@huggingface/jinja@0.1.3':
     resolution: {integrity: sha512-9KsiorsdIK8+7VmlamAT7Uh90zxAhC/SeKaKc80v58JhtPYuwaJpmR/ST7XAUxrHAFqHTCoTH5aJnJDwSL6xIQ==}
     engines: {node: '>=18'}
@@ -1643,7 +1638,13 @@ packages:
     resolution: {integrity: sha512-d4YUwZRjUGAMHTrv7U1jKqsvDrmns9/Ua2I/8BUPbCEBTswowGZUb0Om1KcjXG7MqehrJ03Gd78plckQ8Q7qfw==}
     engines: {node: '>=18'}
     peerDependencies:
-      '@langchain/core': ^0.3.75
+      '@langchain/core': '>=0.3.58 <0.4.0'
+
+  '@langchain/anthropic@0.3.28':
+    resolution: {integrity: sha512-07rH3MB99XHSBENF2d+RZsaD0ZBJqtTEQZAIePrUu4a8YsMzGhiYIMN0ufNvR0xSLOAccN20dkrrIbdvBWwd5w==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@langchain/core': '>=0.3.58 <0.4.0'
 
   '@langchain/community@0.3.55':
     resolution: {integrity: sha512-vCBM59gYfsRxB+OCD2ot/6Hb5/uKHipGKDxP6Jq3PCB/hUR6crvPi0nxb1bi+DJub6FpZUmSnwj7YV240ObaaQ==}
@@ -1681,7 +1682,7 @@ packages:
       '@huggingface/transformers': ^3.5.2
       '@ibm-cloud/watsonx-ai': '*'
       '@lancedb/lancedb': ^0.12.0
-      '@langchain/core': ^0.3.75
+      '@langchain/core': '>=0.3.58 <0.4.0'
       '@layerup/layerup-security': ^1.5.12
       '@libsql/client': ^0.14.0
       '@mendable/firecrawl-js': ^1.4.3
@@ -1756,7 +1757,7 @@ packages:
       neo4j-driver: '*'
       notion-to-md: ^3.1.0
       officeparser: ^4.0.4
-      openai: ^5.12.2
+      openai: '*'
       pdf-parse: 1.1.1
       pg: ^8.11.0
       pg-copy-streams: ^6.0.5
@@ -2032,16 +2033,20 @@ packages:
     resolution: {integrity: sha512-kTyBS0DTeD0JYa9YH5lg6UdDbHmvplk3t9PCjP5jDQZCK5kPe2aDFToqdiCaLzZg8RzzM+clXLVyJtPTE8bZ2Q==}
     engines: {node: '>=18'}
 
+  '@langchain/core@0.3.77':
+    resolution: {integrity: sha512-aqXHea9xfpVn6VoCq9pjujwFqrh3vw3Fgm9KFUZJ1cF7Bx5HI62DvQPw8LlRB3NB4dhwBBA1ldAVkkkd1du8nA==}
+    engines: {node: '>=18'}
+
   '@langchain/langgraph-checkpoint@0.0.18':
     resolution: {integrity: sha512-IS7zJj36VgY+4pf8ZjsVuUWef7oTwt1y9ylvwu0aLuOn1d0fg05Om9DLm3v2GZ2Df6bhLV1kfWAM0IAl9O5rQQ==}
     engines: {node: '>=18'}
     peerDependencies:
-      '@langchain/core': ^0.3.75
+      '@langchain/core': '>=0.2.31 <0.4.0'
 
   '@langchain/langgraph-sdk@0.0.112':
     resolution: {integrity: sha512-/9W5HSWCqYgwma6EoOspL4BGYxGxeJP6lIquPSF4FA0JlKopaUv58ucZC3vAgdJyCgg6sorCIV/qg7SGpEcCLw==}
     peerDependencies:
-      '@langchain/core': ^0.3.75
+      '@langchain/core': '>=0.2.31 <0.4.0'
       react: ^18 || ^19
       react-dom: ^18 || ^19
     peerDependenciesMeta:
@@ -2056,29 +2061,41 @@ packages:
     resolution: {integrity: sha512-4jKvfmxxgQyKnCvXdFbcKt6MdfaJoQ2WWqBR16o2E6D2RxqHvnLMMClZh4FSd6WYw39z5LGWvzRapFbRMqxu1A==}
     engines: {node: '>=18'}
     peerDependencies:
-      '@langchain/core': ^0.3.75
+      '@langchain/core': '>=0.3.58 < 0.4.0'
       zod-to-json-schema: ^3.x
     peerDependenciesMeta:
       zod-to-json-schema:
         optional: true
 
+  '@langchain/openai@0.5.18':
+    resolution: {integrity: sha512-CX1kOTbT5xVFNdtLjnM0GIYNf+P7oMSu+dGCFxxWRa3dZwWiuyuBXCm+dToUGxDLnsHuV1bKBtIzrY1mLq/A1Q==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@langchain/core': '>=0.3.58 <0.4.0'
+
   '@langchain/openai@0.6.11':
     resolution: {integrity: sha512-BkaudQTLsmdt9mF6tn6CrsK2TEFKk4EhAWYkouGTy/ljJIH/p2Nz9awIOGdrQiQt6AJ5mvKGupyVqy3W/jim2Q==}
     engines: {node: '>=18'}
     peerDependencies:
-      '@langchain/core': ^0.3.75
+      '@langchain/core': '>=0.3.68 <0.4.0'
+
+  '@langchain/openai@0.6.13':
+    resolution: {integrity: sha512-+QCVag3J2MeFxLMPjjYYpDCBKbmrK7D/xQGq+iWBGpNSg/08vnx7pEkkhiL2NTFIHiYu7w/7EG3UHQ8gOK/cag==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@langchain/core': '>=0.3.68 <0.4.0'
 
   '@langchain/textsplitters@0.1.0':
     resolution: {integrity: sha512-djI4uw9rlkAb5iMhtLED+xJebDdAG935AdP4eRTB02R7OB/act55Bj9wsskhZsvuyQRpO4O1wQOp85s6T6GWmw==}
     engines: {node: '>=18'}
     peerDependencies:
-      '@langchain/core': ^0.3.75
+      '@langchain/core': '>=0.2.21 <0.4.0'
 
   '@langchain/weaviate@0.2.2':
     resolution: {integrity: sha512-nMkK4ZwfKjQR98kzpL/PPdFixdmD/KX89lZ9R5rhEShv3nfVyfGW8bVMpmC91kqIWxsjeqaqUZ1ZAdzpZRnE/w==}
     engines: {node: '>=18'}
     peerDependencies:
-      '@langchain/core': ^0.3.75
+      '@langchain/core': '>=0.2.21 <0.4.0'
 
   '@lit-labs/ssr-dom-shim@1.4.0':
     resolution: {integrity: sha512-ficsEARKnmmW5njugNYKipTm4SFnbik7CXtoencDZzmzo/dQ+2Q0bgkzJuoJP20Aj0F+izzJjOqsnkd6F/o1bw==}
@@ -2094,8 +2111,8 @@ packages:
     resolution: {integrity: sha512-1DpKU0Z5ThltBwjNySMC14g0CkbyhCaz9FkhxqNsZI6uAPJXFS8cMXlBKo26FJ8ZuW6S9GCMcR9IO5k2X5/9Fg==}
     engines: {node: '>= 12.13.0'}
 
-  '@modelcontextprotocol/sdk@1.17.5':
-    resolution: {integrity: sha512-QakrKIGniGuRVfWBdMsDea/dx1PNE739QJ7gCM41s9q+qaCYTHCdsIBXQVVXry3mfWAiaM9kT22Hyz53Uw8mfg==}
+  '@modelcontextprotocol/sdk@1.18.1':
+    resolution: {integrity: sha512-d//GE8/Yh7aC3e7p+kZG8JqqEAwwDUmAfvH1quogtbk+ksS6E0RR6toKKESPYYZVre0meqkJb27zb+dhqE9Sgw==}
     engines: {node: '>=18'}
 
   '@monaco-editor/loader@1.5.0':
@@ -4123,10 +4140,6 @@ packages:
   base32-encode@1.2.0:
     resolution: {integrity: sha512-cHFU8XeRyx0GgmoWi5qHMCVRiqU6J3MHWxVgun7jggCBUpVzm1Ir7M9dYr2whjSNc3tFeXfQ/oZjQu/4u55h9A==}
 
-  base58-js@1.0.5:
-    resolution: {integrity: sha512-LkkAPP8Zu+c0SVNRTRVDyMfKVORThX+rCViget00xdgLRrKkClCTz1T7cIrpr69ShwV5XJuuoZvMvJ43yURwkA==}
-    engines: {node: '>= 8'}
-
   base64-js@1.5.1:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
 
@@ -4805,9 +4818,6 @@ packages:
   detect-node@2.1.0:
     resolution: {integrity: sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==}
 
-  did-resolver@3.2.2:
-    resolution: {integrity: sha512-Eeo2F524VM5N3W4GwglZrnul2y6TLTwMQP3In62JdG34NZoqihYyOZLk+5wUW8sSgvIYIcJM8Dlt3xsdKZZ3tg==}
-
   diffie-hellman@5.0.3:
     resolution: {integrity: sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==}
 
@@ -6332,11 +6342,11 @@ packages:
     resolution: {integrity: sha512-MgMfy/68/xUi02dSg4AZhXjo4jQ+WuVYrU/ryzn59nUb+LXaMRoP/C9eaqblin0OLqGp93jfT8FXDg5mcqSg5A==}
     engines: {node: '>=18'}
     peerDependencies:
-      '@langchain/anthropic': ^0.3.27
+      '@langchain/anthropic': '*'
       '@langchain/aws': '*'
       '@langchain/cerebras': '*'
       '@langchain/cohere': '*'
-      '@langchain/core': ^0.3.75
+      '@langchain/core': '>=0.3.58 <0.4.0'
       '@langchain/deepseek': '*'
       '@langchain/google-genai': '*'
       '@langchain/google-vertexai': '*'
@@ -6392,7 +6402,7 @@ packages:
       '@opentelemetry/api': '*'
       '@opentelemetry/exporter-trace-otlp-proto': '*'
       '@opentelemetry/sdk-trace-base': '*'
-      openai: ^5.12.2
+      openai: '*'
     peerDependenciesMeta:
       '@opentelemetry/api':
         optional: true
@@ -6862,9 +6872,6 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
-  moment@2.30.1:
-    resolution: {integrity: sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==}
-
   monaco-editor@0.52.2:
     resolution: {integrity: sha512-GEQWEZmfkOGLdd3XK8ryrfWz3AIP8YymVXiPHEdewrUq7mh0qrKrfHLNCXcbB6sTnMLnOZ3ztSiKcciFUkIJwQ==}
 
@@ -7088,6 +7095,18 @@ packages:
     resolution: {integrity: sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==}
     engines: {node: '>=8'}
 
+  openai@4.104.0:
+    resolution: {integrity: sha512-p99EFNsA/yX6UhVO93f5kJsDRLAg+CTA2RBqdHK4RtK8u5IJw32Hyb2dTGKbnnFmnuoBv5r7Z2CURI9sGZpSuA==}
+    hasBin: true
+    peerDependencies:
+      ws: ^8.18.0
+      zod: ^3.23.8
+    peerDependenciesMeta:
+      ws:
+        optional: true
+      zod:
+        optional: true
+
   openai@5.12.2:
     resolution: {integrity: sha512-xqzHHQch5Tws5PcKR2xsZGX9xtch+JQFz5zb14dGqlshmmDAFBFEWmeIpf7wVqWV+w7Emj7jRgkNJakyKE0tYQ==}
     hasBin: true
@@ -7112,6 +7131,18 @@ packages:
       zod:
         optional: true
 
+  openai@5.22.0:
+    resolution: {integrity: sha512-uSsYZ+vw9JxUwnMTcT9bj5sGM5qY/4du2BIf1KSqDRZF9nhSlJYsBLPRwBZTOW+HNyjwGviR0SsoDPv5lpPrBw==}
+    hasBin: true
+    peerDependencies:
+      ws: ^8.18.0
+      zod: ^3.23.8
+    peerDependenciesMeta:
+      ws:
+        optional: true
+      zod:
+        optional: true
+
   openapi-types@12.1.3:
     resolution: {integrity: sha512-N4YtSYJqghVu4iek2ZUvcN/0aqH1kRDuNqzcycDxhOUpg7GdvLa2F3DgS6yBNhInhv2r/6I0Flkn7CqL8+nIcw==}
 
@@ -8769,9 +8800,6 @@ packages:
       react:
         optional: true
 
-  varint@6.0.0:
-    resolution: {integrity: sha512-cXEIW6cfr15lFv563k4GuVuW/fiwjknytD37jIOLSdSWuOI6WnO/oKwmP2FQTU2l01LP8/M5TSAJpzUaGe3uWg==}
-
   vary@1.1.2:
     resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
     engines: {node: '>= 0.8'}
@@ -10664,6 +10692,14 @@ snapshots:
     transitivePeerDependencies:
       - react-native
 
+  '@hashgraph/hedera-wallet-connect@1.5.1(@hashgraph/sdk@2.69.0(bn.js@5.2.2)(react-native@0.81.1(@babel/core@7.28.4)(@types/react@19.1.12)(react@19.1.1)))(@walletconnect/qrcode-modal@1.8.0)(@walletconnect/types@2.21.8(ioredis@5.7.0))(@walletconnect/utils@2.21.8(ioredis@5.7.0)(typescript@5.9.2)(zod@3.25.76))(@walletconnect/web3wallet@1.16.1(encoding@0.1.13)(ioredis@5.7.0)(typescript@5.9.2)(zod@3.25.76))':
+    dependencies:
+      '@hashgraph/sdk': 2.69.0(bn.js@5.2.2)(react-native@0.81.1(@babel/core@7.28.4)(@types/react@19.1.12)(react@19.1.1))
+      '@walletconnect/qrcode-modal': 1.8.0
+      '@walletconnect/types': 2.21.8(ioredis@5.7.0)
+      '@walletconnect/utils': 2.21.8(ioredis@5.7.0)(typescript@5.9.2)(zod@3.25.76)
+      '@walletconnect/web3wallet': 1.16.1(encoding@0.1.13)(ioredis@5.7.0)(typescript@5.9.2)(zod@3.25.76)
+
   '@hashgraph/hedera-wallet-connect@1.5.1(@hashgraph/sdk@2.72.0(bn.js@5.2.2)(react-native@0.81.1(@babel/core@7.28.4)(@types/react@19.1.12)(react@19.1.1)))(@walletconnect/qrcode-modal@1.8.0)(@walletconnect/types@2.21.8(ioredis@5.7.0))(@walletconnect/utils@2.21.8(ioredis@5.7.0)(typescript@5.9.2)(zod@3.25.76))(@walletconnect/web3wallet@1.16.1(encoding@0.1.13)(ioredis@5.7.0)(typescript@5.9.2)(zod@3.25.76))':
     dependencies:
       '@hashgraph/sdk': 2.72.0(bn.js@5.2.2)(react-native@0.81.1(@babel/core@7.28.4)(@types/react@19.1.12)(react@19.1.1))
@@ -10672,11 +10708,39 @@ snapshots:
       '@walletconnect/utils': 2.21.8(ioredis@5.7.0)(typescript@5.9.2)(zod@3.25.76)
       '@walletconnect/web3wallet': 1.16.1(encoding@0.1.13)(ioredis@5.7.0)(typescript@5.9.2)(zod@3.25.76)
 
+  '@hashgraph/proto@2.20.0':
+    dependencies:
+      long: 5.3.2
+      protobufjs: 7.2.5
+
   '@hashgraph/proto@2.22.0':
     dependencies:
       long: 5.3.2
       protobufjs: 7.2.5
 
+  '@hashgraph/sdk@2.69.0(bn.js@5.2.2)(react-native@0.81.1(@babel/core@7.28.4)(@types/react@19.1.12)(react@19.1.1))':
+    dependencies:
+      '@ethersproject/abi': 5.8.0
+      '@ethersproject/bignumber': 5.8.0
+      '@ethersproject/bytes': 5.8.0
+      '@ethersproject/rlp': 5.8.0
+      '@grpc/grpc-js': 1.13.4
+      '@hashgraph/cryptography': 1.9.0(react-native@0.81.1(@babel/core@7.28.4)(@types/react@19.1.12)(react@19.1.1))
+      '@hashgraph/proto': 2.20.0
+      bignumber.js: 9.3.1
+      bn.js: 5.2.2
+      crypto-js: 4.2.0
+      js-base64: 3.7.8
+      long: 5.3.2
+      pino: 9.9.4
+      pino-pretty: 13.1.1
+      protobufjs: 7.2.5
+      rfc4648: 1.5.4
+      utf8: 3.0.0
+    transitivePeerDependencies:
+      - expo-crypto
+      - react-native
+
   '@hashgraph/sdk@2.72.0(bn.js@5.2.2)(react-native@0.81.1(@babel/core@7.28.4)(@types/react@19.1.12)(react@19.1.1))':
     dependencies:
       '@ethersproject/abi': 5.8.0
@@ -10700,22 +10764,22 @@ snapshots:
       - expo-crypto
       - react-native
 
-  '@hashgraphonline/conversational-agent@0.2.110(7e1d97fc4c7e5d8732d49985f6a3ca08)':
+  '@hashgraphonline/conversational-agent@0.2.201(7e1d97fc4c7e5d8732d49985f6a3ca08)':
     dependencies:
       '@hashgraph/sdk': 2.72.0(bn.js@5.2.2)(react-native@0.81.1(@babel/core@7.28.4)(@types/react@19.1.12)(react@19.1.1))
-      '@hashgraphonline/hashinal-wc': 1.0.104(@types/react@19.1.12)(@walletconnect/types@2.21.8(ioredis@5.7.0))(@walletconnect/web3wallet@1.16.1(encoding@0.1.13)(ioredis@5.7.0)(typescript@5.9.2)(zod@3.25.76))(bn.js@5.2.2)(ioredis@5.7.0)(react-native@0.81.1(@babel/core@7.28.4)(@types/react@19.1.12)(react@19.1.1))(react@19.1.1)(typescript@5.9.2)(zod@3.25.76)
-      '@hashgraphonline/standards-agent-kit': 0.2.143(1aa68b4fdbc3cb28ab68251510f6f980)
+      '@hashgraphonline/hashinal-wc': 1.0.106(@types/react@19.1.12)(@walletconnect/types@2.21.8(ioredis@5.7.0))(@walletconnect/web3wallet@1.16.1(encoding@0.1.13)(ioredis@5.7.0)(typescript@5.9.2)(zod@3.25.76))(bn.js@5.2.2)(ioredis@5.7.0)(react-native@0.81.1(@babel/core@7.28.4)(@types/react@19.1.12)(react@19.1.1))(react@19.1.1)(typescript@5.9.2)(zod@3.25.76)
+      '@hashgraphonline/standards-agent-kit': 0.2.143(4748d36d8f34d0f997621644dae7dbff)
       '@hashgraphonline/standards-sdk': 0.1.106(@types/react@19.1.12)(@walletconnect/qrcode-modal@1.8.0)(@walletconnect/types@2.21.8(ioredis@5.7.0))(@walletconnect/utils@2.21.8(ioredis@5.7.0)(typescript@5.9.2)(zod@3.25.76))(@walletconnect/web3wallet@1.16.1(encoding@0.1.13)(ioredis@5.7.0)(typescript@5.9.2)(zod@3.25.76))(bn.js@5.2.2)(react-native@0.81.1(@babel/core@7.28.4)(@types/react@19.1.12)(react@19.1.1))(react@19.1.1)(typescript@5.9.2)
-      '@langchain/anthropic': 0.3.27(@langchain/core@0.3.75(openai@5.20.0(ws@8.18.2)(zod@3.25.76)))
-      '@langchain/core': 0.3.75(openai@5.20.0(ws@8.18.2)(zod@3.25.76))
-      '@langchain/openai': 0.6.11(@langchain/core@0.3.75(openai@5.20.0(ws@8.18.2)(zod@3.25.76)))(ws@8.18.2)
-      '@modelcontextprotocol/sdk': 1.17.5
+      '@langchain/anthropic': 0.3.28(@langchain/core@0.3.77(openai@5.22.0(ws@8.18.2)(zod@3.25.76)))
+      '@langchain/core': 0.3.77(openai@5.22.0(ws@8.18.2)(zod@3.25.76))
+      '@langchain/openai': 0.6.13(@langchain/core@0.3.77(openai@5.22.0(ws@8.18.2)(zod@3.25.76)))(ws@8.18.2)
+      '@modelcontextprotocol/sdk': 1.18.1
       axios: 1.11.0(debug@4.4.1)
       bignumber.js: 9.3.1
       ethers: 6.15.0
-      hedera-agent-kit: 2.0.3(@langchain/anthropic@0.3.27(@langchain/core@0.3.75(openai@5.20.0(ws@8.18.2)(zod@3.25.76))))(bn.js@5.2.2)(handlebars@4.7.8)(openai@5.20.0(ws@8.18.2)(zod@3.25.76))(react-dom@19.1.1(react@19.1.1))(react-native@0.81.1(@babel/core@7.28.4)(@types/react@19.1.12)(react@19.1.1))(react@19.1.1)(ws@8.18.2)(zod-to-json-schema@3.24.6(zod@3.25.76))
-      langchain: 0.3.33(@langchain/anthropic@0.3.27(@langchain/core@0.3.75(openai@5.20.0(ws@8.18.2)(zod@3.25.76))))(@langchain/core@0.3.75(openai@5.20.0(ws@8.18.2)(zod@3.25.76)))(axios@1.11.0)(handlebars@4.7.8)(openai@5.20.0(ws@8.18.2)(zod@3.25.76))(ws@8.18.2)
-      openai: 5.20.0(ws@8.18.2)(zod@3.25.76)
+      hedera-agent-kit: 2.0.3(@langchain/anthropic@0.3.28(@langchain/core@0.3.77(openai@5.22.0(ws@8.18.2)(zod@3.25.76))))(bn.js@5.2.2)(handlebars@4.7.8)(openai@5.22.0(ws@8.18.2)(zod@3.25.76))(react-dom@19.1.1(react@19.1.1))(react-native@0.81.1(@babel/core@7.28.4)(@types/react@19.1.12)(react@19.1.1))(react@19.1.1)(ws@8.18.2)(zod-to-json-schema@3.24.6(zod@3.25.76))
+      langchain: 0.3.33(@langchain/anthropic@0.3.28(@langchain/core@0.3.77(openai@5.22.0(ws@8.18.2)(zod@3.25.76))))(@langchain/core@0.3.77(openai@5.22.0(ws@8.18.2)(zod@3.25.76)))(axios@1.11.0)(handlebars@4.7.8)(openai@5.22.0(ws@8.18.2)(zod@3.25.76))(ws@8.18.2)
+      openai: 5.22.0(ws@8.18.2)(zod@3.25.76)
       tiktoken: 1.0.22
       zod: 3.25.76
       zod-to-json-schema: 3.24.6(zod@3.25.76)
@@ -10944,10 +11008,57 @@ snapshots:
       - utf-8-validate
       - zod
 
-  '@hashgraphonline/standards-agent-kit@0.2.142(1aa68b4fdbc3cb28ab68251510f6f980)':
+  '@hashgraphonline/hashinal-wc@1.0.106(@types/react@19.1.12)(@walletconnect/types@2.21.8(ioredis@5.7.0))(@walletconnect/web3wallet@1.16.1(encoding@0.1.13)(ioredis@5.7.0)(typescript@5.9.2)(zod@3.25.76))(bn.js@5.2.2)(ioredis@5.7.0)(react-native@0.81.1(@babel/core@7.28.4)(@types/react@19.1.12)(react@19.1.1))(react@19.1.1)(typescript@5.9.2)(zod@3.25.76)':
+    dependencies:
+      '@hashgraph/hedera-wallet-connect': 1.5.1(@hashgraph/sdk@2.72.0(bn.js@5.2.2)(react-native@0.81.1(@babel/core@7.28.4)(@types/react@19.1.12)(react@19.1.1)))(@walletconnect/qrcode-modal@1.8.0)(@walletconnect/types@2.21.8(ioredis@5.7.0))(@walletconnect/utils@2.21.8(ioredis@5.7.0)(typescript@5.9.2)(zod@3.25.76))(@walletconnect/web3wallet@1.16.1(encoding@0.1.13)(ioredis@5.7.0)(typescript@5.9.2)(zod@3.25.76))
+      '@hashgraph/proto': 2.22.0
+      '@hashgraph/sdk': 2.72.0(bn.js@5.2.2)(react-native@0.81.1(@babel/core@7.28.4)(@types/react@19.1.12)(react@19.1.1))
+      '@hashgraphonline/standards-sdk': 0.1.106(@types/react@19.1.12)(@walletconnect/qrcode-modal@1.8.0)(@walletconnect/types@2.21.8(ioredis@5.7.0))(@walletconnect/utils@2.21.8(ioredis@5.7.0)(typescript@5.9.2)(zod@3.25.76))(@walletconnect/web3wallet@1.16.1(encoding@0.1.13)(ioredis@5.7.0)(typescript@5.9.2)(zod@3.25.76))(bn.js@5.2.2)(react-native@0.81.1(@babel/core@7.28.4)(@types/react@19.1.12)(react@19.1.1))(react@19.1.1)(typescript@5.9.2)
+      '@walletconnect/core': 2.21.8(ioredis@5.7.0)(typescript@5.9.2)(zod@3.25.76)
+      '@walletconnect/modal': 2.7.0(@types/react@19.1.12)(react@19.1.1)
+      '@walletconnect/modal-core': 2.7.0(@types/react@19.1.12)(react@19.1.1)
+      '@walletconnect/qrcode-modal': 1.8.0
+      '@walletconnect/utils': 2.21.8(ioredis@5.7.0)(typescript@5.9.2)(zod@3.25.76)
+      fetch-retry: 6.0.0
+      long: 5.3.2
+    transitivePeerDependencies:
+      - '@azure/app-configuration'
+      - '@azure/cosmos'
+      - '@azure/data-tables'
+      - '@azure/identity'
+      - '@azure/keyvault-secrets'
+      - '@azure/storage-blob'
+      - '@capacitor/preferences'
+      - '@deno/kv'
+      - '@netlify/blobs'
+      - '@planetscale/database'
+      - '@react-native-async-storage/async-storage'
+      - '@types/react'
+      - '@upstash/redis'
+      - '@vercel/blob'
+      - '@vercel/functions'
+      - '@vercel/kv'
+      - '@walletconnect/types'
+      - '@walletconnect/web3wallet'
+      - aws4fetch
+      - bn.js
+      - bufferutil
+      - db0
+      - debug
+      - expo-crypto
+      - ioredis
+      - react
+      - react-native
+      - supports-color
+      - typescript
+      - uploadthing
+      - utf-8-validate
+      - zod
+
+  '@hashgraphonline/standards-agent-kit@0.2.143(1aa68b4fdbc3cb28ab68251510f6f980)':
     dependencies:
       '@hashgraph/sdk': 2.72.0(bn.js@5.2.2)(react-native@0.81.1(@babel/core@7.28.4)(@types/react@19.1.12)(react@19.1.1))
-      '@hashgraphonline/standards-sdk': 0.0.192(@types/react@19.1.12)(@walletconnect/qrcode-modal@1.8.0)(@walletconnect/types@2.21.8(ioredis@5.7.0))(@walletconnect/utils@2.21.8(ioredis@5.7.0)(typescript@5.9.2)(zod@3.25.76))(@walletconnect/web3wallet@1.16.1(encoding@0.1.13)(ioredis@5.7.0)(typescript@5.9.2)(zod@3.25.76))(bn.js@5.2.2)(encoding@0.1.13)(react-native@0.81.1(@babel/core@7.28.4)(@types/react@19.1.12)(react@19.1.1))(react@19.1.1)(typescript@5.9.2)
+      '@hashgraphonline/standards-sdk': 0.1.106(@types/react@19.1.12)(@walletconnect/qrcode-modal@1.8.0)(@walletconnect/types@2.21.8(ioredis@5.7.0))(@walletconnect/utils@2.21.8(ioredis@5.7.0)(typescript@5.9.2)(zod@3.25.76))(@walletconnect/web3wallet@1.16.1(encoding@0.1.13)(ioredis@5.7.0)(typescript@5.9.2)(zod@3.25.76))(bn.js@5.2.2)(react-native@0.81.1(@babel/core@7.28.4)(@types/react@19.1.12)(react@19.1.1))(react@19.1.1)(typescript@5.9.2)
       '@kiloscribe/inscription-sdk': 1.0.60(@types/react@19.1.12)(@walletconnect/qrcode-modal@1.8.0)(@walletconnect/types@2.21.8(ioredis@5.7.0))(@walletconnect/utils@2.21.8(ioredis@5.7.0)(typescript@5.9.2)(zod@3.25.76))(@walletconnect/web3wallet@1.16.1(encoding@0.1.13)(ioredis@5.7.0)(typescript@5.9.2)(zod@3.25.76))(bn.js@5.2.2)(react-native@0.81.1(@babel/core@7.28.4)(@types/react@19.1.12)(react@19.1.1))(react@19.1.1)(typescript@5.9.2)
       '@langchain/community': 0.3.55(@aws-crypto/sha256-js@5.2.0)(@aws-sdk/credential-provider-node@3.883.0)(@browserbasehq/sdk@2.6.0(encoding@0.1.13))(@browserbasehq/stagehand@1.14.0(@playwright/test@1.55.0)(deepmerge@4.3.1)(dotenv@17.2.2)(encoding@0.1.13)(openai@5.20.0(ws@8.18.2)(zod@3.25.76))(zod@3.25.76))(@ibm-cloud/watsonx-ai@1.6.12)(@langchain/anthropic@0.3.27(@langchain/core@0.3.75(openai@5.20.0(ws@8.18.2)(zod@3.25.76))))(@langchain/core@0.3.75(openai@5.20.0(ws@8.18.2)(zod@3.25.76)))(@smithy/util-utf8@2.3.0)(axios@1.11.0)(better-sqlite3@12.2.0)(chromadb@2.4.6(encoding@0.1.13)(ws@8.18.2)(zod@3.25.76))(cohere-ai@7.18.1(encoding@0.1.13))(crypto-js@4.2.0)(encoding@0.1.13)(fast-xml-parser@5.2.5)(handlebars@4.7.8)(ibm-cloud-sdk-core@5.4.2)(ignore@5.3.2)(ioredis@5.7.0)(jsdom@26.1.0)(jsonwebtoken@9.0.2)(lodash@4.17.21)(openai@5.20.0(ws@8.18.2)(zod@3.25.76))(playwright@1.55.0)(weaviate-client@3.8.1(encoding@0.1.13))(ws@8.18.2)
       '@langchain/core': 0.3.75(openai@5.20.0(ws@8.18.2)(zod@3.25.76))
@@ -11139,12 +11250,12 @@ snapshots:
       - youtubei.js
       - zod-to-json-schema
 
-  '@hashgraphonline/standards-agent-kit@0.2.143(1aa68b4fdbc3cb28ab68251510f6f980)':
+  '@hashgraphonline/standards-agent-kit@0.2.143(4748d36d8f34d0f997621644dae7dbff)':
     dependencies:
       '@hashgraph/sdk': 2.72.0(bn.js@5.2.2)(react-native@0.81.1(@babel/core@7.28.4)(@types/react@19.1.12)(react@19.1.1))
       '@hashgraphonline/standards-sdk': 0.1.106(@types/react@19.1.12)(@walletconnect/qrcode-modal@1.8.0)(@walletconnect/types@2.21.8(ioredis@5.7.0))(@walletconnect/utils@2.21.8(ioredis@5.7.0)(typescript@5.9.2)(zod@3.25.76))(@walletconnect/web3wallet@1.16.1(encoding@0.1.13)(ioredis@5.7.0)(typescript@5.9.2)(zod@3.25.76))(bn.js@5.2.2)(react-native@0.81.1(@babel/core@7.28.4)(@types/react@19.1.12)(react@19.1.1))(react@19.1.1)(typescript@5.9.2)
       '@kiloscribe/inscription-sdk': 1.0.60(@types/react@19.1.12)(@walletconnect/qrcode-modal@1.8.0)(@walletconnect/types@2.21.8(ioredis@5.7.0))(@walletconnect/utils@2.21.8(ioredis@5.7.0)(typescript@5.9.2)(zod@3.25.76))(@walletconnect/web3wallet@1.16.1(encoding@0.1.13)(ioredis@5.7.0)(typescript@5.9.2)(zod@3.25.76))(bn.js@5.2.2)(react-native@0.81.1(@babel/core@7.28.4)(@types/react@19.1.12)(react@19.1.1))(react@19.1.1)(typescript@5.9.2)
-      '@langchain/community': 0.3.55(@aws-crypto/sha256-js@5.2.0)(@aws-sdk/credential-provider-node@3.883.0)(@browserbasehq/sdk@2.6.0(encoding@0.1.13))(@browserbasehq/stagehand@1.14.0(@playwright/test@1.55.0)(deepmerge@4.3.1)(dotenv@17.2.2)(encoding@0.1.13)(openai@5.20.0(ws@8.18.2)(zod@3.25.76))(zod@3.25.76))(@ibm-cloud/watsonx-ai@1.6.12)(@langchain/anthropic@0.3.27(@langchain/core@0.3.75(openai@5.20.0(ws@8.18.2)(zod@3.25.76))))(@langchain/core@0.3.75(openai@5.20.0(ws@8.18.2)(zod@3.25.76)))(@smithy/util-utf8@2.3.0)(axios@1.11.0)(better-sqlite3@12.2.0)(chromadb@2.4.6(encoding@0.1.13)(ws@8.18.2)(zod@3.25.76))(cohere-ai@7.18.1(encoding@0.1.13))(crypto-js@4.2.0)(encoding@0.1.13)(fast-xml-parser@5.2.5)(handlebars@4.7.8)(ibm-cloud-sdk-core@5.4.2)(ignore@5.3.2)(ioredis@5.7.0)(jsdom@26.1.0)(jsonwebtoken@9.0.2)(lodash@4.17.21)(openai@5.20.0(ws@8.18.2)(zod@3.25.76))(playwright@1.55.0)(weaviate-client@3.8.1(encoding@0.1.13))(ws@8.18.2)
+      '@langchain/community': 0.3.55(@aws-crypto/sha256-js@5.2.0)(@aws-sdk/credential-provider-node@3.883.0)(@browserbasehq/sdk@2.6.0(encoding@0.1.13))(@browserbasehq/stagehand@1.14.0(@playwright/test@1.55.0)(deepmerge@4.3.1)(dotenv@17.2.2)(encoding@0.1.13)(openai@5.20.0(ws@8.18.2)(zod@3.25.76))(zod@3.25.76))(@ibm-cloud/watsonx-ai@1.6.12)(@langchain/anthropic@0.3.28(@langchain/core@0.3.77(openai@5.22.0(ws@8.18.2)(zod@3.25.76))))(@langchain/core@0.3.75(openai@5.20.0(ws@8.18.2)(zod@3.25.76)))(@smithy/util-utf8@2.3.0)(axios@1.11.0)(better-sqlite3@12.2.0)(chromadb@2.4.6(encoding@0.1.13)(ws@8.18.2)(zod@3.25.76))(cohere-ai@7.18.1(encoding@0.1.13))(crypto-js@4.2.0)(encoding@0.1.13)(fast-xml-parser@5.2.5)(handlebars@4.7.8)(ibm-cloud-sdk-core@5.4.2)(ignore@5.3.2)(ioredis@5.7.0)(jsdom@26.1.0)(jsonwebtoken@9.0.2)(lodash@4.17.21)(openai@5.20.0(ws@8.18.2)(zod@3.25.76))(playwright@1.55.0)(weaviate-client@3.8.1(encoding@0.1.13))(ws@8.18.2)
       '@langchain/core': 0.3.75(openai@5.20.0(ws@8.18.2)(zod@3.25.76))
       '@langchain/openai': 0.6.11(@langchain/core@0.3.75(openai@5.20.0(ws@8.18.2)(zod@3.25.76)))(ws@8.18.2)
       '@octokit/rest': 21.1.1
@@ -11152,8 +11263,8 @@ snapshots:
       chromadb: 2.4.6(encoding@0.1.13)(ws@8.18.2)(zod@3.25.76)
       commander: 14.0.0
       dotenv: 16.6.1
-      hedera-agent-kit: 2.0.3(@langchain/anthropic@0.3.27(@langchain/core@0.3.75(openai@5.20.0(ws@8.18.2)(zod@3.25.76))))(bn.js@5.2.2)(handlebars@4.7.8)(openai@5.20.0(ws@8.18.2)(zod@3.25.76))(react-dom@19.1.1(react@19.1.1))(react-native@0.81.1(@babel/core@7.28.4)(@types/react@19.1.12)(react@19.1.1))(react@19.1.1)(ws@8.18.2)(zod-to-json-schema@3.24.6(zod@3.25.76))
-      langchain: 0.3.33(@langchain/anthropic@0.3.27(@langchain/core@0.3.75(openai@5.20.0(ws@8.18.2)(zod@3.25.76))))(@langchain/core@0.3.75(openai@5.20.0(ws@8.18.2)(zod@3.25.76)))(axios@1.11.0)(handlebars@4.7.8)(openai@5.20.0(ws@8.18.2)(zod@3.25.76))(ws@8.18.2)
+      hedera-agent-kit: 2.0.3(@langchain/anthropic@0.3.28(@langchain/core@0.3.77(openai@5.22.0(ws@8.18.2)(zod@3.25.76))))(bn.js@5.2.2)(handlebars@4.7.8)(openai@5.20.0(ws@8.18.2)(zod@3.25.76))(react-dom@19.1.1(react@19.1.1))(react-native@0.81.1(@babel/core@7.28.4)(@types/react@19.1.12)(react@19.1.1))(react@19.1.1)(ws@8.18.2)(zod-to-json-schema@3.24.6(zod@3.25.76))
+      langchain: 0.3.33(@langchain/anthropic@0.3.28(@langchain/core@0.3.77(openai@5.22.0(ws@8.18.2)(zod@3.25.76))))(@langchain/core@0.3.75(openai@5.20.0(ws@8.18.2)(zod@3.25.76)))(axios@1.11.0)(handlebars@4.7.8)(openai@5.20.0(ws@8.18.2)(zod@3.25.76))(ws@8.18.2)
       openai: 5.20.0(ws@8.18.2)(zod@3.25.76)
       typescript: 5.9.2
       zod: 3.25.76
@@ -11336,9 +11447,9 @@ snapshots:
 
   '@hashgraphonline/standards-sdk@0.0.187(@types/react@19.1.12)(@walletconnect/qrcode-modal@1.8.0)(@walletconnect/types@2.21.8(ioredis@5.7.0))(@walletconnect/utils@2.21.8(ioredis@5.7.0)(typescript@5.9.2)(zod@3.25.76))(@walletconnect/web3wallet@1.16.1(encoding@0.1.13)(ioredis@5.7.0)(typescript@5.9.2)(zod@3.25.76))(bn.js@5.2.2)(react-native@0.81.1(@babel/core@7.28.4)(@types/react@19.1.12)(react@19.1.1))(react@19.1.1)(typescript@5.9.2)':
     dependencies:
-      '@hashgraph/hedera-wallet-connect': 1.5.1(@hashgraph/sdk@2.72.0(bn.js@5.2.2)(react-native@0.81.1(@babel/core@7.28.4)(@types/react@19.1.12)(react@19.1.1)))(@walletconnect/qrcode-modal@1.8.0)(@walletconnect/types@2.21.8(ioredis@5.7.0))(@walletconnect/utils@2.21.8(ioredis@5.7.0)(typescript@5.9.2)(zod@3.25.76))(@walletconnect/web3wallet@1.16.1(encoding@0.1.13)(ioredis@5.7.0)(typescript@5.9.2)(zod@3.25.76))
+      '@hashgraph/hedera-wallet-connect': 1.5.1(@hashgraph/sdk@2.69.0(bn.js@5.2.2)(react-native@0.81.1(@babel/core@7.28.4)(@types/react@19.1.12)(react@19.1.1)))(@walletconnect/qrcode-modal@1.8.0)(@walletconnect/types@2.21.8(ioredis@5.7.0))(@walletconnect/utils@2.21.8(ioredis@5.7.0)(typescript@5.9.2)(zod@3.25.76))(@walletconnect/web3wallet@1.16.1(encoding@0.1.13)(ioredis@5.7.0)(typescript@5.9.2)(zod@3.25.76))
       '@hashgraph/proto': 2.22.0
-      '@hashgraph/sdk': 2.72.0(bn.js@5.2.2)(react-native@0.81.1(@babel/core@7.28.4)(@types/react@19.1.12)(react@19.1.1))
+      '@hashgraph/sdk': 2.69.0(bn.js@5.2.2)(react-native@0.81.1(@babel/core@7.28.4)(@types/react@19.1.12)(react@19.1.1))
       '@hashgraphonline/hashinal-wc': 1.0.104(@types/react@19.1.12)(@walletconnect/types@2.21.8(ioredis@5.7.0))(@walletconnect/web3wallet@1.16.1(encoding@0.1.13)(ioredis@5.7.0)(typescript@5.9.2)(zod@3.25.76))(bn.js@5.2.2)(ioredis@5.7.0)(react-native@0.81.1(@babel/core@7.28.4)(@types/react@19.1.12)(react@19.1.1))(react@19.1.1)(typescript@5.9.2)(zod@3.25.76)
       '@kiloscribe/inscription-sdk': 1.0.60(@types/react@19.1.12)(@walletconnect/qrcode-modal@1.8.0)(@walletconnect/types@2.21.8(ioredis@5.7.0))(@walletconnect/utils@2.21.8(ioredis@5.7.0)(typescript@5.9.2)(zod@3.25.76))(@walletconnect/web3wallet@1.16.1(encoding@0.1.13)(ioredis@5.7.0)(typescript@5.9.2)(zod@3.25.76))(bn.js@5.2.2)(react-native@0.81.1(@babel/core@7.28.4)(@types/react@19.1.12)(react@19.1.1))(react@19.1.1)(typescript@5.9.2)
       axios: 1.11.0(debug@4.4.1)
@@ -11440,62 +11551,6 @@ snapshots:
       - uploadthing
       - utf-8-validate
 
-  '@hashgraphonline/standards-sdk@0.0.192(@types/react@19.1.12)(@walletconnect/qrcode-modal@1.8.0)(@walletconnect/types@2.21.8(ioredis@5.7.0))(@walletconnect/utils@2.21.8(ioredis@5.7.0)(typescript@5.9.2)(zod@3.25.76))(@walletconnect/web3wallet@1.16.1(encoding@0.1.13)(ioredis@5.7.0)(typescript@5.9.2)(zod@3.25.76))(bn.js@5.2.2)(encoding@0.1.13)(react-native@0.81.1(@babel/core@7.28.4)(@types/react@19.1.12)(react@19.1.1))(react@19.1.1)(typescript@5.9.2)':
-    dependencies:
-      '@hashgraph/hedera-wallet-connect': 1.5.1(@hashgraph/sdk@2.72.0(bn.js@5.2.2)(react-native@0.81.1(@babel/core@7.28.4)(@types/react@19.1.12)(react@19.1.1)))(@walletconnect/qrcode-modal@1.8.0)(@walletconnect/types@2.21.8(ioredis@5.7.0))(@walletconnect/utils@2.21.8(ioredis@5.7.0)(typescript@5.9.2)(zod@3.25.76))(@walletconnect/web3wallet@1.16.1(encoding@0.1.13)(ioredis@5.7.0)(typescript@5.9.2)(zod@3.25.76))
-      '@hashgraph/proto': 2.22.0
-      '@hashgraph/sdk': 2.72.0(bn.js@5.2.2)(react-native@0.81.1(@babel/core@7.28.4)(@types/react@19.1.12)(react@19.1.1))
-      '@hashgraphonline/hashinal-wc': 1.0.104(@types/react@19.1.12)(@walletconnect/types@2.21.8(ioredis@5.7.0))(@walletconnect/web3wallet@1.16.1(encoding@0.1.13)(ioredis@5.7.0)(typescript@5.9.2)(zod@3.25.76))(bn.js@5.2.2)(ioredis@5.7.0)(react-native@0.81.1(@babel/core@7.28.4)(@types/react@19.1.12)(react@19.1.1))(react@19.1.1)(typescript@5.9.2)(zod@3.25.76)
-      '@hiero-did-sdk/registrar': 0.1.2(bn.js@5.2.2)(react-native@0.81.1(@babel/core@7.28.4)(@types/react@19.1.12)(react@19.1.1))
-      '@hsuite/did-sdk-js': 1.0.4(bn.js@5.2.2)(encoding@0.1.13)(react-native@0.81.1(@babel/core@7.28.4)(@types/react@19.1.12)(react@19.1.1))
-      '@kiloscribe/inscription-sdk': 1.0.60(@types/react@19.1.12)(@walletconnect/qrcode-modal@1.8.0)(@walletconnect/types@2.21.8(ioredis@5.7.0))(@walletconnect/utils@2.21.8(ioredis@5.7.0)(typescript@5.9.2)(zod@3.25.76))(@walletconnect/web3wallet@1.16.1(encoding@0.1.13)(ioredis@5.7.0)(typescript@5.9.2)(zod@3.25.76))(bn.js@5.2.2)(react-native@0.81.1(@babel/core@7.28.4)(@types/react@19.1.12)(react@19.1.1))(react@19.1.1)(typescript@5.9.2)
-      axios: 1.11.0(debug@4.4.1)
-      bignumber.js: 9.3.1
-      buffer: 6.0.3
-      date-fns: 4.1.0
-      dotenv: 16.6.1
-      ethers: 6.15.0
-      file-type: 20.5.0
-      ioredis: 5.7.0
-      mime-types: 2.1.35
-      pino: 9.9.4
-      pino-pretty: 13.1.1
-      zod: 3.25.76
-    transitivePeerDependencies:
-      - '@azure/app-configuration'
-      - '@azure/cosmos'
-      - '@azure/data-tables'
-      - '@azure/identity'
-      - '@azure/keyvault-secrets'
-      - '@azure/storage-blob'
-      - '@capacitor/preferences'
-      - '@deno/kv'
-      - '@netlify/blobs'
-      - '@planetscale/database'
-      - '@react-native-async-storage/async-storage'
-      - '@types/react'
-      - '@upstash/redis'
-      - '@vercel/blob'
-      - '@vercel/functions'
-      - '@vercel/kv'
-      - '@walletconnect/qrcode-modal'
-      - '@walletconnect/types'
-      - '@walletconnect/utils'
-      - '@walletconnect/web3wallet'
-      - aws4fetch
-      - bn.js
-      - bufferutil
-      - db0
-      - debug
-      - encoding
-      - expo-crypto
-      - react
-      - react-native
-      - supports-color
-      - typescript
-      - uploadthing
-      - utf-8-validate
-
   '@hashgraphonline/standards-sdk@0.1.106(@types/react@19.1.12)(@walletconnect/qrcode-modal@1.8.0)(@walletconnect/types@2.21.8(ioredis@5.7.0))(@walletconnect/utils@2.21.8(ioredis@5.7.0)(typescript@5.9.2)(zod@3.25.76))(@walletconnect/web3wallet@1.16.1(encoding@0.1.13)(ioredis@5.7.0)(typescript@5.9.2)(zod@3.25.76))(bn.js@5.2.2)(react-native@0.81.1(@babel/core@7.28.4)(@types/react@19.1.12)(react@19.1.1))(react@19.1.1)(typescript@5.9.2)':
     dependencies:
       '@hashgraph/hedera-wallet-connect': 1.5.1(@hashgraph/sdk@2.72.0(bn.js@5.2.2)(react-native@0.81.1(@babel/core@7.28.4)(@types/react@19.1.12)(react@19.1.1)))(@walletconnect/qrcode-modal@1.8.0)(@walletconnect/types@2.21.8(ioredis@5.7.0))(@walletconnect/utils@2.21.8(ioredis@5.7.0)(typescript@5.9.2)(zod@3.25.76))(@walletconnect/web3wallet@1.16.1(encoding@0.1.13)(ioredis@5.7.0)(typescript@5.9.2)(zod@3.25.76))
@@ -11683,22 +11738,6 @@ snapshots:
       '@standard-schema/utils': 0.3.0
       react-hook-form: 7.62.0(react@19.1.1)
 
-  '@hsuite/did-sdk-js@1.0.4(bn.js@5.2.2)(encoding@0.1.13)(react-native@0.81.1(@babel/core@7.28.4)(@types/react@19.1.12)(react@19.1.1))':
-    dependencies:
-      '@hashgraph/sdk': 2.72.0(bn.js@5.2.2)(react-native@0.81.1(@babel/core@7.28.4)(@types/react@19.1.12)(react@19.1.1))
-      base58-js: 1.0.5
-      did-resolver: 3.2.2
-      js-base64: 3.7.8
-      moment: 2.30.1
-      multiformats: 9.9.0
-      node-fetch: 2.7.0(encoding@0.1.13)
-      varint: 6.0.0
-    transitivePeerDependencies:
-      - bn.js
-      - encoding
-      - expo-crypto
-      - react-native
-
   '@huggingface/jinja@0.1.3': {}
 
   '@huggingface/jinja@0.2.2': {}
@@ -12073,6 +12112,12 @@ snapshots:
       '@langchain/core': 0.3.75(openai@5.20.0(ws@8.18.2)(zod@3.25.76))
       fast-xml-parser: 4.5.3
 
+  '@langchain/anthropic@0.3.28(@langchain/core@0.3.77(openai@5.22.0(ws@8.18.2)(zod@3.25.76)))':
+    dependencies:
+      '@anthropic-ai/sdk': 0.56.0
+      '@langchain/core': 0.3.77(openai@5.22.0(ws@8.18.2)(zod@3.25.76))
+      fast-xml-parser: 4.5.3
+
   '@langchain/community@0.3.55(@aws-crypto/sha256-js@5.2.0)(@aws-sdk/credential-provider-node@3.883.0)(@browserbasehq/sdk@2.6.0(encoding@0.1.13))(@browserbasehq/stagehand@1.14.0(@playwright/test@1.55.0)(deepmerge@4.3.1)(dotenv@17.2.2)(encoding@0.1.13)(openai@5.20.0(ws@8.18.2)(zod@3.25.76))(zod@3.25.76))(@ibm-cloud/watsonx-ai@1.6.12)(@langchain/anthropic@0.3.27(@langchain/core@0.3.75(openai@5.20.0(ws@8.18.2)(zod@3.25.76))))(@langchain/core@0.3.75(openai@5.20.0(ws@8.18.2)(zod@3.25.76)))(@smithy/util-utf8@2.3.0)(axios@1.11.0)(better-sqlite3@12.2.0)(chromadb@2.4.6(encoding@0.1.13)(ws@8.18.2)(zod@3.25.76))(cohere-ai@7.18.1(encoding@0.1.13))(crypto-js@4.2.0)(encoding@0.1.13)(fast-xml-parser@5.2.5)(handlebars@4.7.8)(ibm-cloud-sdk-core@5.4.2)(ignore@5.3.2)(ioredis@5.7.0)(jsdom@26.1.0)(jsonwebtoken@9.0.2)(lodash@4.17.21)(openai@5.20.0(ws@8.18.2)(zod@3.25.76))(playwright@1.55.0)(weaviate-client@3.8.1(encoding@0.1.13))(ws@8.18.2)':
     dependencies:
       '@browserbasehq/stagehand': 1.14.0(@playwright/test@1.55.0)(deepmerge@4.3.1)(dotenv@17.2.2)(encoding@0.1.13)(openai@5.20.0(ws@8.18.2)(zod@3.25.76))(zod@3.25.76)
@@ -12129,54 +12174,197 @@ snapshots:
       - handlebars
       - peggy
 
-  '@langchain/core@0.3.75(openai@5.20.0(ws@8.18.2)(zod@3.25.76))':
-    dependencies:
-      '@cfworker/json-schema': 4.1.1
-      ansi-styles: 5.2.0
-      camelcase: 6.3.0
-      decamelize: 1.2.0
-      js-tiktoken: 1.0.21
-      langsmith: 0.3.67(openai@5.20.0(ws@8.18.2)(zod@3.25.76))
-      mustache: 4.2.0
-      p-queue: 6.6.2
-      p-retry: 4.6.2
-      uuid: 10.0.0
-      zod: 3.25.76
-      zod-to-json-schema: 3.24.6(zod@3.25.76)
-    transitivePeerDependencies:
-      - '@opentelemetry/api'
-      - '@opentelemetry/exporter-trace-otlp-proto'
-      - '@opentelemetry/sdk-trace-base'
-      - openai
-
-  '@langchain/langgraph-checkpoint@0.0.18(@langchain/core@0.3.75(openai@5.20.0(ws@8.18.2)(zod@3.25.76)))':
-    dependencies:
-      '@langchain/core': 0.3.75(openai@5.20.0(ws@8.18.2)(zod@3.25.76))
-      uuid: 10.0.0
-
-  '@langchain/langgraph-sdk@0.0.112(@langchain/core@0.3.75(openai@5.20.0(ws@8.18.2)(zod@3.25.76)))(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
-    dependencies:
-      '@types/json-schema': 7.0.15
-      p-queue: 6.6.2
-      p-retry: 4.6.2
-      uuid: 9.0.1
-    optionalDependencies:
-      '@langchain/core': 0.3.75(openai@5.20.0(ws@8.18.2)(zod@3.25.76))
-      react: 19.1.1
-      react-dom: 19.1.1(react@19.1.1)
-
-  '@langchain/langgraph@0.3.12(@langchain/core@0.3.75(openai@5.20.0(ws@8.18.2)(zod@3.25.76)))(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(zod-to-json-schema@3.24.6(zod@3.25.76))':
+  '@langchain/community@0.3.55(@aws-crypto/sha256-js@5.2.0)(@aws-sdk/credential-provider-node@3.883.0)(@browserbasehq/sdk@2.6.0(encoding@0.1.13))(@browserbasehq/stagehand@1.14.0(@playwright/test@1.55.0)(deepmerge@4.3.1)(dotenv@17.2.2)(encoding@0.1.13)(openai@5.20.0(ws@8.18.2)(zod@3.25.76))(zod@3.25.76))(@ibm-cloud/watsonx-ai@1.6.12)(@langchain/anthropic@0.3.28(@langchain/core@0.3.77(openai@5.22.0(ws@8.18.2)(zod@3.25.76))))(@langchain/core@0.3.75(openai@5.20.0(ws@8.18.2)(zod@3.25.76)))(@smithy/util-utf8@2.3.0)(axios@1.11.0)(better-sqlite3@12.2.0)(chromadb@2.4.6(encoding@0.1.13)(ws@8.18.2)(zod@3.25.76))(cohere-ai@7.18.1(encoding@0.1.13))(crypto-js@4.2.0)(encoding@0.1.13)(fast-xml-parser@5.2.5)(handlebars@4.7.8)(ibm-cloud-sdk-core@5.4.2)(ignore@5.3.2)(ioredis@5.7.0)(jsdom@26.1.0)(jsonwebtoken@9.0.2)(lodash@4.17.21)(openai@5.20.0(ws@8.18.2)(zod@3.25.76))(playwright@1.55.0)(weaviate-client@3.8.1(encoding@0.1.13))(ws@8.18.2)':
     dependencies:
+      '@browserbasehq/stagehand': 1.14.0(@playwright/test@1.55.0)(deepmerge@4.3.1)(dotenv@17.2.2)(encoding@0.1.13)(openai@5.20.0(ws@8.18.2)(zod@3.25.76))(zod@3.25.76)
+      '@ibm-cloud/watsonx-ai': 1.6.12
       '@langchain/core': 0.3.75(openai@5.20.0(ws@8.18.2)(zod@3.25.76))
-      '@langchain/langgraph-checkpoint': 0.0.18(@langchain/core@0.3.75(openai@5.20.0(ws@8.18.2)(zod@3.25.76)))
-      '@langchain/langgraph-sdk': 0.0.112(@langchain/core@0.3.75(openai@5.20.0(ws@8.18.2)(zod@3.25.76)))(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@langchain/openai': 0.6.11(@langchain/core@0.3.75(openai@5.20.0(ws@8.18.2)(zod@3.25.76)))(ws@8.18.2)
+      '@langchain/weaviate': 0.2.2(@langchain/core@0.3.75(openai@5.20.0(ws@8.18.2)(zod@3.25.76)))(encoding@0.1.13)
+      binary-extensions: 2.3.0
+      expr-eval: 2.0.2
+      flat: 5.0.2
+      ibm-cloud-sdk-core: 5.4.2
+      js-yaml: 4.1.0
+      langchain: 0.3.33(@langchain/anthropic@0.3.28(@langchain/core@0.3.77(openai@5.22.0(ws@8.18.2)(zod@3.25.76))))(@langchain/core@0.3.75(openai@5.20.0(ws@8.18.2)(zod@3.25.76)))(axios@1.11.0)(handlebars@4.7.8)(openai@5.20.0(ws@8.18.2)(zod@3.25.76))(ws@8.18.2)
+      langsmith: 0.3.67(openai@5.20.0(ws@8.18.2)(zod@3.25.76))
+      openai: 5.20.0(ws@8.18.2)(zod@3.25.76)
       uuid: 10.0.0
       zod: 3.25.76
     optionalDependencies:
-      zod-to-json-schema: 3.24.6(zod@3.25.76)
-    transitivePeerDependencies:
-      - react
-      - react-dom
+      '@aws-crypto/sha256-js': 5.2.0
+      '@aws-sdk/credential-provider-node': 3.883.0
+      '@browserbasehq/sdk': 2.6.0(encoding@0.1.13)
+      '@smithy/util-utf8': 2.3.0
+      better-sqlite3: 12.2.0
+      chromadb: 2.4.6(encoding@0.1.13)(ws@8.18.2)(zod@3.25.76)
+      cohere-ai: 7.18.1(encoding@0.1.13)
+      crypto-js: 4.2.0
+      fast-xml-parser: 5.2.5
+      ignore: 5.3.2
+      ioredis: 5.7.0
+      jsdom: 26.1.0
+      jsonwebtoken: 9.0.2
+      lodash: 4.17.21
+      playwright: 1.55.0
+      weaviate-client: 3.8.1(encoding@0.1.13)
+      ws: 8.18.2
+    transitivePeerDependencies:
+      - '@langchain/anthropic'
+      - '@langchain/aws'
+      - '@langchain/cerebras'
+      - '@langchain/cohere'
+      - '@langchain/deepseek'
+      - '@langchain/google-genai'
+      - '@langchain/google-vertexai'
+      - '@langchain/google-vertexai-web'
+      - '@langchain/groq'
+      - '@langchain/mistralai'
+      - '@langchain/ollama'
+      - '@langchain/xai'
+      - '@opentelemetry/api'
+      - '@opentelemetry/exporter-trace-otlp-proto'
+      - '@opentelemetry/sdk-trace-base'
+      - axios
+      - encoding
+      - handlebars
+      - peggy
+
+  '@langchain/core@0.3.75(openai@5.20.0(ws@8.18.2)(zod@3.25.76))':
+    dependencies:
+      '@cfworker/json-schema': 4.1.1
+      ansi-styles: 5.2.0
+      camelcase: 6.3.0
+      decamelize: 1.2.0
+      js-tiktoken: 1.0.21
+      langsmith: 0.3.67(openai@5.20.0(ws@8.18.2)(zod@3.25.76))
+      mustache: 4.2.0
+      p-queue: 6.6.2
+      p-retry: 4.6.2
+      uuid: 10.0.0
+      zod: 3.25.76
+      zod-to-json-schema: 3.24.6(zod@3.25.76)
+    transitivePeerDependencies:
+      - '@opentelemetry/api'
+      - '@opentelemetry/exporter-trace-otlp-proto'
+      - '@opentelemetry/sdk-trace-base'
+      - openai
+
+  '@langchain/core@0.3.77(openai@5.20.0(ws@8.18.2)(zod@3.25.76))':
+    dependencies:
+      '@cfworker/json-schema': 4.1.1
+      ansi-styles: 5.2.0
+      camelcase: 6.3.0
+      decamelize: 1.2.0
+      js-tiktoken: 1.0.21
+      langsmith: 0.3.67(openai@5.20.0(ws@8.18.2)(zod@3.25.76))
+      mustache: 4.2.0
+      p-queue: 6.6.2
+      p-retry: 4.6.2
+      uuid: 10.0.0
+      zod: 3.25.76
+      zod-to-json-schema: 3.24.6(zod@3.25.76)
+    transitivePeerDependencies:
+      - '@opentelemetry/api'
+      - '@opentelemetry/exporter-trace-otlp-proto'
+      - '@opentelemetry/sdk-trace-base'
+      - openai
+
+  '@langchain/core@0.3.77(openai@5.22.0(ws@8.18.2)(zod@3.25.76))':
+    dependencies:
+      '@cfworker/json-schema': 4.1.1
+      ansi-styles: 5.2.0
+      camelcase: 6.3.0
+      decamelize: 1.2.0
+      js-tiktoken: 1.0.21
+      langsmith: 0.3.67(openai@5.22.0(ws@8.18.2)(zod@3.25.76))
+      mustache: 4.2.0
+      p-queue: 6.6.2
+      p-retry: 4.6.2
+      uuid: 10.0.0
+      zod: 3.25.76
+      zod-to-json-schema: 3.24.6(zod@3.25.76)
+    transitivePeerDependencies:
+      - '@opentelemetry/api'
+      - '@opentelemetry/exporter-trace-otlp-proto'
+      - '@opentelemetry/sdk-trace-base'
+      - openai
+
+  '@langchain/langgraph-checkpoint@0.0.18(@langchain/core@0.3.77(openai@5.20.0(ws@8.18.2)(zod@3.25.76)))':
+    dependencies:
+      '@langchain/core': 0.3.77(openai@5.20.0(ws@8.18.2)(zod@3.25.76))
+      uuid: 10.0.0
+
+  '@langchain/langgraph-checkpoint@0.0.18(@langchain/core@0.3.77(openai@5.22.0(ws@8.18.2)(zod@3.25.76)))':
+    dependencies:
+      '@langchain/core': 0.3.77(openai@5.22.0(ws@8.18.2)(zod@3.25.76))
+      uuid: 10.0.0
+
+  '@langchain/langgraph-sdk@0.0.112(@langchain/core@0.3.77(openai@5.20.0(ws@8.18.2)(zod@3.25.76)))(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@types/json-schema': 7.0.15
+      p-queue: 6.6.2
+      p-retry: 4.6.2
+      uuid: 9.0.1
+    optionalDependencies:
+      '@langchain/core': 0.3.77(openai@5.20.0(ws@8.18.2)(zod@3.25.76))
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+
+  '@langchain/langgraph-sdk@0.0.112(@langchain/core@0.3.77(openai@5.22.0(ws@8.18.2)(zod@3.25.76)))(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@types/json-schema': 7.0.15
+      p-queue: 6.6.2
+      p-retry: 4.6.2
+      uuid: 9.0.1
+    optionalDependencies:
+      '@langchain/core': 0.3.77(openai@5.22.0(ws@8.18.2)(zod@3.25.76))
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+
+  '@langchain/langgraph@0.3.12(@langchain/core@0.3.77(openai@5.20.0(ws@8.18.2)(zod@3.25.76)))(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(zod-to-json-schema@3.24.6(zod@3.25.76))':
+    dependencies:
+      '@langchain/core': 0.3.77(openai@5.20.0(ws@8.18.2)(zod@3.25.76))
+      '@langchain/langgraph-checkpoint': 0.0.18(@langchain/core@0.3.77(openai@5.20.0(ws@8.18.2)(zod@3.25.76)))
+      '@langchain/langgraph-sdk': 0.0.112(@langchain/core@0.3.77(openai@5.20.0(ws@8.18.2)(zod@3.25.76)))(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      uuid: 10.0.0
+      zod: 3.25.76
+    optionalDependencies:
+      zod-to-json-schema: 3.24.6(zod@3.25.76)
+    transitivePeerDependencies:
+      - react
+      - react-dom
+
+  '@langchain/langgraph@0.3.12(@langchain/core@0.3.77(openai@5.22.0(ws@8.18.2)(zod@3.25.76)))(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(zod-to-json-schema@3.24.6(zod@3.25.76))':
+    dependencies:
+      '@langchain/core': 0.3.77(openai@5.22.0(ws@8.18.2)(zod@3.25.76))
+      '@langchain/langgraph-checkpoint': 0.0.18(@langchain/core@0.3.77(openai@5.22.0(ws@8.18.2)(zod@3.25.76)))
+      '@langchain/langgraph-sdk': 0.0.112(@langchain/core@0.3.77(openai@5.22.0(ws@8.18.2)(zod@3.25.76)))(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      uuid: 10.0.0
+      zod: 3.25.76
+    optionalDependencies:
+      zod-to-json-schema: 3.24.6(zod@3.25.76)
+    transitivePeerDependencies:
+      - react
+      - react-dom
+
+  '@langchain/openai@0.5.18(@langchain/core@0.3.77(openai@5.20.0(ws@8.18.2)(zod@3.25.76)))(ws@8.18.2)':
+    dependencies:
+      '@langchain/core': 0.3.77(openai@5.20.0(ws@8.18.2)(zod@3.25.76))
+      js-tiktoken: 1.0.21
+      openai: 5.22.0(ws@8.18.2)(zod@3.25.76)
+      zod: 3.25.76
+    transitivePeerDependencies:
+      - ws
+
+  '@langchain/openai@0.5.18(@langchain/core@0.3.77(openai@5.22.0(ws@8.18.2)(zod@3.25.76)))(ws@8.18.2)':
+    dependencies:
+      '@langchain/core': 0.3.77(openai@5.22.0(ws@8.18.2)(zod@3.25.76))
+      js-tiktoken: 1.0.21
+      openai: 5.22.0(ws@8.18.2)(zod@3.25.76)
+      zod: 3.25.76
+    transitivePeerDependencies:
+      - ws
 
   '@langchain/openai@0.6.11(@langchain/core@0.3.75(openai@5.20.0(ws@8.18.2)(zod@3.25.76)))(ws@8.18.2)':
     dependencies:
@@ -12187,11 +12375,48 @@ snapshots:
     transitivePeerDependencies:
       - ws
 
+  '@langchain/openai@0.6.13(@langchain/core@0.3.75(openai@5.20.0(ws@8.18.2)(zod@3.25.76)))(ws@8.18.2)':
+    dependencies:
+      '@langchain/core': 0.3.75(openai@5.20.0(ws@8.18.2)(zod@3.25.76))
+      js-tiktoken: 1.0.21
+      openai: 5.12.2(ws@8.18.2)(zod@3.25.76)
+      zod: 3.25.76
+    transitivePeerDependencies:
+      - ws
+
+  '@langchain/openai@0.6.13(@langchain/core@0.3.77(openai@5.20.0(ws@8.18.2)(zod@3.25.76)))(ws@8.18.2)':
+    dependencies:
+      '@langchain/core': 0.3.77(openai@5.20.0(ws@8.18.2)(zod@3.25.76))
+      js-tiktoken: 1.0.21
+      openai: 5.12.2(ws@8.18.2)(zod@3.25.76)
+      zod: 3.25.76
+    transitivePeerDependencies:
+      - ws
+
+  '@langchain/openai@0.6.13(@langchain/core@0.3.77(openai@5.22.0(ws@8.18.2)(zod@3.25.76)))(ws@8.18.2)':
+    dependencies:
+      '@langchain/core': 0.3.77(openai@5.22.0(ws@8.18.2)(zod@3.25.76))
+      js-tiktoken: 1.0.21
+      openai: 5.12.2(ws@8.18.2)(zod@3.25.76)
+      zod: 3.25.76
+    transitivePeerDependencies:
+      - ws
+
   '@langchain/textsplitters@0.1.0(@langchain/core@0.3.75(openai@5.20.0(ws@8.18.2)(zod@3.25.76)))':
     dependencies:
       '@langchain/core': 0.3.75(openai@5.20.0(ws@8.18.2)(zod@3.25.76))
       js-tiktoken: 1.0.21
 
+  '@langchain/textsplitters@0.1.0(@langchain/core@0.3.77(openai@5.20.0(ws@8.18.2)(zod@3.25.76)))':
+    dependencies:
+      '@langchain/core': 0.3.77(openai@5.20.0(ws@8.18.2)(zod@3.25.76))
+      js-tiktoken: 1.0.21
+
+  '@langchain/textsplitters@0.1.0(@langchain/core@0.3.77(openai@5.22.0(ws@8.18.2)(zod@3.25.76)))':
+    dependencies:
+      '@langchain/core': 0.3.77(openai@5.22.0(ws@8.18.2)(zod@3.25.76))
+      js-tiktoken: 1.0.21
+
   '@langchain/weaviate@0.2.2(@langchain/core@0.3.75(openai@5.20.0(ws@8.18.2)(zod@3.25.76)))(encoding@0.1.13)':
     dependencies:
       '@langchain/core': 0.3.75(openai@5.20.0(ws@8.18.2)(zod@3.25.76))
@@ -12214,7 +12439,7 @@ snapshots:
     dependencies:
       cross-spawn: 7.0.6
 
-  '@modelcontextprotocol/sdk@1.17.5':
+  '@modelcontextprotocol/sdk@1.18.1':
     dependencies:
       ajv: 6.12.6
       content-type: 1.0.5
@@ -14807,8 +15032,6 @@ snapshots:
       to-data-view: 1.1.0
     optional: true
 
-  base58-js@1.0.5: {}
-
   base64-js@1.5.1: {}
 
   before-after-hook@3.0.2: {}
@@ -15132,7 +15355,7 @@ snapshots:
       cohere-ai: 7.18.1(encoding@0.1.13)
       isomorphic-fetch: 3.0.0(encoding@0.1.13)
       ollama: 0.5.17
-      openai: 5.20.0(ws@8.18.2)(zod@3.25.76)
+      openai: 4.104.0(encoding@0.1.13)(ws@8.18.2)(zod@3.25.76)
       semver: 7.7.2
       voyageai: 0.0.3(encoding@0.1.13)
     optionalDependencies:
@@ -15567,8 +15790,6 @@ snapshots:
   detect-node@2.1.0:
     optional: true
 
-  did-resolver@3.2.2: {}
-
   diffie-hellman@5.0.3:
     dependencies:
       bn.js: 4.12.2
@@ -16618,17 +16839,111 @@ snapshots:
   hedera-agent-kit@2.0.3(@langchain/anthropic@0.3.27(@langchain/core@0.3.75(openai@5.20.0(ws@8.18.2)(zod@3.25.76))))(bn.js@5.2.2)(handlebars@4.7.8)(openai@5.20.0(ws@8.18.2)(zod@3.25.76))(react-dom@19.1.1(react@19.1.1))(react-native@0.81.1(@babel/core@7.28.4)(@types/react@19.1.12)(react@19.1.1))(react@19.1.1)(ws@8.18.2)(zod-to-json-schema@3.24.6(zod@3.25.76)):
     dependencies:
       '@hashgraph/sdk': 2.72.0(bn.js@5.2.2)(react-native@0.81.1(@babel/core@7.28.4)(@types/react@19.1.12)(react@19.1.1))
-      '@langchain/core': 0.3.75(openai@5.20.0(ws@8.18.2)(zod@3.25.76))
-      '@langchain/langgraph': 0.3.12(@langchain/core@0.3.75(openai@5.20.0(ws@8.18.2)(zod@3.25.76)))(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(zod-to-json-schema@3.24.6(zod@3.25.76))
-      '@langchain/openai': 0.6.11(@langchain/core@0.3.75(openai@5.20.0(ws@8.18.2)(zod@3.25.76)))(ws@8.18.2)
-      '@modelcontextprotocol/sdk': 1.17.5
+      '@langchain/core': 0.3.77(openai@5.20.0(ws@8.18.2)(zod@3.25.76))
+      '@langchain/langgraph': 0.3.12(@langchain/core@0.3.77(openai@5.20.0(ws@8.18.2)(zod@3.25.76)))(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(zod-to-json-schema@3.24.6(zod@3.25.76))
+      '@langchain/openai': 0.5.18(@langchain/core@0.3.77(openai@5.20.0(ws@8.18.2)(zod@3.25.76)))(ws@8.18.2)
+      '@modelcontextprotocol/sdk': 1.18.1
       axios: 1.11.0(debug@4.4.1)
       bignumber.js: 9.3.1
       chalk: 5.6.2
       date-fns: 4.1.0
       dotenv: 17.2.2
       gradient-string: 3.0.0
-      langchain: 0.3.33(@langchain/anthropic@0.3.27(@langchain/core@0.3.75(openai@5.20.0(ws@8.18.2)(zod@3.25.76))))(@langchain/core@0.3.75(openai@5.20.0(ws@8.18.2)(zod@3.25.76)))(axios@1.11.0)(handlebars@4.7.8)(openai@5.20.0(ws@8.18.2)(zod@3.25.76))(ws@8.18.2)
+      langchain: 0.3.33(@langchain/anthropic@0.3.27(@langchain/core@0.3.75(openai@5.20.0(ws@8.18.2)(zod@3.25.76))))(@langchain/core@0.3.77(openai@5.20.0(ws@8.18.2)(zod@3.25.76)))(axios@1.11.0)(handlebars@4.7.8)(openai@5.20.0(ws@8.18.2)(zod@3.25.76))(ws@8.18.2)
+      pino: 9.9.4
+      zod: 3.25.76
+    transitivePeerDependencies:
+      - '@langchain/anthropic'
+      - '@langchain/aws'
+      - '@langchain/cerebras'
+      - '@langchain/cohere'
+      - '@langchain/deepseek'
+      - '@langchain/google-genai'
+      - '@langchain/google-vertexai'
+      - '@langchain/google-vertexai-web'
+      - '@langchain/groq'
+      - '@langchain/mistralai'
+      - '@langchain/ollama'
+      - '@langchain/xai'
+      - '@opentelemetry/api'
+      - '@opentelemetry/exporter-trace-otlp-proto'
+      - '@opentelemetry/sdk-trace-base'
+      - bn.js
+      - cheerio
+      - debug
+      - expo-crypto
+      - handlebars
+      - openai
+      - peggy
+      - react
+      - react-dom
+      - react-native
+      - supports-color
+      - typeorm
+      - ws
+      - zod-to-json-schema
+
+  hedera-agent-kit@2.0.3(@langchain/anthropic@0.3.28(@langchain/core@0.3.77(openai@5.22.0(ws@8.18.2)(zod@3.25.76))))(bn.js@5.2.2)(handlebars@4.7.8)(openai@5.20.0(ws@8.18.2)(zod@3.25.76))(react-dom@19.1.1(react@19.1.1))(react-native@0.81.1(@babel/core@7.28.4)(@types/react@19.1.12)(react@19.1.1))(react@19.1.1)(ws@8.18.2)(zod-to-json-schema@3.24.6(zod@3.25.76)):
+    dependencies:
+      '@hashgraph/sdk': 2.72.0(bn.js@5.2.2)(react-native@0.81.1(@babel/core@7.28.4)(@types/react@19.1.12)(react@19.1.1))
+      '@langchain/core': 0.3.77(openai@5.20.0(ws@8.18.2)(zod@3.25.76))
+      '@langchain/langgraph': 0.3.12(@langchain/core@0.3.77(openai@5.20.0(ws@8.18.2)(zod@3.25.76)))(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(zod-to-json-schema@3.24.6(zod@3.25.76))
+      '@langchain/openai': 0.5.18(@langchain/core@0.3.77(openai@5.20.0(ws@8.18.2)(zod@3.25.76)))(ws@8.18.2)
+      '@modelcontextprotocol/sdk': 1.18.1
+      axios: 1.11.0(debug@4.4.1)
+      bignumber.js: 9.3.1
+      chalk: 5.6.2
+      date-fns: 4.1.0
+      dotenv: 17.2.2
+      gradient-string: 3.0.0
+      langchain: 0.3.33(@langchain/anthropic@0.3.28(@langchain/core@0.3.77(openai@5.22.0(ws@8.18.2)(zod@3.25.76))))(@langchain/core@0.3.77(openai@5.20.0(ws@8.18.2)(zod@3.25.76)))(axios@1.11.0)(handlebars@4.7.8)(openai@5.20.0(ws@8.18.2)(zod@3.25.76))(ws@8.18.2)
+      pino: 9.9.4
+      zod: 3.25.76
+    transitivePeerDependencies:
+      - '@langchain/anthropic'
+      - '@langchain/aws'
+      - '@langchain/cerebras'
+      - '@langchain/cohere'
+      - '@langchain/deepseek'
+      - '@langchain/google-genai'
+      - '@langchain/google-vertexai'
+      - '@langchain/google-vertexai-web'
+      - '@langchain/groq'
+      - '@langchain/mistralai'
+      - '@langchain/ollama'
+      - '@langchain/xai'
+      - '@opentelemetry/api'
+      - '@opentelemetry/exporter-trace-otlp-proto'
+      - '@opentelemetry/sdk-trace-base'
+      - bn.js
+      - cheerio
+      - debug
+      - expo-crypto
+      - handlebars
+      - openai
+      - peggy
+      - react
+      - react-dom
+      - react-native
+      - supports-color
+      - typeorm
+      - ws
+      - zod-to-json-schema
+
+  hedera-agent-kit@2.0.3(@langchain/anthropic@0.3.28(@langchain/core@0.3.77(openai@5.22.0(ws@8.18.2)(zod@3.25.76))))(bn.js@5.2.2)(handlebars@4.7.8)(openai@5.22.0(ws@8.18.2)(zod@3.25.76))(react-dom@19.1.1(react@19.1.1))(react-native@0.81.1(@babel/core@7.28.4)(@types/react@19.1.12)(react@19.1.1))(react@19.1.1)(ws@8.18.2)(zod-to-json-schema@3.24.6(zod@3.25.76)):
+    dependencies:
+      '@hashgraph/sdk': 2.72.0(bn.js@5.2.2)(react-native@0.81.1(@babel/core@7.28.4)(@types/react@19.1.12)(react@19.1.1))
+      '@langchain/core': 0.3.77(openai@5.22.0(ws@8.18.2)(zod@3.25.76))
+      '@langchain/langgraph': 0.3.12(@langchain/core@0.3.77(openai@5.22.0(ws@8.18.2)(zod@3.25.76)))(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(zod-to-json-schema@3.24.6(zod@3.25.76))
+      '@langchain/openai': 0.5.18(@langchain/core@0.3.77(openai@5.22.0(ws@8.18.2)(zod@3.25.76)))(ws@8.18.2)
+      '@modelcontextprotocol/sdk': 1.18.1
+      axios: 1.11.0(debug@4.4.1)
+      bignumber.js: 9.3.1
+      chalk: 5.6.2
+      date-fns: 4.1.0
+      dotenv: 17.2.2
+      gradient-string: 3.0.0
+      langchain: 0.3.33(@langchain/anthropic@0.3.28(@langchain/core@0.3.77(openai@5.22.0(ws@8.18.2)(zod@3.25.76))))(@langchain/core@0.3.77(openai@5.22.0(ws@8.18.2)(zod@3.25.76)))(axios@1.11.0)(handlebars@4.7.8)(openai@5.22.0(ws@8.18.2)(zod@3.25.76))(ws@8.18.2)
       pino: 9.9.4
       zod: 3.25.76
     transitivePeerDependencies:
@@ -17548,7 +17863,7 @@ snapshots:
   langchain@0.3.33(@langchain/anthropic@0.3.27(@langchain/core@0.3.75(openai@5.20.0(ws@8.18.2)(zod@3.25.76))))(@langchain/core@0.3.75(openai@5.20.0(ws@8.18.2)(zod@3.25.76)))(axios@1.11.0)(handlebars@4.7.8)(openai@5.20.0(ws@8.18.2)(zod@3.25.76))(ws@8.18.2):
     dependencies:
       '@langchain/core': 0.3.75(openai@5.20.0(ws@8.18.2)(zod@3.25.76))
-      '@langchain/openai': 0.6.11(@langchain/core@0.3.75(openai@5.20.0(ws@8.18.2)(zod@3.25.76)))(ws@8.18.2)
+      '@langchain/openai': 0.6.13(@langchain/core@0.3.75(openai@5.20.0(ws@8.18.2)(zod@3.25.76)))(ws@8.18.2)
       '@langchain/textsplitters': 0.1.0(@langchain/core@0.3.75(openai@5.20.0(ws@8.18.2)(zod@3.25.76)))
       js-tiktoken: 1.0.21
       js-yaml: 4.1.0
@@ -17570,6 +17885,106 @@ snapshots:
       - openai
       - ws
 
+  langchain@0.3.33(@langchain/anthropic@0.3.27(@langchain/core@0.3.75(openai@5.20.0(ws@8.18.2)(zod@3.25.76))))(@langchain/core@0.3.77(openai@5.20.0(ws@8.18.2)(zod@3.25.76)))(axios@1.11.0)(handlebars@4.7.8)(openai@5.20.0(ws@8.18.2)(zod@3.25.76))(ws@8.18.2):
+    dependencies:
+      '@langchain/core': 0.3.77(openai@5.20.0(ws@8.18.2)(zod@3.25.76))
+      '@langchain/openai': 0.6.13(@langchain/core@0.3.77(openai@5.20.0(ws@8.18.2)(zod@3.25.76)))(ws@8.18.2)
+      '@langchain/textsplitters': 0.1.0(@langchain/core@0.3.77(openai@5.20.0(ws@8.18.2)(zod@3.25.76)))
+      js-tiktoken: 1.0.21
+      js-yaml: 4.1.0
+      jsonpointer: 5.0.1
+      langsmith: 0.3.67(openai@5.20.0(ws@8.18.2)(zod@3.25.76))
+      openapi-types: 12.1.3
+      p-retry: 4.6.2
+      uuid: 10.0.0
+      yaml: 2.8.1
+      zod: 3.25.76
+    optionalDependencies:
+      '@langchain/anthropic': 0.3.27(@langchain/core@0.3.75(openai@5.20.0(ws@8.18.2)(zod@3.25.76)))
+      axios: 1.11.0(debug@4.4.1)
+      handlebars: 4.7.8
+    transitivePeerDependencies:
+      - '@opentelemetry/api'
+      - '@opentelemetry/exporter-trace-otlp-proto'
+      - '@opentelemetry/sdk-trace-base'
+      - openai
+      - ws
+
+  langchain@0.3.33(@langchain/anthropic@0.3.28(@langchain/core@0.3.77(openai@5.22.0(ws@8.18.2)(zod@3.25.76))))(@langchain/core@0.3.75(openai@5.20.0(ws@8.18.2)(zod@3.25.76)))(axios@1.11.0)(handlebars@4.7.8)(openai@5.20.0(ws@8.18.2)(zod@3.25.76))(ws@8.18.2):
+    dependencies:
+      '@langchain/core': 0.3.75(openai@5.20.0(ws@8.18.2)(zod@3.25.76))
+      '@langchain/openai': 0.6.13(@langchain/core@0.3.75(openai@5.20.0(ws@8.18.2)(zod@3.25.76)))(ws@8.18.2)
+      '@langchain/textsplitters': 0.1.0(@langchain/core@0.3.75(openai@5.20.0(ws@8.18.2)(zod@3.25.76)))
+      js-tiktoken: 1.0.21
+      js-yaml: 4.1.0
+      jsonpointer: 5.0.1
+      langsmith: 0.3.67(openai@5.20.0(ws@8.18.2)(zod@3.25.76))
+      openapi-types: 12.1.3
+      p-retry: 4.6.2
+      uuid: 10.0.0
+      yaml: 2.8.1
+      zod: 3.25.76
+    optionalDependencies:
+      '@langchain/anthropic': 0.3.28(@langchain/core@0.3.77(openai@5.22.0(ws@8.18.2)(zod@3.25.76)))
+      axios: 1.11.0(debug@4.4.1)
+      handlebars: 4.7.8
+    transitivePeerDependencies:
+      - '@opentelemetry/api'
+      - '@opentelemetry/exporter-trace-otlp-proto'
+      - '@opentelemetry/sdk-trace-base'
+      - openai
+      - ws
+
+  langchain@0.3.33(@langchain/anthropic@0.3.28(@langchain/core@0.3.77(openai@5.22.0(ws@8.18.2)(zod@3.25.76))))(@langchain/core@0.3.77(openai@5.20.0(ws@8.18.2)(zod@3.25.76)))(axios@1.11.0)(handlebars@4.7.8)(openai@5.20.0(ws@8.18.2)(zod@3.25.76))(ws@8.18.2):
+    dependencies:
+      '@langchain/core': 0.3.77(openai@5.20.0(ws@8.18.2)(zod@3.25.76))
+      '@langchain/openai': 0.6.13(@langchain/core@0.3.77(openai@5.20.0(ws@8.18.2)(zod@3.25.76)))(ws@8.18.2)
+      '@langchain/textsplitters': 0.1.0(@langchain/core@0.3.77(openai@5.20.0(ws@8.18.2)(zod@3.25.76)))
+      js-tiktoken: 1.0.21
+      js-yaml: 4.1.0
+      jsonpointer: 5.0.1
+      langsmith: 0.3.67(openai@5.20.0(ws@8.18.2)(zod@3.25.76))
+      openapi-types: 12.1.3
+      p-retry: 4.6.2
+      uuid: 10.0.0
+      yaml: 2.8.1
+      zod: 3.25.76
+    optionalDependencies:
+      '@langchain/anthropic': 0.3.28(@langchain/core@0.3.77(openai@5.22.0(ws@8.18.2)(zod@3.25.76)))
+      axios: 1.11.0(debug@4.4.1)
+      handlebars: 4.7.8
+    transitivePeerDependencies:
+      - '@opentelemetry/api'
+      - '@opentelemetry/exporter-trace-otlp-proto'
+      - '@opentelemetry/sdk-trace-base'
+      - openai
+      - ws
+
+  langchain@0.3.33(@langchain/anthropic@0.3.28(@langchain/core@0.3.77(openai@5.22.0(ws@8.18.2)(zod@3.25.76))))(@langchain/core@0.3.77(openai@5.22.0(ws@8.18.2)(zod@3.25.76)))(axios@1.11.0)(handlebars@4.7.8)(openai@5.22.0(ws@8.18.2)(zod@3.25.76))(ws@8.18.2):
+    dependencies:
+      '@langchain/core': 0.3.77(openai@5.22.0(ws@8.18.2)(zod@3.25.76))
+      '@langchain/openai': 0.6.13(@langchain/core@0.3.77(openai@5.22.0(ws@8.18.2)(zod@3.25.76)))(ws@8.18.2)
+      '@langchain/textsplitters': 0.1.0(@langchain/core@0.3.77(openai@5.22.0(ws@8.18.2)(zod@3.25.76)))
+      js-tiktoken: 1.0.21
+      js-yaml: 4.1.0
+      jsonpointer: 5.0.1
+      langsmith: 0.3.67(openai@5.22.0(ws@8.18.2)(zod@3.25.76))
+      openapi-types: 12.1.3
+      p-retry: 4.6.2
+      uuid: 10.0.0
+      yaml: 2.8.1
+      zod: 3.25.76
+    optionalDependencies:
+      '@langchain/anthropic': 0.3.28(@langchain/core@0.3.77(openai@5.22.0(ws@8.18.2)(zod@3.25.76)))
+      axios: 1.11.0(debug@4.4.1)
+      handlebars: 4.7.8
+    transitivePeerDependencies:
+      - '@opentelemetry/api'
+      - '@opentelemetry/exporter-trace-otlp-proto'
+      - '@opentelemetry/sdk-trace-base'
+      - openai
+      - ws
+
   langsmith@0.3.67(openai@5.20.0(ws@8.18.2)(zod@3.25.76)):
     dependencies:
       '@types/uuid': 10.0.0
@@ -17582,6 +17997,18 @@ snapshots:
     optionalDependencies:
       openai: 5.20.0(ws@8.18.2)(zod@3.25.76)
 
+  langsmith@0.3.67(openai@5.22.0(ws@8.18.2)(zod@3.25.76)):
+    dependencies:
+      '@types/uuid': 10.0.0
+      chalk: 4.1.2
+      console-table-printer: 2.14.6
+      p-queue: 6.6.2
+      p-retry: 4.6.2
+      semver: 7.7.2
+      uuid: 10.0.0
+    optionalDependencies:
+      openai: 5.22.0(ws@8.18.2)(zod@3.25.76)
+
   lazy-val@1.0.5: {}
 
   leven@3.1.0: {}
@@ -18125,8 +18552,6 @@ snapshots:
 
   mkdirp@3.0.1: {}
 
-  moment@2.30.1: {}
-
   monaco-editor@0.52.2: {}
 
   motion-dom@12.23.12:
@@ -18367,6 +18792,21 @@ snapshots:
       is-docker: 2.2.1
       is-wsl: 2.2.0
 
+  openai@4.104.0(encoding@0.1.13)(ws@8.18.2)(zod@3.25.76):
+    dependencies:
+      '@types/node': 18.19.124
+      '@types/node-fetch': 2.6.13
+      abort-controller: 3.0.0
+      agentkeepalive: 4.6.0
+      form-data-encoder: 1.7.2
+      formdata-node: 4.4.1
+      node-fetch: 2.7.0(encoding@0.1.13)
+    optionalDependencies:
+      ws: 8.18.2
+      zod: 3.25.76
+    transitivePeerDependencies:
+      - encoding
+
   openai@5.12.2(ws@8.18.2)(zod@3.25.76):
     optionalDependencies:
       ws: 8.18.2
@@ -18377,6 +18817,11 @@ snapshots:
       ws: 8.18.2
       zod: 3.25.76
 
+  openai@5.22.0(ws@8.18.2)(zod@3.25.76):
+    optionalDependencies:
+      ws: 8.18.2
+      zod: 3.25.76
+
   openapi-types@12.1.3: {}
 
   optionator@0.9.4:
@@ -20150,8 +20595,6 @@ snapshots:
       '@types/react': 19.1.12
       react: 19.1.1
 
-  varint@6.0.0: {}
-
   vary@1.1.2: {}
 
   viem@2.31.0(typescript@5.9.2)(zod@3.25.76):
diff --git a/src/main/index.ts b/src/main/index.ts
index 0af0a9c..1820f18 100644
--- a/src/main/index.ts
+++ b/src/main/index.ts
@@ -1,8 +1,19 @@
 import { config as dotenvConfig } from 'dotenv';
-import { fileURLToPath } from 'node:url';
+import { fileURLToPath, pathToFileURL } from 'node:url';
 import { dirname, join } from 'node:path';
 import './init-logger';
-import { app, BrowserWindow, shell, ipcMain, nativeImage } from 'electron';
+import {
+  app,
+  BrowserWindow,
+  BrowserView,
+  shell,
+  ipcMain,
+  nativeImage,
+  type BrowserWindowConstructorOptions,
+  type Event as ElectronEvent,
+  type IpcMainInvokeEvent,
+  type WebContents,
+} from 'electron';
 import fs from 'node:fs/promises';
 import path from 'node:path';
 import started from 'electron-squirrel-startup';
@@ -13,6 +24,128 @@ import { UpdateService } from './services/update-service';
 
 const __filename = fileURLToPath(import.meta.url);
 const currentDir = dirname(__filename);
+const mainPreloadPath = join(currentDir, 'preload.cjs');
+const moonscapePreloadPath = join(currentDir, 'moonscape-preload.cjs');
+const moonscapePreloadFileUrl = pathToFileURL(moonscapePreloadPath).toString();
+
+const SAFE_PROTOCOL_REGEX = /^(https?:|ipfs:|ipns:|file:)/i;
+const HASHPACK_DEEP_LINK_REGEX = /^https?:\/\/link\.hashpack\.app\//i;
+const DEFAULT_URL = 'https://hedera.kiloscribe.com';
+
+type BrowserBounds = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
+type BrowserState = {
+  requestedUrl: string;
+  currentUrl: string;
+  title: string;
+  isLoading: boolean;
+  canGoBack: boolean;
+  canGoForward: boolean;
+  lastError: string | null;
+};
+
+type BrowserController = {
+  window: BrowserWindow;
+  view: BrowserView;
+  state: BrowserState;
+  bounds: BrowserBounds;
+  destroyed: boolean;
+  attached: boolean;
+};
+
+const browserControllers = new Map<number, BrowserController>();
+
+const attachBrowserView = (controller: BrowserController): void => {
+  if (controller.destroyed || controller.attached) {
+    return;
+  }
+  try {
+    controller.window.addBrowserView(controller.view);
+    controller.view.setBounds(controller.bounds);
+    controller.view.setAutoResize({ width: false, height: false, horizontal: false, vertical: false });
+    controller.attached = true;
+  } catch (error: unknown) {
+    electronLog.error('Failed to attach browser view', toError(error));
+  }
+};
+
+const detachBrowserView = (controller: BrowserController): void => {
+  if (controller.destroyed || !controller.attached) {
+    return;
+  }
+  try {
+    controller.window.removeBrowserView(controller.view);
+  } catch (error: unknown) {
+    electronLog.error('Failed to detach browser view', toError(error));
+  }
+  controller.attached = false;
+};
+
+const DEFAULT_BROWSER_STATE: BrowserState = {
+  requestedUrl: DEFAULT_URL,
+  currentUrl: DEFAULT_URL,
+  title: '',
+  isLoading: true,
+  canGoBack: false,
+  canGoForward: false,
+  lastError: null,
+};
+
+const sendBrowserState = (controller: BrowserController): void => {
+  if (controller.destroyed) {
+    return;
+  }
+  if (controller.window.isDestroyed()) {
+    return;
+  }
+  try {
+    controller.window.webContents.send('browser:state', controller.state);
+  } catch (error) {
+    electronLog.error('Failed to send browser state', toError(error));
+  }
+};
+
+const updateBrowserState = (
+  controller: BrowserController,
+  patch: Partial<BrowserState>
+): void => {
+  controller.state = { ...controller.state, ...patch };
+  sendBrowserState(controller);
+};
+
+type WindowOpenResponse = {
+  action: 'allow' | 'deny';
+  overrideBrowserWindowOptions?: BrowserWindowConstructorOptions;
+};
+
+const toError = (value: unknown): Error => {
+  if (value instanceof Error) {
+    return value;
+  }
+  const description = typeof value === 'string' ? value : JSON.stringify(value);
+  return new Error(description);
+};
+
+type NavigationHistory = {
+  canGoBack: () => boolean;
+  canGoForward: () => boolean;
+};
+
+const getNavigationHistory = (contents: WebContents): NavigationHistory | undefined => {
+  const candidate = (contents as unknown as { navigationHistory?: NavigationHistory }).navigationHistory;
+  if (!candidate) {
+    return undefined;
+  }
+  if (typeof candidate.canGoBack !== 'function' || typeof candidate.canGoForward !== 'function') {
+    return undefined;
+  }
+  return candidate;
+};
 
 const envPath = join(currentDir, '..', '..', '.env');
 dotenvConfig({ path: envPath });
@@ -25,8 +158,8 @@ try {
   app.setAboutPanelOptions({ applicationName: 'HOL Desktop' });
 
   process.title = 'HOL Desktop';
-} catch (e) {
-  electronLog.error('Error setting app metadata', e);
+} catch (error: unknown) {
+  electronLog.error('Error setting app metadata', toError(error));
 }
 
 if (started) {
@@ -39,9 +172,371 @@ let logger: {
   error: (message: string, ...args: unknown[]) => void;
 };
 
+const ensureBrowserController = (window: BrowserWindow): BrowserController => {
+  const existing = browserControllers.get(window.id);
+  if (existing && !existing.destroyed) {
+    return existing;
+  }
+
+  const view = new BrowserView({
+    webPreferences: {
+      preload: moonscapePreloadPath,
+      nodeIntegration: false,
+      contextIsolation: true,
+      sandbox: false,
+      webSecurity: false,
+    },
+  });
+
+  const controller: BrowserController = {
+    window,
+    view,
+    state: { ...DEFAULT_BROWSER_STATE },
+    bounds: { x: 0, y: 0, width: 0, height: 0 },
+    destroyed: false,
+    attached: false,
+  };
+
+  browserControllers.set(window.id, controller);
+  attachBrowserView(controller);
+
+  const { webContents } = view;
+
+  const updateNavigationFlags = (): void => {
+    try {
+      const history = getNavigationHistory(webContents);
+      updateBrowserState(controller, {
+        canGoBack: history ? history.canGoBack() : false,
+        canGoForward: history ? history.canGoForward() : false,
+      });
+    } catch {
+      updateBrowserState(controller, { canGoBack: false, canGoForward: false });
+    }
+  };
+
+  webContents.on('did-start-loading', (): void => {
+    updateBrowserState(controller, { isLoading: true, lastError: null });
+  });
+
+  webContents.on('did-stop-loading', (): void => {
+    updateNavigationFlags();
+    try {
+      const url = webContents.getURL();
+      const title = webContents.getTitle();
+      updateBrowserState(controller, {
+        isLoading: false,
+        currentUrl: url || controller.state.currentUrl,
+        title,
+      });
+    } catch {
+      updateBrowserState(controller, { isLoading: false });
+    }
+  });
+
+  webContents.on('dom-ready', (): void => {
+    updateNavigationFlags();
+    try {
+      const url = webContents.getURL();
+      const title = webContents.getTitle();
+      updateBrowserState(controller, {
+        currentUrl: url || controller.state.currentUrl,
+        title,
+      });
+    } catch {}
+  });
+
+  webContents.on('did-navigate', (_event, url): void => {
+    updateBrowserState(controller, {
+      currentUrl: url,
+      requestedUrl: url,
+      lastError: null,
+    });
+    updateNavigationFlags();
+  });
+
+  webContents.on('did-navigate-in-page', (_event, url): void => {
+    updateBrowserState(controller, {
+      currentUrl: url,
+      requestedUrl: url,
+      lastError: null,
+    });
+    updateNavigationFlags();
+  });
+
+  webContents.on('page-title-updated', (_event, title): void => {
+    updateBrowserState(controller, { title });
+  });
+
+  webContents.on(
+    'did-fail-load',
+    (_event, errorCode, errorDescription, _validatedURL, isMainFrame): void => {
+      if (!isMainFrame) {
+        return;
+      }
+      if (errorCode === -3) {
+        return;
+      }
+      updateBrowserState(controller, {
+        isLoading: false,
+        lastError: `${errorDescription || 'Navigation failed'} (${errorCode})`,
+      });
+      updateNavigationFlags();
+    }
+  );
+
+  webContents.setWindowOpenHandler(({ url }): WindowOpenResponse => {
+    if (!SAFE_PROTOCOL_REGEX.test(url) || HASHPACK_DEEP_LINK_REGEX.test(url)) {
+      void shell.openExternal(url).catch((): void => undefined);
+      return { action: 'deny' };
+    }
+    navigateController(controller, url);
+    return { action: 'deny' };
+  });
+
+  const blockUnsafeNavigation = (event: ElectronEvent, url: string): void => {
+    if (!SAFE_PROTOCOL_REGEX.test(url) || HASHPACK_DEEP_LINK_REGEX.test(url)) {
+      event.preventDefault();
+      void shell.openExternal(url).catch((): void => undefined);
+    }
+  };
+
+  webContents.on('will-navigate', blockUnsafeNavigation);
+  webContents.on('will-redirect', blockUnsafeNavigation);
+
+  const cleanup = (): void => {
+    if (controller.destroyed) {
+      return;
+    }
+    controller.destroyed = true;
+    detachBrowserView(controller);
+    browserControllers.delete(window.id);
+  };
+
+  window.on('closed', cleanup);
+
+  window.on('resize', () => {
+    if (controller.bounds.width > 0 && controller.bounds.height > 0) {
+      try {
+        view.setBounds(controller.bounds);
+      } catch (error: unknown) {
+        electronLog.error('Failed to reapply browser bounds', toError(error));
+      }
+    }
+  });
+
+  void webContents
+    .loadURL(DEFAULT_URL)
+    .catch((error: unknown) => electronLog.error('Failed to load initial browser URL', toError(error)));
+
+  sendBrowserState(controller);
+
+  return controller;
+};
+
+const getControllerForEvent = (event: IpcMainInvokeEvent): BrowserController | null => {
+  const window = BrowserWindow.fromWebContents(event.sender);
+  if (!window) {
+    return null;
+  }
+  const controller = browserControllers.get(window.id);
+  if (controller && !controller.destroyed) {
+    return controller;
+  }
+  return null;
+};
+
+const withController = <T>(
+  event: IpcMainInvokeEvent,
+  handler: (controller: BrowserController) => T
+): T => {
+  let controller = getControllerForEvent(event);
+  if (!controller) {
+    const window = BrowserWindow.fromWebContents(event.sender);
+    if (!window) {
+      throw new Error('No browser window found for sender');
+    }
+    controller = ensureBrowserController(window);
+  }
+  return handler(controller);
+};
+
+const navigateController = (controller: BrowserController, url: string): void => {
+  if (!SAFE_PROTOCOL_REGEX.test(url) || HASHPACK_DEEP_LINK_REGEX.test(url)) {
+    void shell.openExternal(url).catch((): void => undefined);
+    return;
+  }
+  updateBrowserState(controller, {
+    requestedUrl: url,
+    isLoading: true,
+    lastError: null,
+  });
+  void controller.view.webContents
+    .loadURL(url)
+    .catch((error: unknown) => {
+      electronLog.error('Failed to load URL', { url, error: toError(error) });
+      updateBrowserState(controller, {
+        isLoading: false,
+        lastError: 'Navigation failed',
+      });
+    });
+};
+
+const reloadController = (controller: BrowserController): void => {
+  try {
+    controller.view.webContents.reload();
+    updateBrowserState(controller, { isLoading: true, lastError: null });
+  } catch (error: unknown) {
+    electronLog.error('Failed to reload browser view', toError(error));
+  }
+};
+
+const goBackController = (controller: BrowserController): void => {
+  try {
+    const history = getNavigationHistory(controller.view.webContents);
+    if (history ? history.canGoBack() : controller.view.webContents.canGoBack()) {
+      controller.view.webContents.goBack();
+    }
+  } catch (error: unknown) {
+    electronLog.error('Failed to go back', toError(error));
+  }
+};
+
+const goForwardController = (controller: BrowserController): void => {
+  try {
+    const history = getNavigationHistory(controller.view.webContents);
+    if (history ? history.canGoForward() : controller.view.webContents.canGoForward()) {
+      controller.view.webContents.goForward();
+    }
+  } catch (error: unknown) {
+    electronLog.error('Failed to go forward', toError(error));
+  }
+};
+
+const setBoundsForController = (controller: BrowserController, bounds: BrowserBounds): void => {
+  controller.bounds = bounds;
+  if (!controller.attached) {
+    return;
+  }
+  try {
+    controller.view.setBounds(bounds);
+  } catch (error: unknown) {
+    electronLog.error('Failed to set browser bounds', { bounds, error: toError(error) });
+  }
+};
+
+ipcMain.handle('paths:get', async () => ({
+  moonscapePreload: moonscapePreloadFileUrl,
+}));
+
+ipcMain.on('moonscape:open-external', (_event, url) => {
+  if (typeof url !== 'string' || !url.trim()) {
+    electronLog.error('Invalid moonscape external URL received');
+    return;
+  }
+  try {
+    shell.openExternal(url);
+  } catch (error) {
+    if (logger) {
+      logger.error('Failed to open moonscape external URL', toError(error));
+    } else {
+      electronLog.error('Failed to open moonscape external URL', toError(error));
+    }
+  }
+});
+
+ipcMain.handle('browser:navigate', (event, url: string): Promise<unknown> | unknown =>
+  withController(event, (controller) => navigateController(controller, url))
+);
+
+ipcMain.handle('browser:reload', (event): Promise<unknown> | unknown =>
+  withController(event, (controller) => reloadController(controller))
+);
+
+ipcMain.handle('browser:go-back', (event): Promise<unknown> | unknown =>
+  withController(event, (controller) => goBackController(controller))
+);
+
+ipcMain.handle('browser:go-forward', (event): Promise<unknown> | unknown =>
+  withController(event, (controller) => goForwardController(controller))
+);
+
+ipcMain.handle(
+  'browser:set-bounds',
+  (event, bounds: BrowserBounds): Promise<unknown> | unknown =>
+    withController(event, (controller) => setBoundsForController(controller, bounds))
+);
+
+ipcMain.handle('browser:get-state', (event): Promise<BrowserState> | BrowserState =>
+  withController(event, (controller) => ({ ...controller.state }))
+);
+
+ipcMain.handle('browser:execute-js', (event, script: string): Promise<unknown> =>
+  withController(event, async (controller) => {
+    try {
+      const result = await controller.view.webContents.executeJavaScript(script, true);
+      return result;
+    } catch (error: unknown) {
+      const formatted = toError(error);
+      electronLog.error('Failed to execute browser script', formatted);
+      throw formatted;
+    }
+  })
+);
+
+ipcMain.handle('browser:open-devtools', (event): Promise<unknown> | unknown =>
+  withController(event, (controller) => {
+    try {
+      controller.view.webContents.openDevTools({ mode: 'detach' });
+    } catch (error: unknown) {
+      electronLog.error('Failed to open browser devtools', toError(error));
+    }
+  })
+);
+
+ipcMain.handle('browser:attach', (event): Promise<unknown> | unknown =>
+  withController(event, (controller) => attachBrowserView(controller))
+);
+
+ipcMain.handle('browser:detach', (event): Promise<unknown> | unknown =>
+  withController(event, (controller) => detachBrowserView(controller))
+);
+
+app.on('web-contents-created', (_event, contents) => {
+  if (contents.getType() !== 'webview') {
+    return;
+  }
+
+  contents.setWindowOpenHandler(({ url }) => {
+    if (!SAFE_PROTOCOL_REGEX.test(url) || HASHPACK_DEEP_LINK_REGEX.test(url)) {
+      void shell.openExternal(url).catch((): void => undefined);
+      return { action: 'deny' };
+    }
+    const host = contents.hostWebContents
+      ? BrowserWindow.fromWebContents(contents.hostWebContents)
+      : null;
+    const controller = host ? browserControllers.get(host.id) : undefined;
+    if (controller && !controller.destroyed) {
+      navigateController(controller, url);
+      return { action: 'deny' };
+    }
+    return { action: 'deny' };
+  });
+
+  const interceptNavigation = (event: ElectronEvent, url: string) => {
+    if (!SAFE_PROTOCOL_REGEX.test(url) || HASHPACK_DEEP_LINK_REGEX.test(url)) {
+      event.preventDefault();
+      void shell.openExternal(url).catch((): void => undefined);
+    }
+  };
+
+  contents.on('will-navigate', interceptNavigation);
+  contents.on('will-redirect', interceptNavigation);
+});
+
 function createWindow(): void {
   logger.info('Creating main window...');
-  logger.info('Preload path:', join(currentDir, 'preload.cjs'));
+  logger.info('Preload path:', mainPreloadPath);
+  logger.info('Moonscape preload path:', moonscapePreloadPath);
 
   const primaryIconPath = app.isPackaged
     ? join(currentDir, '../../assets/hol-dock.png')
@@ -67,7 +562,8 @@ function createWindow(): void {
       nodeIntegrationInWorker: true,
       sandbox: false,
       webSecurity: false,
-      preload: join(currentDir, 'preload.cjs'),
+      webviewTag: true,
+      preload: mainPreloadPath,
       webgl: true,
       plugins: true,
       enableWebSQL: false,
@@ -161,13 +657,15 @@ function createWindow(): void {
         ];
         callback({ responseHeaders });
       } catch (e) {
-        try { electronLog.warn('CSP onHeadersReceived error', e); } catch {}
+        try { electronLog.warn('CSP onHeadersReceived error', toError(e)); } catch {}
         callback({ cancel: false, responseHeaders: details.responseHeaders });
       }
     });
-  } catch (e) {
-    electronLog.error('Failed to register session handlers', e);
-  }
+} catch (error: unknown) {
+  electronLog.error('Failed to register session handlers', toError(error));
+}
+
+  ensureBrowserController(mainWindow);
 
   mainWindow.show();
   mainWindow.focus();
@@ -255,8 +753,8 @@ app.on('ready', async () => {
         customUserData
       );
     }
-  } catch (e) {
-    electronLog.warn('Failed to set custom userData path', e);
+  } catch (error) {
+    electronLog.warn('Failed to set custom userData path', toError(error));
   }
 
   if (process.env.SMOKE_DB === '1') {
@@ -271,7 +769,7 @@ app.on('ready', async () => {
       try {
         await fs.mkdir(userData, { recursive: true });
       } catch (mkErr) {
-        electronLog.warn('Failed to create userData dir for smoke-db', mkErr);
+        electronLog.warn('Failed to create userData dir for smoke-db', toError(mkErr));
       }
       const outPath = path.join(userData, 'smoke-db.json');
       await fs.writeFile(
@@ -286,11 +784,11 @@ app.on('ready', async () => {
         const outPath = path.join(userData, 'smoke-db.json');
         try {
           await fs.mkdir(userData, { recursive: true });
-        } catch (mkErr) {
-          electronLog.warn(
-            'Failed to create userData dir for smoke-db (error path)',
-            mkErr
-          );
+      } catch (mkErr) {
+        electronLog.warn(
+          'Failed to create userData dir for smoke-db (error path)',
+          toError(mkErr)
+        );
         }
         await fs.writeFile(
           outPath,
@@ -357,6 +855,9 @@ app.on('window-all-closed', () => {
 
 app.on('web-contents-created', (_, contents) => {
   contents.on('will-navigate', (event) => {
-    event.preventDefault();
+    const contentType = contents.getType?.() || 'window';
+    if (contentType === 'window') {
+      event.preventDefault();
+    }
   });
 });
diff --git a/src/main/services/initialization-service.ts b/src/main/services/initialization-service.ts
index 24ff7cc..174dd74 100644
--- a/src/main/services/initialization-service.ts
+++ b/src/main/services/initialization-service.ts
@@ -86,12 +86,27 @@ export class InitializationService implements IInitializationService {
         },
       });
 
+      SignerProviderRegistry.setWalletInfoResolver(async () => {
+        const wallet = getCurrentWallet();
+        if (!wallet) {
+          return null;
+        }
+        return {
+          accountId: wallet.accountId,
+          network: wallet.network,
+        };
+      });
+
+      SignerProviderRegistry.setWalletExecutor(async (base64, network) => {
+        const { transactionId } = await executeWithWallet(base64, network);
+        return { transactionId };
+      });
+
       try {
         SignerProviderRegistry.setStartHCSDelegate(async (op, request, network) => {
           return await startHCSOperationViaLocalBuilder(op, request, network);
         });
       } catch {}
-
     } catch {}
   }
 
diff --git a/src/main/services/safe-conversational-agent.ts b/src/main/services/safe-conversational-agent.ts
index 5f7ef04..c58c5c5 100644
--- a/src/main/services/safe-conversational-agent.ts
+++ b/src/main/services/safe-conversational-agent.ts
@@ -12,13 +12,6 @@ import type {
 } from '@hashgraphonline/conversational-agent';
 import { ChatHistory } from '../interfaces/services';
 
-interface MCPServerConfiguration {
-  name: string;
-  enabled: boolean;
-  autoConnect?: boolean;
-  config?: Record<string, unknown>;
-}
-
 /**
  * Configuration interface extending ConversationalAgentOptions with entity memory options
  */
@@ -34,7 +27,10 @@ export type AgentConfig = {
   mcpServers?: LibMCPServerConfig[];
   verbose?: boolean;
   disableLogging?: boolean;
-  walletExecutor?: (base64: string, network: 'mainnet' | 'testnet') => Promise<{ transactionId: string }>;
+  walletExecutor?: (
+    base64: string,
+    network: 'mainnet' | 'testnet'
+  ) => Promise<{ transactionId: string }>;
 
   /** Enable entity memory functionality */
   entityMemoryEnabled?: boolean;
diff --git a/src/preload/index.ts b/src/preload/index.ts
index dbd44d5..3b1e856 100644
--- a/src/preload/index.ts
+++ b/src/preload/index.ts
@@ -1,5 +1,11 @@
 import { contextBridge, ipcRenderer } from 'electron';
 
+interface RendererPaths {
+  moonscapePreload?: string;
+}
+
+const cachedPaths: RendererPaths = {};
+
 const electronAPI = {
   invoke: (channel: string, ...args: unknown[]) => {
     return ipcRenderer.invoke(channel, ...args);
@@ -148,6 +154,35 @@ const electronBridge = {
 
   openExternal: (url: string) => ipcRenderer.invoke('open-external', url),
 
+  getPaths: async () => {
+    const result = (await ipcRenderer.invoke('paths:get')) as RendererPaths;
+    cachedPaths.moonscapePreload =
+      typeof result?.moonscapePreload === 'string' ? result.moonscapePreload : undefined;
+    return { ...cachedPaths };
+  },
+  paths: cachedPaths,
+
+  browser: {
+    navigate: (url: string) => ipcRenderer.invoke('browser:navigate', url),
+    reload: () => ipcRenderer.invoke('browser:reload'),
+    goBack: () => ipcRenderer.invoke('browser:go-back'),
+    goForward: () => ipcRenderer.invoke('browser:go-forward'),
+    setBounds: (bounds: { x: number; y: number; width: number; height: number }) =>
+      ipcRenderer.invoke('browser:set-bounds', bounds),
+    getState: () => ipcRenderer.invoke('browser:get-state'),
+    executeJavaScript: (script: string) => ipcRenderer.invoke('browser:execute-js', script),
+    openDevTools: () => ipcRenderer.invoke('browser:open-devtools'),
+    attach: () => ipcRenderer.invoke('browser:attach'),
+    detach: () => ipcRenderer.invoke('browser:detach'),
+    onState: (listener: (state: unknown) => void) => {
+      const handler = (_event: unknown, state: unknown) => {
+        listener(state);
+      };
+      ipcRenderer.on('browser:state', handler);
+      return () => ipcRenderer.removeListener('browser:state', handler);
+    },
+  },
+
   getAppVersion: () => ipcRenderer.invoke('get-app-version'),
   checkForUpdates: () => ipcRenderer.invoke('check-for-updates'),
   downloadUpdate: () => ipcRenderer.invoke('download-update'),
diff --git a/src/preload/moonscape-preload.ts b/src/preload/moonscape-preload.ts
new file mode 100644
index 0000000..f7ebf98
--- /dev/null
+++ b/src/preload/moonscape-preload.ts
@@ -0,0 +1,102 @@
+import { contextBridge, ipcRenderer } from 'electron';
+
+const ALLOWED_SCHEMES = [
+  'https:',
+  'http:',
+  'ipfs:',
+  'ipns:',
+  'file:',
+  'hashpack:',
+  'hashconnect:',
+  'hedera-wallet-connect:',
+  'wc:',
+];
+const DEEPLINK_SCHEMES = ['hashpack:', 'hashconnect:', 'hedera-wallet-connect:', 'wc:'];
+
+const sanitizeUrl = (rawUrl: string): string => {
+  try {
+    const url = new URL(rawUrl);
+    if (ALLOWED_SCHEMES.includes(url.protocol)) {
+      return url.toString();
+    }
+    return rawUrl;
+  } catch (error) {
+    return rawUrl;
+  }
+};
+
+const moonscapeBridge = {
+  openExternal: (rawUrl: string) => {
+    const sanitizedUrl = sanitizeUrl(rawUrl);
+    ipcRenderer.send('moonscape:open-external', sanitizedUrl);
+  },
+};
+
+const isDeepLink = (value: string): boolean => {
+  if (!value) {
+    return false;
+  }
+  try {
+    const parsed = new URL(value);
+    return DEEPLINK_SCHEMES.includes(parsed.protocol.toLowerCase());
+  } catch (error) {
+    const lowered = value.toLowerCase();
+    return DEEPLINK_SCHEMES.some((scheme) => lowered.startsWith(scheme));
+  }
+};
+
+const openDeepLink = (value: string): boolean => {
+  if (!isDeepLink(value)) {
+    return false;
+  }
+  moonscapeBridge.openExternal(value);
+  return true;
+};
+
+const installDeepLinkInterceptors = () => {
+  const originalOpen = window.open.bind(window);
+  window.open = (url?: string | URL, target?: string, features?: string | undefined) => {
+    const candidate = typeof url === 'string' ? url : url?.toString();
+    if (candidate && openDeepLink(candidate)) {
+      return null;
+    }
+    return originalOpen(url as string | URL | undefined, target, features) ?? null;
+  };
+
+  const originalAssign = window.location.assign.bind(window.location);
+  window.location.assign = (url: string | URL) => {
+    const candidate = typeof url === 'string' ? url : url.toString();
+    if (candidate && openDeepLink(candidate)) {
+      return;
+    }
+    originalAssign(url);
+  };
+
+  const originalReplace = window.location.replace.bind(window.location);
+  window.location.replace = (url: string | URL) => {
+    const candidate = typeof url === 'string' ? url : url.toString();
+    if (candidate && openDeepLink(candidate)) {
+      return;
+    }
+    originalReplace(url);
+  };
+
+  const hrefDescriptor = Object.getOwnPropertyDescriptor(window.Location.prototype, 'href');
+  if (hrefDescriptor?.set && hrefDescriptor.get) {
+    Object.defineProperty(window.location, 'href', {
+      configurable: true,
+      enumerable: true,
+      get: hrefDescriptor.get.bind(window.location),
+      set: (value: string) => {
+        if (openDeepLink(value)) {
+          return;
+        }
+        hrefDescriptor.set!.call(window.location, value);
+      },
+    });
+  }
+};
+
+contextBridge.exposeInMainWorld('moonscape', moonscapeBridge);
+
+installDeepLinkInterceptors();
diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx
index 87d4d56..4c650e0 100644
--- a/src/renderer/App.tsx
+++ b/src/renderer/App.tsx
@@ -1,18 +1,5 @@
 import React from 'react';
-import { HashRouter as Router, Routes, Route } from 'react-router-dom';
-import Layout from './components/Layout';
-import ChatPage from './pages/ChatPage';
-import MCPPage from './pages/MCPPage';
-import SettingsPage from './pages/SettingsPage';
-import PluginsPage from './pages/PluginsPage';
-import BlockTesterPage from './pages/BlockTesterPage';
-import ToolsPage from './pages/ToolsPage';
-import { EntityManagerPage } from './pages/entity-manager-page';
-import { HCS10ProfileRegistration } from './pages/HCS10ProfileRegistration';
-import AcknowledgementsPage from './pages/AcknowledgementsPage';
-import DashboardPage from './pages/DashboardPage';
-import AgentDiscoveryPage from './pages/AgentDiscoveryPage';
-import ConnectionsPage from './pages/ConnectionsPage';
+import { HashRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
 import { StoreProvider } from './providers/StoreProvider';
 import { ConfigInitProvider } from './providers/ConfigInitProvider';
 import { SessionInitProvider } from './providers/SessionInitProvider';
@@ -24,71 +11,41 @@ import { ErrorBoundary } from './components/ErrorBoundary';
 import { LegalGuard } from './components/ui/LegalGuard';
 import { Toaster } from './components/ui/sonner';
 import { HCS10Provider } from './contexts/HCS10Context';
+import DesktopShellRouter from './components/shell/DesktopShellRouter';
+import BuilderStudioRoutes from './components/shell/BuilderStudioRouter';
 
-interface AppProps {}
-
-const App: React.FC<AppProps> = () => {
+const App: React.FC = () => {
   return (
     <ErrorBoundary>
-      <ConfigInitProvider>
-        <SessionInitProvider>
-          <WalletInitProvider>
-            <LegalGuard>
-              <Router>
-                <MCPInitProvider>
-                  <HCS10Provider>
-                    <KeyboardShortcutsProvider>
-                      <Layout>
+      <StoreProvider>
+        <ConfigInitProvider>
+          <SessionInitProvider>
+            <WalletInitProvider>
+              <LegalGuard>
+                <Router>
+                  <MCPInitProvider>
+                    <HCS10Provider>
+                      <KeyboardShortcutsProvider>
                         <Routes>
-                          <Route path='/' element={<DashboardPage />} />
-                          <Route
-                            path='/dashboard'
-                            element={<DashboardPage />}
-                          />
-                          <Route
-                            path='/chat/:agentId?'
-                            element={<ChatPage />}
-                          />
-                          <Route
-                            path='/discover'
-                            element={<AgentDiscoveryPage />}
-                          />
-                          <Route
-                            path='/connections'
-                            element={<ConnectionsPage />}
-                          />
-                          <Route path='/mcp' element={<MCPPage />} />
-                          <Route path='/plugins' element={<PluginsPage />} />
-                          <Route path='/tools' element={<ToolsPage />} />
-                          <Route
-                            path='/entity-manager'
-                            element={<EntityManagerPage />}
-                          />
-                          <Route
-                            path='/block-tester'
-                            element={<BlockTesterPage />}
-                          />
-                          <Route
-                            path='/hcs10-profile'
-                            element={<HCS10ProfileRegistration />}
-                          />
-                          <Route path='/settings' element={<SettingsPage />} />
-                          <Route
-                            path='/acknowledgements'
-                            element={<AcknowledgementsPage />}
-                          />
+                          <Route path='/*' element={<DesktopShellRouter />} />
+                          <Route path='/studio/*' element={<BuilderStudioRoutes />} />
+                          <Route path='/dashboard' element={<Navigate to='/builder/dashboard' replace />} />
+                          <Route path='/entity-manager' element={<Navigate to='/builder/entity-manager' replace />} />
+                          <Route path='/block-tester' element={<Navigate to='/builder/block-tester' replace />} />
+                          <Route path='/acknowledgements' element={<Navigate to='/builder/acknowledgements' replace />} />
+                          <Route path='*' element={<Navigate to='/' replace />} />
                         </Routes>
-                      </Layout>
-                      <NotificationContainer />
-                      <Toaster />
-                    </KeyboardShortcutsProvider>
-                  </HCS10Provider>
-                </MCPInitProvider>
-              </Router>
-            </LegalGuard>
-          </WalletInitProvider>
-        </SessionInitProvider>
-      </ConfigInitProvider>
+                        <NotificationContainer />
+                        <Toaster />
+                      </KeyboardShortcutsProvider>
+                    </HCS10Provider>
+                  </MCPInitProvider>
+                </Router>
+              </LegalGuard>
+            </WalletInitProvider>
+          </SessionInitProvider>
+        </ConfigInitProvider>
+      </StoreProvider>
     </ErrorBoundary>
   );
 };
diff --git a/src/renderer/components/brand/SaucerSwapLogo.tsx b/src/renderer/components/brand/SaucerSwapLogo.tsx
new file mode 100644
index 0000000..758ce83
--- /dev/null
+++ b/src/renderer/components/brand/SaucerSwapLogo.tsx
@@ -0,0 +1,413 @@
+import * as React from 'react';
+
+const SaucerSwapLogo: React.FC<React.SVGProps<SVGSVGElement>> = ({
+  className,
+  ...props
+}) => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    xmlnsXlink='http://www.w3.org/1999/xlink'
+    id='Layer_1'
+    x='0px'
+    y='0px'
+    viewBox='0 0 1326.88 1436.17'
+    style={{
+      enableBackground: 'new 0 0 1326.88 1436.17',
+    }}
+    xmlSpace='preserve'
+    className={className}
+    {...props}
+  >
+    <style type='text/css'>
+      {
+        '\n\t.st0{fill:#063B2A;}\n\t.st1{fill:#02523C;}\n\t.st2{fill:url(#SVGID_1_);}\n\t.st3{fill:#03623A;}\n\t.st4{fill:url(#SVGID_00000145763791014282550040000006690118771670394552_);}\n\t.st5{fill:#218139;}\n\t.st6{fill:#05382A;}\n\t.st7{fill:#67FE57;}\n\t.st8{fill:#CAEFA3;}\n\t.st9{fill:#80D65A;}\n\t.st10{fill:none;}\n\t.st11{fill:#30A038;}\n\t.st12{fill:#1F7B31;}\n\t.st13{fill:#1F7C30;}\n\t.st14{fill:url(#SVGID_00000123423052424660303250000001827755942990003088_);}\n\t.st15{fill:url(#SVGID_00000046338538940799447600000007469067351468578694_);}\n\t.st16{fill:#FFFFFF;}\n\t.st17{fill:#33352F;}\n\t.st18{fill:#1B7A30;}\n\t.st19{fill:#203A2E;}\n\t.st20{fill:#141F1E;}\n\t.st21{fill:#42BA3A;}\n\t.st22{fill:#1E8A33;}\n\t.st23{fill:#234B35;}\n\t.st24{fill:#2F7245;}\n'
+      }
+    </style>
+    <g id='_x32_'>
+      <path
+        className='st0'
+        d='M1312.87,121.7c-16.65,14.13-34.52,7.99-46.64,1.73c-5.01-2.58-9.05-5.2-11.61-6.38   c-8.75-4.1-29.08,1.09-29.08,1.09c-40.11,5.83-106.47,43.39-109.93,56.15c-0.3,1.15-0.55,2.22-0.67,3.22   c-1.55,10.27,4.5,13.92,4.5,13.92c114.49,136.36,109.2,202.63,109.2,202.63l3.01,21.88l-0.27,28.71l6.32,59.07   c0,0,23.76,110.48,36.89,143.29c13.13,32.82,22.42,108.84,22.42,108.84c10.94,123.6-74.56,179.21-74.56,179.21l6.75,16.23   l2.19,45.76c3.8,40.14-20.57,82.49-41.14,115.25c-37.77,60.1-82.65,113.82-131.66,163.77c-49.04,49.95-102.18,96.11-156.45,141.01   c-23.67,17.38-50.68,21.03-78.3,18.26c-0.06,0-0.09-0.03-0.15-0.03c-32.48-3.22-65.84-15.28-95.65-24.19   c-24.06-7.2-47.76-15.59-71.07-24.98c-70.28-28.32-141.96-63.93-200.93-112.09c-56.03-45.73-93.89-101.94-130.35-162.71   c-37.04-61.74-57.52-135.76-79.06-203.94c-14.37-45.36-27.16-91.15-40.84-136.7c-24.73-82.34-34.79-167.75-39.8-253.31   c-2.55-43.75,5.47-98.45,26.62-156.42c21.15-57.97,59.25-119.5,69.37-130.44c10.12-10.94,1.09-15.31,1.09-15.31   c-12.31-14.77-64.54-63.72-64.54-63.72c-44.3-44.03-117.86-43.75-117.86-43.75c-16.13,32.27-32.82,34.73-32.82,34.73   c-31.17,10.39-46.49-33.91-47.58-38.83c-0.09-0.49-0.18-1.4-0.21-2.67c-0.03-0.09-0.03-0.21-0.03-0.3   c-0.36-12.52,3.25-56.48,34.15-64.84c34.46-9.3,46.49,27.62,46.49,27.62h5.1c18.93-0.21,38.56-2.04,57.27,1.03   c41.6,6.87,82.74,19.35,119.11,41.05c17.26,10.3,31.63,24.88,48.77,35.03c6.71,3.95,11.73,5.44,15.41,5.8   c6.29,0.58,8.66-2.25,8.66-2.25l13.67-13.95c0,0,80.94-75.84,189.6-107.93c10.21-3.01,20.24-5.68,30.11-8.05   c95.26-22.73,176.11-15.77,262.67,4.04c95.53,21.88,187.41,76.93,210.75,101.73c23.34,24.79,37.01,14.04,37.01,14.04   c65.63-50.86,161.89-45.12,161.89-45.12s-0.27-13.67,12.31-21.6s31.99-10.66,53.32,1.09   C1327.64,80.14,1336.39,101.74,1312.87,121.7z'
+      />
+      <g>
+        <path
+          className='st1'
+          d='M1222.45,935.05l6.75,16.23l-35,12.4c0,0,29.53-33.54,39.01-49.59c9.48-16.04,67.82-92.61,48.86-218.46    c-18.96-125.85-116.68-170.94-116.68-170.94c33.18-6.2,67.45,22.24,67.45,22.24L1192,462.7c35.37-6.2,39.1-27.62,39.1-27.62    l-1.91-22.15c-17.5-126.34-165.17-257.6-165.17-257.6c-30.63-24.06-202.36-166.26-420.03-106.1    C426.32,109.39,341,306.82,341,306.82c-14.77,22.42-24.06,65.08-24.06,65.08c-10.94,77.12,70.01,80.4,70.01,80.4l-38.65,79.67    c62.71-36.46,92.25-18.96,92.25-18.96c-131.26,78.03-143.6,199.44-143.6,199.44C280.53,879.81,446,994.3,446,994.3    s-42.2,6.99-66.66-12.49c2.83,2.25,4.53,16.29,5.62,19.84c5.38,17.35,11.55,34.46,18.41,51.29    c19.78,48.58,45.39,95.95,80.4,135.33c26.4,29.75,59.28,51.35,91.85,73.56c0,4.04,29.23,19.93,33.42,22.79    c11.88,8.08,23.76,16.19,35.64,24.31c24.91,16.98,51.35,33.24,74.08,52.99c12.12,10.57,24.34,20.63,37.98,29.26    c43.18,27.29,95.35,40.96,145.39,25.89c-23.67,17.38-50.68,21.03-78.3,18.26c-0.06,0-0.09-0.03-0.15-0.03    c-107.17-19.45-273.03-104.83-273.03-104.83c-245.75-142.2-243.01-387.58-243.01-387.58c19.69,11.49,55.24,13.13,55.24,13.13    c-121.42-126.89-106.1-185.95-106.1-253.77c0-67.82,41.2-151.5,41.2-151.5c-13.13,5.83-23.7,0-23.7,0    c-19.78-21.33,14.89-58.49,18.32-62.08c-2.89,2.55-29.26,25.31-47.86,13.95c-19.69-12.03-25.71-70.01-25.71-70.01    c-1.73-16.95-1.31-34,0.97-50.89c5.17-38.77,20.51-71.46,41.81-103.73c10-15.13,17.9-31.63,27.8-46.85    c10.76-16.47,22.39-32.36,34.82-47.61c34.24-42.02,74.53-79.27,119.81-109.2c35.88-23.73,81-45.61,124.12-60.13    c95.26-22.73,176.11-15.77,262.67,4.04c95.53,21.88,187.41,76.93,210.75,101.73c23.33,24.79,37.01,14.04,37.01,14.04    c65.63-50.86,161.89-45.12,161.89-45.12s-1.37,5.59,2.52,13.37c-2.28-0.03-90.09-0.43-136.88,63.66c0,0-2.04,8.93,8.63,11.61    c-1.55,10.27,4.5,13.92,4.5,13.92c114.49,136.36,109.2,202.63,109.2,202.63l3.01,21.88l-0.27,28.71l6.32,59.07    c0,0,23.76,110.48,36.89,143.29c13.13,32.82,22.42,108.84,22.42,108.84C1307.95,879.45,1222.45,935.05,1222.45,935.05z'
+        />
+        <linearGradient
+          id='SVGID_1_'
+          gradientUnits='userSpaceOnUse'
+          x1={1106.1613}
+          y1={139.8773}
+          x2={1266.229}
+          y2={139.8773}
+        >
+          <stop
+            offset={0}
+            style={{
+              stopColor: '#02513B',
+            }}
+          />
+          <stop
+            offset={0.1908}
+            style={{
+              stopColor: '#04573B',
+            }}
+          />
+          <stop
+            offset={0.4348}
+            style={{
+              stopColor: '#0B663B',
+            }}
+          />
+          <stop
+            offset={0.7078}
+            style={{
+              stopColor: '#16813A',
+            }}
+          />
+          <stop
+            offset={1}
+            style={{
+              stopColor: '#26A53A',
+            }}
+          />
+        </linearGradient>
+        <path
+          className='st2'
+          d='M1266.23,123.43c-5.01-2.58-9.05-5.2-11.61-6.38c-8.75-4.1-29.08,1.09-29.08,1.09    c-40.11,5.83-106.47,43.39-109.93,56.15c-0.3,1.15-0.55,2.22-0.67,3.22c-10.66-2.67-8.63-11.61-8.63-11.61    c46.79-64.08,134.6-63.69,136.88-63.66C1246.33,108.51,1252.86,116.13,1266.23,123.43z'
+        />
+        <path
+          className='st3'
+          d='M1306.31,68.37c-21.33-11.76-40.75-9.02-53.32-1.09c-12.58,7.93-12.31,21.6-12.31,21.6s-1.37,5.59,2.52,13.37    c3.13,6.26,9.66,13.89,23.03,21.18c12.12,6.26,29.99,12.4,46.64-1.73C1336.39,101.73,1327.64,80.13,1306.31,68.37z     M1290.17,109.66c-9.18-1.7-19.57-6.59-25.46-14.01c-3.01-3.8-4.56-8.42-3.28-13.19c1.43-5.41,4.65-8.66,8.75-10.57    c5.38-2.55,12.28-2.77,18.53-2.55c9.87,0.33,22.97,2.77,26.07,13.79C1320.53,103.37,1303.57,112.12,1290.17,109.66z'
+        />
+        <path
+          className='st0'
+          d='M823.68,1435.3c-32.48-3.22-65.84-15.28-95.65-24.19c-24.06-7.2-47.76-15.59-71.07-24.98    c-70.28-28.32-141.96-63.93-200.93-112.09c-56.03-45.73-93.89-101.94-130.35-162.71c-37.04-61.74-57.52-135.76-79.06-203.94    c-14.37-45.36-27.16-91.15-40.84-136.7c-24.73-82.34-34.79-167.75-39.8-253.31c-2.55-43.75,5.47-98.45,26.62-156.42    s59.25-119.5,69.37-130.44c10.12-10.94,1.09-15.31,1.09-15.31c-12.31-14.77-64.54-63.72-64.54-63.72    c-44.3-44.03-117.86-43.75-117.86-43.75c1.06-3.07,1.76-6.29,2.22-9.54c0,0,108.26-14.52,205.61,89.94    c0,0,20.96-36.01,37.83-41.78c6.29,0.58,8.66-2.25,8.66-2.25l13.67-13.95c0,0,80.94-75.84,189.6-107.93    c10.21-3.01,20.24-5.68,30.11-8.05c-43.12,14.52-88.24,36.4-124.12,60.13c-45.27,29.93-85.56,67.18-119.81,109.2    c-12.43,15.25-24.06,31.14-34.82,47.61c-9.91,15.22-17.8,31.72-27.8,46.85c-21.3,32.27-36.64,64.96-41.81,103.73    c-2.28,16.89-2.7,33.94-0.97,50.89c0,0,6.02,57.97,25.71,70.01c18.6,11.36,44.97-11.39,47.86-13.95    c-3.43,3.59-38.1,40.75-18.32,62.08c0,0,10.57,5.83,23.7,0c0,0-41.2,83.68-41.2,151.5c0,67.82-15.31,126.88,106.1,253.77    c0,0-35.55-1.64-55.24-13.13c0,0-2.74,245.38,243.01,387.58C550.65,1330.47,716.52,1415.85,823.68,1435.3z'
+        />
+        <linearGradient
+          id='SVGID_00000003815332898481126740000000905297752674933939_'
+          gradientUnits='userSpaceOnUse'
+          x1={80.6632}
+          y1={125.4298}
+          x2={326.3208}
+          y2={125.4298}
+        >
+          <stop
+            offset={0}
+            style={{
+              stopColor: '#26A53A',
+            }}
+          />
+          <stop
+            offset={0.2922}
+            style={{
+              stopColor: '#16813A',
+            }}
+          />
+          <stop
+            offset={0.5652}
+            style={{
+              stopColor: '#0B663B',
+            }}
+          />
+          <stop
+            offset={0.8092}
+            style={{
+              stopColor: '#04573B',
+            }}
+          />
+          <stop
+            offset={1}
+            style={{
+              stopColor: '#02513B',
+            }}
+          />
+        </linearGradient>
+        <path
+          style={{
+            fill: 'url(#SVGID_00000003815332898481126740000000905297752674933939_)',
+          }}
+          d='M326.32,146.37    c-16.86,5.77-37.83,41.78-37.83,41.78C191.14,83.68,82.88,98.21,82.88,98.21c2.4-17.02-2.22-34.76-2.22-34.76h5.11    c18.93-0.21,38.56-2.04,57.27,1.03c41.6,6.87,82.74,19.35,119.11,41.05c17.26,10.3,31.63,24.88,48.77,35.03    C317.63,144.51,322.64,146,326.32,146.37z'
+        />
+        <path
+          className='st5'
+          d='M82.88,98.21c0,0-23.55,39.29-50.62,28.68C6.04,116.62,0.39,104.5,0.05,100.97c-0.03-0.09-0.03-0.21-0.03-0.3    c-0.36-12.52,3.25-56.48,34.15-64.84c34.46-9.3,46.49,27.62,46.49,27.62S85.28,81.19,82.88,98.21z'
+        />
+        <path
+          className='st6'
+          d='M82.88,98.21c-0.46,3.25-1.15,6.47-2.22,9.54c-16.13,32.27-32.81,34.73-32.81,34.73    c-31.18,10.39-46.49-33.91-47.58-38.83c-0.09-0.49-0.18-1.4-0.21-2.67c0.33,3.52,5.98,15.65,32.21,25.92    C59.33,137.49,82.88,98.21,82.88,98.21z'
+        />
+        <path
+          className='st7'
+          d='M1233.2,914.1c-9.48,16.04-39.01,49.59-39.01,49.59l35-12.4l2.19,45.76c3.8,40.14-20.57,82.49-41.14,115.25    c-75.51,120.17-179.57,214.97-288.1,304.79c-50.04,15.07-102.21,1.4-145.39-25.89c-13.64-8.63-25.86-18.69-37.98-29.26    c-22.73-19.75-49.16-36.01-74.08-52.99c-11.88-8.11-23.76-16.23-35.64-24.31c-4.19-2.86-33.42-18.75-33.42-22.79    c-32.57-22.21-65.45-43.81-91.85-73.56c-35-39.38-60.62-86.75-80.4-135.33c-6.87-16.83-13.04-33.94-18.41-51.29    c-1.09-3.55-2.8-17.59-5.62-19.84C403.8,1001.3,446,994.31,446,994.31S280.53,879.82,296.93,712.47c0,0,12.34-121.42,143.6-199.44    c0,0-29.53-17.5-92.25,18.96l38.65-79.67c0,0-80.94-3.28-70-80.4c0,0,9.3-42.66,24.06-65.08c0,0,85.32-197.44,302.99-257.6    s389.41,82.04,420.03,106.1c0,0,147.67,131.26,165.17,257.6l1.91,22.15c0,0-3.74,21.42-39.1,27.62l40.84,84.23    c0,0-34.27-28.44-67.45-22.24c0,0,97.72,45.09,116.68,170.94C1301.01,821.49,1242.68,898.05,1233.2,914.1z'
+        />
+        <path
+          className='st8'
+          d='M1191.45,925.66c-79.12,86.2-189.51,68.64-215.76,63.17c-25.83-5.38-21.82-26.62-21.69-27.29    c2.49,6.29,4.28,9.24,4.28,9.24c27.38,21.3,83.83,10.24,113.76,5.29c103.52-17.11,170.24-113.33,170.18-211.99    C1242.92,766.02,1269.57,840.59,1191.45,925.66z'
+        />
+        <path
+          className='st8'
+          d='M565.23,986.1c-180.45-53.32-192.7-195.55-193.03-199.81c4.5,18.35,11.33,36.7,20.93,52.69    c10.03,16.71,22.42,31.66,36.22,45.36c37.22,36.95,83.44,64.2,132.02,83.37c25.95,10.24,53.57,19.51,81.52,24.37    c30.08,5.23,60.4,3.34,90.73,2.61c13.55-0.33,27.47-4.01,36.01-12.94C776.01,991.11,748.45,1040.24,565.23,986.1z'
+        />
+        <path
+          className='st9'
+          d='M1217.89,643.54c0,0-4.16-71.89-98.57-84.56c-5.13-0.7-10.33-0.85-15.5-0.27    c-25.55,2.86-98.87,21.57-139.86,140.68c0.85-4.8,29.41-158.61,158.3-161.4c21.27-0.46,42.27,6.2,58.92,19.45    C1200.24,572.63,1219.8,599.12,1217.89,643.54z'
+        />
+        <path
+          className='st9'
+          d='M678.84,636.95c-23.37-39.8-76.02-98.02-184.98-101.88c-5.71-0.21-11.42,0.24-17.01,1.46    c-30.48,6.68-123.15,38.68-130.93,181.55c-0.58-5.65-0.79-11.33-0.91-16.98c-0.3-14.01,0.33-28.01,1.98-41.93    c2.1-18.08,5.89-36.07,12.03-53.23c6.65-18.53,16.16-36.22,29.29-50.98c14.46-16.29,33.06-28.29,53.69-35.15    c20.57-6.84,43.75-9.12,65.48-8.9c13.1,0.12,26.19,2.07,38.8,5.53c18.38,5.01,35.82,13.22,51.59,23.88    c21.42,14.43,39.68,33.18,54.9,53.99C662.61,607.75,671.24,622.09,678.84,636.95z'
+        />
+        <path
+          className='st10'
+          d='M292.59,488.68c0.03-0.03,0.03-0.06,0.06-0.06'
+        />
+        <path
+          className='st10'
+          d='M292.59,488.68c0.03-0.03,0.03-0.06,0.06-0.06'
+        />
+        <path className='st10' d='M292.87,488.4c0,0-0.03,0.03-0.06,0.06' />
+        <path
+          className='st11'
+          d='M732.01,1127.29c-7.87,26.65-63.02,33.82-123.15,16.01c-60.16-17.81-102.52-53.84-94.62-80.49    c7.9-26.65,63.05-33.82,123.18-16.01C697.56,1064.61,739.91,1100.65,732.01,1127.29z'
+        />
+        <path
+          className='st11'
+          d='M1120.35,1129.6c-45.12,14.8-89.06,4.47-98.11-23.09c-9.05-27.56,20.17-61.92,65.3-76.75    c45.12-14.83,89.03-4.5,98.08,23.06C1194.67,1080.41,1165.44,1114.77,1120.35,1129.6z'
+        />
+        <path
+          className='st12'
+          d='M695.19,673.29c-0.61-1.4-1.22-2.77-1.88-4.13c-1.28-2.7-2.61-5.38-4.01-7.96    c-0.46-0.88-0.91-1.73-1.43-2.58c-0.43-0.79-0.88-1.58-1.34-2.37c-0.79-1.4-1.61-2.73-2.43-4.07c-0.03-0.06-0.06-0.12-0.09-0.15    c-1.64-2.64-3.34-5.17-5.07-7.66c-0.64-0.91-1.28-1.82-1.95-2.7c-0.64-0.91-1.31-1.79-1.97-2.64c-0.67-0.88-1.34-1.76-2.04-2.61    c-0.67-0.85-1.34-1.7-2.07-2.55c-0.43-0.55-0.91-1.12-1.4-1.67c-0.73-0.88-1.49-1.76-2.28-2.64c-3.01-3.4-6.11-6.65-9.3-9.75    c-1.06-1.03-2.13-2.07-3.22-3.04c-1.06-1-2.16-2.01-3.25-2.95c-2.19-1.95-4.38-3.8-6.62-5.56c-1.12-0.91-2.25-1.79-3.37-2.64    c-0.88-0.7-1.76-1.37-2.64-2.01c-1.61-1.22-3.22-2.37-4.83-3.46c-1.61-1.12-3.25-2.22-4.86-3.28c-1.61-1.06-3.25-2.1-4.86-3.1    c-1.64-1-3.25-1.97-4.89-2.92c-2.92-1.7-5.86-3.31-8.75-4.83c-0.85-0.46-1.7-0.88-2.55-1.31c-5.07-2.61-10.09-4.92-14.95-6.96    c-2.13-0.91-4.22-1.76-6.26-2.55c-2.07-0.82-4.1-1.58-6.08-2.31c-1.97-0.73-3.92-1.4-5.83-2.04c-3.28-1.12-6.47-2.1-9.45-2.98    c-1.28-0.39-2.49-0.73-3.71-1.06c-3.62-1.03-6.96-1.85-9.94-2.55c-0.64-0.15-1.25-0.3-1.85-0.43c-1.49-0.33-2.86-0.64-4.13-0.88    c-1.28-0.27-2.46-0.52-3.49-0.7c-1.06-0.21-1.97-0.36-2.8-0.49c-0.7-0.12-1.31-0.24-1.85-0.3c-0.58-0.09-1.06-0.18-1.4-0.21    c-0.21-0.03-0.36-0.06-0.49-0.06c-0.09-0.03-0.15-0.03-0.15-0.03c-165.17-13.13-189.78,156.94-189.78,156.94    c7.78-142.87,100.45-174.86,130.93-181.55c5.59-1.22,11.3-1.67,17.01-1.46c108.96,3.86,161.61,62.08,184.98,101.88    C684.95,648.8,690.33,660.95,695.19,673.29z'
+        />
+        <path
+          className='st10'
+          d='M695.31,673.53c-0.03-0.09-0.06-0.15-0.12-0.24c-4.86-12.34-10.24-24.49-16.35-36.34    c2.95,5.01,5.44,9.72,7.5,14.01c0.52,1.06,1.03,2.13,1.49,3.13c1.64,3.55,2.98,6.71,4.04,9.45c0.24,0.64,0.49,1.28,0.7,1.85    c0.24,0.58,0.46,1.15,0.64,1.7c0.12,0.3,0.21,0.64,0.33,0.91c0.21,0.58,0.4,1.12,0.55,1.64c0.09,0.24,0.18,0.49,0.24,0.73    c0.15,0.43,0.27,0.79,0.36,1.12c0.06,0.18,0.12,0.39,0.18,0.58C695.1,672.77,695.25,673.26,695.31,673.53z'
+        />
+        <path
+          className='st10'
+          d='M695.19,673.29c0.06,0.09,0.09,0.15,0.12,0.24c0,0.06,0.03,0.12,0.06,0.18c0,0.03,0.03,0.06,0.03,0.09'
+        />
+        <path
+          className='st12'
+          d='M1217.89,643.54c-14.86-34.85-50.92-54.9-71.1-63.78c-10.09-4.44-21.06-6.62-32.09-6.14    c-92.16,4.04-148.79,121.69-150.74,125.76c40.99-119.11,114.31-137.82,139.86-140.68c5.17-0.58,10.36-0.43,15.5,0.27    C1213.73,571.65,1217.89,643.54,1217.89,643.54z'
+        />
+        <path className='st10' d='M963.94,699.51c0,0,0-0.03,0.03-0.12' />
+        <path
+          className='st13'
+          d='M775.37,902.42c-1.82-23.12-4.41-45.45-8.99-67.48c-3.83-18.41-9.05-36.58-16.47-54.81    c-15.89-39.14-37.43-77.42-65.63-109.57c-39.65-45.24-98.63-79.91-160.03-80.97c-46.79-0.82-92.16,23.82-122.42,58.52    c-31.05,35.58-41.08,80.52-32.18,126.49c0.73,3.86,1.58,7.75,2.55,11.61c0,0,0,0.03,0,0.09c4.5,18.35,11.33,36.7,20.93,52.69    c10.03,16.71,22.42,31.66,36.22,45.36c37.22,36.95,83.44,64.2,132.02,83.37c25.95,10.24,53.57,19.51,81.52,24.37    c30.08,5.23,60.4,3.34,90.73,2.61c13.55-0.33,27.47-4.01,36.01-12.94c4.92-5.1,8.05-11.94,8.36-20.81    C778.71,941.49,776.89,921.8,775.37,902.42z M769.42,970.24c0,0-2.92,14.58-51.05,10.94c0,0-147.3,9.48-245.75-72.19    c-98.44-81.67-107.2-154.23-84.59-209.47c22.61-55.24,149.49-115.76,247.21-40.65c97.72,75.11,125.43,156.05,134.18,231.89    C778.17,966.59,769.42,970.24,769.42,970.24z'
+        />
+        <linearGradient
+          id='SVGID_00000171680097473147118630000008369304188934433183_'
+          gradientUnits='userSpaceOnUse'
+          x1={377.6895}
+          y1={802.7607}
+          x2={773.2994}
+          y2={802.7607}
+        >
+          <stop
+            offset={0}
+            style={{
+              stopColor: '#0C0C0D',
+            }}
+          />
+          <stop
+            offset={0.2275}
+            style={{
+              stopColor: '#0D0F0E',
+            }}
+          />
+          <stop
+            offset={0.4036}
+            style={{
+              stopColor: '#111912',
+            }}
+          />
+          <stop
+            offset={0.5625}
+            style={{
+              stopColor: '#182919',
+            }}
+          />
+          <stop
+            offset={0.7113}
+            style={{
+              stopColor: '#214123',
+            }}
+          />
+          <stop
+            offset={0.8517}
+            style={{
+              stopColor: '#2C5E30',
+            }}
+          />
+          <stop
+            offset={0.9358}
+            style={{
+              stopColor: '#357439',
+            }}
+          />
+        </linearGradient>
+        <path
+          style={{
+            fill: 'url(#SVGID_00000171680097473147118630000008369304188934433183_)',
+          }}
+          d='M769.41,970.25    c0,0-2.92,14.58-51.05,10.94c0,0-147.3,9.48-245.75-72.19c-98.44-81.67-107.2-154.23-84.59-209.47    c22.61-55.24,149.49-115.76,247.21-40.65c97.72,75.11,125.43,156.05,134.18,231.89C778.16,966.6,769.41,970.25,769.41,970.25z'
+        />
+        <path
+          className='st10'
+          d='M946.31,935.69c0.43,2.31,1.03,4.98,1.91,7.81C947.59,941.07,946.95,938.48,946.31,935.69z'
+        />
+        <path
+          className='st13'
+          d='M1242.23,764.08c0.06,98.66-66.66,194.89-170.18,211.99c-29.93,4.95-86.38,16.01-113.76-5.29    c0,0-1.79-2.95-4.28-9.24c-1.67-4.31-3.71-10.21-5.68-17.77c2.16,6.81,5.89,14.4,12.34,19.9c9.21,7.81,28.23,6.68,39.32,6.99    c21.03,0.58,42.29-0.79,63.08-3.95c47.37-7.2,92.76-37.89,125.79-71.74c41.84-42.87,58.46-101.97,44.88-160.58    c-24.88-107.14-157.91-142.29-232.29-61.68c-24.12,26.13-38.71,59.68-47.46,93.8c-13.89,54.3-9.91,106.16-8.63,161.07    c0,0,0.06,2.8,0.76,6.96c-5.92-27.32-10.21-71.16-2.28-134.88c8.66-69.52,43.97-154.41,108.62-188.29    c66.45-34.85,150.07,10.73,175.68,76.66C1237.7,712.67,1242.23,738.43,1242.23,764.08z'
+        />
+        <linearGradient
+          id='SVGID_00000036931821889436145750000017030160149488427686_'
+          gradientUnits='userSpaceOnUse'
+          x1={956.3018}
+          y1={742.6596}
+          x2={1201.4637}
+          y2={884.2039}
+        >
+          <stop
+            offset={0.0481}
+            style={{
+              stopColor: '#357439',
+            }}
+          />
+          <stop
+            offset={0.053}
+            style={{
+              stopColor: '#347338',
+            }}
+          />
+          <stop
+            offset={0.2207}
+            style={{
+              stopColor: '#234626',
+            }}
+          />
+          <stop
+            offset={0.3708}
+            style={{
+              stopColor: '#162718',
+            }}
+          />
+          <stop
+            offset={0.4967}
+            style={{
+              stopColor: '#0F1310',
+            }}
+          />
+          <stop
+            offset={0.5829}
+            style={{
+              stopColor: '#0C0C0D',
+            }}
+          />
+        </linearGradient>
+        <path
+          style={{
+            fill: 'url(#SVGID_00000036931821889436145750000017030160149488427686_)',
+          }}
+          d='M1188.84,894.99    c-33.03,33.85-78.42,64.54-125.79,71.74c-20.78,3.16-42.05,4.53-63.08,3.95c-11.09-0.3-30.11,0.82-39.32-6.99    c-6.44-5.5-10.18-13.1-12.34-19.9c-0.06-0.09-0.06-0.18-0.09-0.27c-0.64-2.43-1.28-5.01-1.91-7.81c-0.06-0.36-0.12-0.76-0.21-1.15    c-0.7-4.16-0.76-6.96-0.76-6.96c-1.28-54.9-5.26-106.77,8.63-161.07c8.75-34.12,23.33-67.67,47.46-93.8    c74.38-80.61,207.4-45.46,232.29,61.68C1247.3,793.02,1230.67,852.11,1188.84,894.99z'
+        />
+        <path
+          className='st10'
+          d='M1242.23,764.08c-0.03-0.03-0.03-0.03-0.03-0.03'
+        />
+        <path className='st10' d='M954.03,961.52c0,0,0,0-0.03,0.03' />
+        <path
+          className='st16'
+          d='M1108.5,743.45c-16.77,56.88-51.78,72.19-82.4,51.77c-30.63-20.42-5.83-99.6-5.83-99.6    s13.86-43.33,58.34-27.29C1078.61,668.34,1125.28,686.57,1108.5,743.45z'
+        />
+        <path
+          className='st16'
+          d='M1075.69,875.8c-9.84,24.06-20.05,25.89-32.81,15.68c-12.76-10.21-0.36-55.42,18.59-45.21    C1061.47,846.27,1085.53,851.74,1075.69,875.8z'
+        />
+        <path
+          className='st17'
+          d='M1225.54,769.34c-1.46,20.78-43.75,82.77-43.75,82.77l-12.03-18.23c22.24-30.63,38.28-82.04,38.28-82.04    L1225.54,769.34z'
+        />
+        <path
+          className='st17'
+          d='M1179.97,865.96c0,0-44.48,54.69-97.72,70.01c0,0,74.02-64.54,80.94-89.33L1179.97,865.96z'
+        />
+        <path
+          className='st16'
+          d='M633.05,807.98c-24.79,10.21-71.1-11.3-86.41-50.32c-15.31-39.01-30.51-65.63,24.67-88.24    c0,0,59.92-21.82,81.8,53.45C674.98,798.14,657.84,797.77,633.05,807.98z'
+        />
+        <path
+          className='st16'
+          d='M647.64,892.57c-1,8.33-5.56,15.07-14.07,16.8c-14.25,2.86-23.18-4.1-30.87-15.01    c-3.77-5.38-7.14-11.33-8.57-17.81c-1.64-7.41-1.46-16.2,5.83-20.21c7.72-4.28,18.14-6.99,26.53-3.16    C626.49,853.2,650.92,865.59,647.64,892.57z'
+        />
+        <path
+          className='st17'
+          d='M472.99,814.55l-18.6,12.76c-38.65-33.54-48.13-102.09-48.13-102.09l30.26-16.41    C433.97,730.32,472.99,814.55,472.99,814.55z'
+        />
+        <path
+          className='st17'
+          d='M608.93,936.84c-2.98-1.09-98.57-36.28-143.78-92.06l22.42-17.47C487.57,827.31,511.15,878.29,608.93,936.84    z'
+        />
+        <path
+          className='st18'
+          d='M983.63,1195.57c0,0-71.65,54.14-158.61,24.06c0,0-35.91-9.3-54.6-26.8l8.11-8.2l-2.19-3.28l-38.28,31.17    h7.11l6.56-4.38c0,0,62.35,66.18,121.96,61.26c0,0,40.47-0.55,57.97-22.42c17.5-21.88,61.25-51.96,61.25-51.96L983.63,1195.57z     M915.32,1247.1c-14.52,7.38-30.35,13.04-45.46,13.55c-46.7,1.64-108.84-56.88-108.84-56.88l2.73-4.92l3.01-2.19l2.73,2.19    c13.28,9.72,27.8,17.84,43.33,23.4c14.31,5.1,29.32,7.9,44.48,8.93c13.43,0.91,27.77,2.07,41.47,0.82h0.03    c3.89-0.33,7.75-0.88,11.52-1.67c20.72-4.38,41.11-12.64,60.13-21.88C969.34,1209.48,945.1,1231.97,915.32,1247.1z'
+        />
+        <path
+          className='st19'
+          d='M915.32,1247.1c-14.52,7.38-30.35,13.04-45.46,13.55c-46.7,1.64-108.84-56.88-108.84-56.88l2.73-4.92    l3.01-2.19l2.73,2.19c13.28,9.72,27.8,17.84,43.33,23.4c14.31,5.1,29.32,7.9,44.48,8.93c13.43,0.91,27.77,2.07,41.47,0.82h0.03    C913.44,1235.4,915.32,1247.1,915.32,1247.1z'
+        />
+        <path
+          className='st20'
+          d='M970.47,1208.45c-1.12,1.03-25.37,23.52-55.15,38.65c0,0-1.88-11.7-16.5-15.1    c3.89-0.33,7.75-0.88,11.52-1.67C931.06,1225.95,951.45,1217.69,970.47,1208.45z'
+        />
+        <path
+          className='st8'
+          d='M882.99,1018.91c0,0-28.99-42.11-10.94-89.15C872.05,929.76,869.87,987.19,882.99,1018.91z'
+        />
+        <path
+          className='st21'
+          d='M913.04,1054.95c-0.73-1.19-14.22-22.48-38.47-17.17c-20.27,4.44-27.5,18.99-29.5,24.31    c3.13-9.27,18.38-48.16,48.58-31.96C893.66,1030.12,908.39,1041.03,913.04,1054.95z'
+        />
+        <path
+          className='st8'
+          d='M910.34,1058.84c-1.7-2.98-9.78-5.35-12.7-6.41c-8.26-2.98-17.9-2.86-26.4-0.94    c-5.71,1.25-16.74,4.5-20.66,10.03c3.46-6.05,21.18-33.24,48.28-16.38C898.85,1045.13,906.24,1051.73,910.34,1058.84z'
+        />
+        <path
+          className='st22'
+          d='M873.18,1113.44c0,0.03,0,0.03,0,0.06c-0.03,0.09-0.06,0.15-0.06,0.15c-0.67,1.25-1.34,2.52-2.07,3.77    c-0.3,0.58-0.64,1.15-1,1.73c-0.39,0.73-0.85,1.46-1.31,2.19c-0.55,0.88-1.09,1.73-1.64,2.58c-0.58,0.88-1.15,1.76-1.76,2.61    c-0.39,0.58-0.82,1.15-1.22,1.7c-0.27,0.36-0.55,0.73-0.82,1.09c-0.24,0.3-0.46,0.58-0.67,0.85c-0.12,0.18-0.27,0.36-0.43,0.55    c-0.58,0.7-1.12,1.34-1.64,1.91c-0.4,0.46-0.82,0.85-1.19,1.22c-0.33,0.3-0.64,0.58-0.94,0.82c-0.21,0.18-0.43,0.33-0.61,0.46    c-0.24,0.18-0.49,0.3-0.7,0.4c-0.12,0.06-0.21,0.09-0.33,0.12c-0.24,0.06-0.43,0.06-0.61,0.03c-3.83-0.82-7.11-7.38-4.1-33.36    c0,0,7.05-16.47,16.68-10.66C877.8,1097.06,873.75,1111.58,873.18,1113.44z'
+        />
+        <path
+          className='st23'
+          d='M877.25,1103.41c-0.64,2.7-2.13,6.26-4.07,10.03c0.58-1.85,4.62-16.38-4.41-21.79    c-9.63-5.8-16.68,10.66-16.68,10.66c2.01-17.08,10.36-27.8,15.86-33.12c3.04-2.95,8.14-1.76,9.63,2.19    C881.05,1080.5,879.16,1095.42,877.25,1103.41z'
+        />
+        <path
+          className='st22'
+          d='M922.92,1117.36c-1.09,22.42-12.58,10.94-12.58,10.94s-7.6-7.9-13.64-20.78c0,0-5.17-23.43,7.9-21.06    c12.27,2.22,17.32,18.78,17.9,20.84c0.03,0.06,0.03,0.12,0.03,0.15C922.92,1110.76,923.07,1114.11,922.92,1117.36z'
+        />
+        <path
+          className='st23'
+          d='M922.49,1107.3c-0.58-2.07-5.62-18.63-17.9-20.84c-13.07-2.37-7.9,21.06-7.9,21.06    c-2.34-4.89-4.41-10.51-5.77-16.68c-2.52-11.61-0.33-18.08,2.4-21.63c2.55-3.31,7.35-3.74,10.57-1.12    C912.34,1075,920.49,1091.04,922.49,1107.3z'
+        />
+        <path
+          className='st10'
+          d='M873.18,1113.5c-0.03,0.09-0.06,0.15-0.06,0.15'
+        />
+        <path className='st10' d='M922.55,1107.51c0,0,0-0.03-0.03-0.06' />
+        <path
+          className='st24'
+          d='M1290.17,109.66c-9.18-1.7-19.57-6.59-25.46-14.01c-3.01-3.8-4.56-8.42-3.28-13.19    c1.43-5.41,4.65-8.66,8.75-10.57c5.38-2.55,12.28-2.77,18.53-2.55c9.87,0.33,22.97,2.77,26.07,13.79    C1320.53,103.37,1303.57,112.12,1290.17,109.66z'
+        />
+        <line
+          className='st10'
+          x1={1114.98}
+          y1={177.51}
+          x2={1114.95}
+          y2={177.51}
+        />
+        <path className='st10' d='M1243.23,102.25c0,0,0,0-0.03,0' />
+      </g>
+    </g>
+  </svg>
+);
+
+export default SaucerSwapLogo;
diff --git a/src/renderer/components/chat/MessageBubble.tsx b/src/renderer/components/chat/MessageBubble.tsx
index 1630332..d3fee5e 100644
--- a/src/renderer/components/chat/MessageBubble.tsx
+++ b/src/renderer/components/chat/MessageBubble.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState, type CSSProperties } from 'react';
 import { motion } from 'framer-motion';
 import Typography from '../ui/Typography';
 import type { Message } from '../../stores/agentStore';
@@ -584,6 +584,17 @@ function MessageBubbleImpl({
     );
   }
 
+  const bubbleStyle = useMemo(() => {
+    const base: CSSProperties = {
+      maxWidth: 'min(640px, calc(100% - 2.75rem))',
+    };
+    if (!isUser) {
+      base.WebkitUserSelect = 'text';
+      base.userSelect = 'text';
+    }
+    return base;
+  }, [isUser]);
+
   return (
     <>
       {/* Fullscreen Modal */}
@@ -642,7 +653,7 @@ function MessageBubbleImpl({
                   return (
                     <div
                       key={part.key}
-                      className='text-sm text-gray-900 dark:text-gray-100 select-text [&_.inline-code-style]:bg-gray-200 [&_.inline-code-style]:dark:bg-gray-700 [&_.inline-code-style]:px-1.5 [&_.inline-code-style]:py-0.5 [&_.inline-code-style]:rounded [&_.inline-code-style]:font-mono [&_.inline-code-style]:text-xs'
+                      className='text-sm text-gray-900 dark:text-gray-100 select-text [&_.inline-code-style]:bg-gray-200 [&_.inline-code-style]:dark:bg-gray-700 [&_.inline-code-style]:px-1.5 [&_.inline-code-style]:py-0.5 [&_.inline-code-style]:rounded [&_.inline-code-style]:font-mono [&_.inline-code-style]:text-xs [&_.inline-code-style]:text-brand-ink [&_.inline-code-style]:dark:text-white [&_.inline-code]:text-brand-ink [&_.inline-code]:dark:text-white [&_.inline-code]:bg-gray-100 [&_.inline-code]:dark:bg-gray-800 [&_.inline-code]:px-1.5 [&_.inline-code]:py-0.5 [&_.inline-code]:rounded'
                       dangerouslySetInnerHTML={{
                         __html: part.html,
                       }}
@@ -701,8 +712,8 @@ function MessageBubbleImpl({
       >
         <div
           className={cn(
-            'flex max-w-[min(85%,600px)] md:max-w-[min(75%,700px)] lg:max-w-[min(70%,800px)] space-x-2',
-            isUser ? 'flex-row-reverse space-x-reverse' : 'flex-row'
+            'flex w-full max-w-full items-start gap-2',
+            isUser ? 'flex-row-reverse' : 'flex-row'
           )}
         >
           <div className='flex-shrink-0'>
@@ -745,14 +756,7 @@ function MessageBubbleImpl({
                   ? 'bg-white dark:bg-gray-800 border border-gray-200/50 dark:border-gray-700/50 text-gray-900 dark:text-white rounded-tr-md'
                   : 'bg-gradient-to-br from-blue-500 to-blue-500/90 dark:from-[#a679f0] dark:to-[#9568df] text-white rounded-tl-md shadow-blue-500/10'
               )}
-              style={
-                !isUser
-                  ? {
-                      WebkitUserSelect: 'text',
-                      userSelect: 'text',
-                    }
-                  : undefined
-              }
+              style={bubbleStyle}
             >
               {/* Action buttons */}
               <div
@@ -848,7 +852,7 @@ function MessageBubbleImpl({
                       return (
                         <div
                           key={part.key}
-                          className='prose prose-sm dark:prose-invert max-w-none prose-p:my-1 prose-headings:my-2 prose-ul:my-1 prose-li:my-0 select-text cursor-text text-sm break-words overflow-wrap-anywhere whitespace-pre-line [&_.inline-code-style]:bg-gray-200 [&_.inline-code-style]:dark:bg-gray-700 [&_.inline-code-style]:px-1.5 [&_.inline-code-style]:py-0.5 [&_.inline-code-style]:rounded [&_.inline-code-style]:font-mono [&_.inline-code-style]:text-xs'
+                          className='prose prose-sm dark:prose-invert max-w-none prose-p:my-1 prose-headings:my-2 prose-ul:my-1 prose-li:my-0 select-text cursor-text text-sm break-words overflow-wrap-anywhere whitespace-pre-line [&_.inline-code-style]:bg-gray-200 [&_.inline-code-style]:dark:bg-gray-700 [&_.inline-code-style]:px-1.5 [&_.inline-code-style]:py-0.5 [&_.inline-code-style]:rounded [&_.inline-code-style]:font-mono [&_.inline-code-style]:text-xs [&_.inline-code-style]:text-brand-ink [&_.inline-code-style]:dark:text-white [&_.inline-code]:text-brand-ink [&_.inline-code]:dark:text-white [&_.inline-code]:bg-gray-100 [&_.inline-code]:dark:bg-gray-800 [&_.inline-code]:px-1.5 [&_.inline-code]:py-0.5 [&_.inline-code]:rounded'
                           dangerouslySetInnerHTML={{ __html: part.html }}
                         />
                       );
diff --git a/src/renderer/components/chat/MessageList.tsx b/src/renderer/components/chat/MessageList.tsx
index 94d1ec9..10a861c 100644
--- a/src/renderer/components/chat/MessageList.tsx
+++ b/src/renderer/components/chat/MessageList.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { ReactNode, useEffect, useRef } from 'react';
 import Typography from '../ui/Typography';
 import MessageBubble from './MessageBubble';
 import { ScrollArea } from '../ui/scroll-area';
@@ -6,6 +6,7 @@ import { motion } from 'framer-motion';
 import type { Message } from '../../stores/agentStore';
 import type { UserProfile } from '../../types/userProfile';
 import { FiMessageSquare } from 'react-icons/fi';
+import { cn } from '../../lib/utils';
 
 interface MessageListProps {
   messages: Message[];
@@ -18,8 +19,65 @@ interface MessageListProps {
     agentName: string,
     network: string
   ) => void;
+  emptyState?: ReactNode;
+  className?: string;
+  contentClassName?: string;
 }
 
+/**
+ * Renders the default empty state for chat conversations in the desktop shell.
+ */
+const DefaultEmptyState: React.FC = () => (
+  <div className='flex flex-col items-center justify-center h-full space-y-4 px-8'>
+    <div className='w-16 h-16 bg-gradient-to-r from-brand-teal to-brand-green rounded-full flex items-center justify-center'>
+      <FiMessageSquare className='w-8 h-8 text-white' />
+    </div>
+    <div className='text-center space-y-2'>
+      <Typography variant='h5' className='font-semibold'>
+        Welcome to HOL Desktop
+      </Typography>
+      <Typography variant='body1' color='secondary' className='max-w-md'>
+        I can help you with Hedera Hashgraph operations, account management,
+        token transfers, smart contracts, and more. Start by asking me a
+        question or requesting help with a task.
+      </Typography>
+    </div>
+    <div className='bg-gray-50 dark:bg-gray-800 rounded-lg p-4 max-w-md'>
+      <div className='mb-2'>
+        <Typography
+          variant='caption'
+          color='secondary'
+          className='font-medium block'
+        >
+          Try asking me:
+        </Typography>
+      </div>
+      <ul className='space-y-1'>
+        <li>
+          <Typography variant='caption' color='secondary'>
+            • "What's my account balance?"
+          </Typography>
+        </li>
+        <li>
+          <Typography variant='caption' color='secondary'>
+            • "Transfer 5 HBAR to 0.0.123456"
+          </Typography>
+        </li>
+        <li>
+          <Typography variant='caption' color='secondary'>
+            • "Help me create a new account"
+          </Typography>
+        </li>
+        <li>
+          <Typography variant='caption' color='secondary'>
+            • "Send a message to HCS topic"
+          </Typography>
+        </li>
+      </ul>
+    </div>
+  </div>
+);
+
 /**
  * Display chat messages with proper styling and auto-scroll
  */
@@ -30,6 +88,9 @@ const MessageList: React.FC<MessageListProps> = ({
   isHCS10,
   agentName,
   onAgentProfileClick,
+  emptyState,
+  className,
+  contentClassName,
 }) => {
   const messagesEndRef = useRef<HTMLDivElement>(null);
 
@@ -41,64 +102,13 @@ const MessageList: React.FC<MessageListProps> = ({
     scrollToBottom();
   }, [messages]);
 
-  const EmptyState = () => (
-    <div className='flex flex-col items-center justify-center h-full space-y-4 px-8'>
-      <div className='w-16 h-16 bg-gradient-to-r from-brand-teal to-brand-green rounded-full flex items-center justify-center'>
-        <FiMessageSquare className='w-8 h-8 text-white' />
-      </div>
-      <div className='text-center space-y-2'>
-        <Typography variant='h5' className='font-semibold'>
-          Welcome to HOL Desktop
-        </Typography>
-        <Typography variant='body1' color='secondary' className='max-w-md'>
-          I can help you with Hedera Hashgraph operations, account management,
-          token transfers, smart contracts, and more. Start by asking me a
-          question or requesting help with a task.
-        </Typography>
-      </div>
-      <div className='bg-gray-50 dark:bg-gray-800 rounded-lg p-4 max-w-md'>
-        <div className='mb-2'>
-          <Typography
-            variant='caption'
-            color='secondary'
-            className='font-medium block'
-          >
-            Try asking me:
-          </Typography>
-        </div>
-        <ul className='space-y-1'>
-          <li>
-            <Typography variant='caption' color='secondary'>
-              • "What's my account balance?"
-            </Typography>
-          </li>
-          <li>
-            <Typography variant='caption' color='secondary'>
-              • "Transfer 5 HBAR to 0.0.123456"
-            </Typography>
-          </li>
-          <li>
-            <Typography variant='caption' color='secondary'>
-              • "Help me create a new account"
-            </Typography>
-          </li>
-          <li>
-            <Typography variant='caption' color='secondary'>
-              • "Send a message to HCS topic"
-            </Typography>
-          </li>
-        </ul>
-      </div>
-    </div>
-  );
-
   if (messages.length === 0) {
-    return <EmptyState />;
+    return <>{emptyState ?? <DefaultEmptyState />}</>;
   }
 
   return (
-    <ScrollArea className='flex-1 bg-gray-50 dark:bg-gray-900'>
-      <div className='p-6 space-y-4'>
+    <ScrollArea className={cn('flex-1 bg-gray-50 dark:bg-gray-900', className)}>
+      <div className={cn('p-6 space-y-4', contentClassName)}>
         {messages.map((message) => (
           <MessageBubble
             key={message.id}
diff --git a/src/renderer/components/chat/headers/AnimatedSuggestions.tsx b/src/renderer/components/chat/headers/AnimatedSuggestions.tsx
index c1044e6..18cefd3 100644
--- a/src/renderer/components/chat/headers/AnimatedSuggestions.tsx
+++ b/src/renderer/components/chat/headers/AnimatedSuggestions.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import Typography from '../../ui/Typography';
 import { FiCpu, FiCode, FiShield, FiMessageSquare } from 'react-icons/fi';
diff --git a/src/renderer/components/hcs10/InscriptionSelect.tsx b/src/renderer/components/hcs10/InscriptionSelect.tsx
index f0e14e8..b2bf6b0 100644
--- a/src/renderer/components/hcs10/InscriptionSelect.tsx
+++ b/src/renderer/components/hcs10/InscriptionSelect.tsx
@@ -1,11 +1,12 @@
-import React, { useState, useRef, useCallback } from 'react';
+import React, { useState, useRef, useCallback, useEffect } from 'react';
 import { Button } from '../ui/Button';
 import { Input } from '../ui/input';
-import { Label } from '../ui/label';
 import Typography from '../ui/Typography';
 import { Alert, AlertDescription, AlertTitle } from '../ui/alert';
 import { Upload, X, Image as ImageIcon, FileWarning } from 'lucide-react';
 import { cn } from '../../lib/utils';
+import { useInscriptionJobs, type InscriptionJob } from '../../hooks/useInscriptionJobs';
+import { InscriptionGalleryPanel } from './inscription-gallery';
 
 interface InscriptionSelectProps {
   onChange: (hcsUrl: string) => void;
@@ -35,6 +36,19 @@ export function InscriptionSelect({
   const [isUploading, setIsUploading] = useState(false);
   const [uploadError, setUploadError] = useState<string | null>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
+  const [isExistingOpen, setIsExistingOpen] = useState(false);
+  const {
+    jobs: existingJobs,
+    loading: isLoadingExisting,
+    error: existingError,
+    hasLoaded: hasLoadedExisting,
+    loadJobs,
+  } = useInscriptionJobs();
+  const normalizedNetwork: 'mainnet' | 'testnet' =
+    network === 'mainnet' ? 'mainnet' : 'testnet';
+  const existingToggleLabel = isExistingOpen
+    ? 'Hide Existing Inscriptions'
+    : 'Load Existing Inscriptions';
 
   const MAX_FILE_SIZE = 5 * 1024 * 1024;
   const ACCEPTED_FORMATS = {
@@ -44,17 +58,47 @@ export function InscriptionSelect({
     'image/webp': ['.webp'],
   };
 
+  useEffect(() => {
+    if (isExistingOpen && !hasLoadedExisting) {
+      void loadJobs();
+    }
+  }, [isExistingOpen, hasLoadedExisting, loadJobs]);
+
+  const handleToggleExisting = useCallback(() => {
+    setIsExistingOpen((previous) => !previous);
+  }, []);
+
+  const handleRefreshExisting = useCallback(() => {
+    void loadJobs();
+  }, [loadJobs]);
+
+  const handleSelectExisting = useCallback(
+    (job: InscriptionJob) => {
+      const topicCandidate = job.topic || job.imageTopic;
+      if (!topicCandidate) {
+        return;
+      }
+      const normalized = topicCandidate.replace(/^hcs:\/\/(1\/)?/i, '').replace(/^1\//, '');
+      const formatted = `hcs://1/${normalized}`;
+      onChange(formatted);
+      setIsExistingOpen(false);
+    },
+    [onChange]
+  );
+
   /**
    * Handle manual topic ID submission
    */
   const handleManualTopicIdSubmit = useCallback(() => {
-    if (manualTopicId.trim()) {
-      const formattedUrl = manualTopicId.startsWith('hcs://')
-        ? manualTopicId
-        : `hcs://${manualTopicId}`;
-      onChange(formattedUrl);
-      setManualTopicId('');
+    const trimmed = manualTopicId.trim();
+    if (!trimmed) {
+      return;
     }
+    const formatted = trimmed.startsWith('hcs://')
+      ? trimmed
+      : `hcs://1/${trimmed.replace(/^1\//, '')}`;
+    onChange(formatted);
+    setManualTopicId('');
   }, [manualTopicId, onChange]);
 
   /**
@@ -168,6 +212,32 @@ export function InscriptionSelect({
         />
       </div>
 
+      <div className='flex gap-2'>
+        <Button
+          type='button'
+          variant='secondary'
+          onClick={handleToggleExisting}
+          className='flex items-center gap-2'
+          disabled={isLoadingExisting && !isExistingOpen}
+        >
+          {existingToggleLabel}
+        </Button>
+      </div>
+
+      {isExistingOpen ? (
+        <InscriptionGalleryPanel
+          title='Existing Inscriptions'
+          jobs={existingJobs}
+          isLoading={isLoadingExisting}
+          error={existingError}
+          hasLoaded={hasLoadedExisting}
+          network={normalizedNetwork}
+          onRefresh={handleRefreshExisting}
+          onSelect={handleSelectExisting}
+          className='mt-2 rounded-xl border border-border bg-card/50 p-4'
+        />
+      ) : null}
+
       {!formData && messageEnabled && (
         <Alert variant='destructive'>
           <FileWarning className='h-4 w-4' />
diff --git a/src/renderer/components/hcs10/inscription-gallery.tsx b/src/renderer/components/hcs10/inscription-gallery.tsx
new file mode 100644
index 0000000..da306df
--- /dev/null
+++ b/src/renderer/components/hcs10/inscription-gallery.tsx
@@ -0,0 +1,176 @@
+import React, { useCallback } from 'react';
+import { Button } from '../ui/Button';
+import Typography from '../ui/Typography';
+import { Alert, AlertDescription, AlertTitle } from '../ui/alert';
+import { Loader2, FileWarning, Image as ImageIcon } from 'lucide-react';
+import type { InscriptionJob } from '../../hooks/useInscriptionJobs';
+
+interface InscriptionGalleryPanelProps {
+  title: string;
+  jobs: InscriptionJob[];
+  isLoading: boolean;
+  error: string | null;
+  hasLoaded: boolean;
+  network: 'mainnet' | 'testnet';
+  onRefresh: () => void;
+  onSelect: (job: InscriptionJob) => void;
+  actionLabel?: (job: InscriptionJob) => string;
+  emptyMessage?: string;
+  className?: string;
+}
+
+interface InscriptionGalleryGridProps {
+  jobs: InscriptionJob[];
+  network: 'mainnet' | 'testnet';
+  onSelect: (job: InscriptionJob) => void;
+  actionLabel?: (job: InscriptionJob) => string;
+}
+
+const resolveDisplayName = (job: InscriptionJob): string => {
+  if (job.name && job.name.trim().length > 0) {
+    return job.name.trim();
+  }
+  if (job.topic) {
+    return job.topic;
+  }
+  if (job.imageTopic) {
+    return job.imageTopic;
+  }
+  return 'Stored inscription';
+};
+
+export const InscriptionGalleryGrid: React.FC<InscriptionGalleryGridProps> = ({
+  jobs,
+  network,
+  onSelect,
+  actionLabel,
+}) => {
+  return (
+    <div className='grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4'>
+      {jobs.map((job) => {
+        const previewTopic = job.imageTopic || job.topic;
+        const displayName = resolveDisplayName(job);
+        const timestampLabel = job.createdAt ? job.createdAt.toLocaleString() : '';
+        const topicDisplay = job.topic || job.imageTopic || '';
+        const label = actionLabel ? actionLabel(job) : `Use ${displayName}`;
+
+        return (
+          <article
+            key={job.id}
+            className='flex flex-col gap-3 rounded-lg border border-border bg-card/40 p-3 shadow-lg shadow-black/10 transition-transform duration-200 hover:-translate-y-1 hover:shadow-xl'
+          >
+            <div className='relative flex aspect-square w-full items-center justify-center overflow-hidden rounded-lg bg-muted'>
+              {previewTopic ? (
+                <img
+                  src={`https://kiloscribe.com/api/inscription-cdn/${previewTopic}?network=${network}`}
+                  alt={displayName}
+                  className='h-full w-full object-cover'
+                />
+              ) : (
+                <ImageIcon className='h-10 w-10 text-muted-foreground' />
+              )}
+            </div>
+            <div className='space-y-1'>
+              <Typography variant='body2' className='font-medium truncate'>
+                {displayName}
+              </Typography>
+              {timestampLabel ? (
+                <Typography variant='caption' className='text-muted-foreground'>
+                  {timestampLabel}
+                </Typography>
+              ) : null}
+              {topicDisplay ? (
+                <Typography variant='caption' className='text-muted-foreground truncate'>
+                  {topicDisplay}
+                </Typography>
+              ) : null}
+            </div>
+            <Button type='button' variant='outline' onClick={() => onSelect(job)} className='justify-center'>
+              {label}
+            </Button>
+          </article>
+        );
+      })}
+    </div>
+  );
+};
+
+export const InscriptionGalleryPanel: React.FC<InscriptionGalleryPanelProps> = ({
+  title,
+  jobs,
+  isLoading,
+  error,
+  hasLoaded,
+  network,
+  onRefresh,
+  onSelect,
+  actionLabel,
+  emptyMessage = 'No inscriptions found yet.',
+  className,
+}) => {
+  const showEmptyState = hasLoaded && jobs.length === 0 && !isLoading && !error;
+
+  const handleRefresh = useCallback(() => {
+    onRefresh();
+  }, [onRefresh]);
+
+  return (
+    <section className={className}>
+      <div className='flex flex-wrap items-center justify-between gap-3'>
+        <Typography variant='subtitle1' className='font-semibold'>
+          {title}
+        </Typography>
+        <Button
+          type='button'
+          variant='outline'
+          size='sm'
+          onClick={handleRefresh}
+          disabled={isLoading}
+          className='flex items-center gap-2'
+        >
+          {isLoading ? <Loader2 className='h-4 w-4 animate-spin' /> : null}
+          {isLoading ? 'Refreshing…' : 'Refresh'}
+        </Button>
+      </div>
+
+  [...] 
+      {error ? (
+        <div className='mt-4'>
+          <Alert variant='destructive'>
+            <FileWarning className='h-4 w-4' />
+            <AlertTitle>Unable to load inscriptions</AlertTitle>
+            <AlertDescription>{error}</AlertDescription>
+          </Alert>
+        </div>
+      ) : null}
+
+      {isLoading && jobs.length === 0 ? (
+        <div className='mt-4 flex items-center gap-2 text-muted-foreground'>
+          <Loader2 className='h-4 w-4 animate-spin' />
+          <Typography variant='body2' className='text-muted-foreground'>
+            Loading your inscriptions…
+          </Typography>
+        </div>
+      ) : null}
+
+      {jobs.length > 0 ? (
+        <div className='mt-4'>
+          <InscriptionGalleryGrid
+            jobs={jobs}
+            network={network}
+            onSelect={onSelect}
+            actionLabel={actionLabel}
+          />
+        </div>
+      ) : null}
+
+      {showEmptyState ? (
+        <Typography variant='body2' className='mt-4 text-muted-foreground'>
+          {emptyMessage}
+        </Typography>
+      ) : null}
+    </section>
+  );
+};
+
+export default InscriptionGalleryPanel;
diff --git a/src/renderer/components/media/MediaLibrary.tsx b/src/renderer/components/media/MediaLibrary.tsx
new file mode 100644
index 0000000..0a42e4d
--- /dev/null
+++ b/src/renderer/components/media/MediaLibrary.tsx
@@ -0,0 +1,268 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import Typography from '../ui/Typography';
+import { MediaModal } from './MediaModal';
+import type { InscriptionJob } from '../../hooks/useInscriptionJobs';
+import {
+  normalizeTopic,
+  mapToMediaItem,
+  getMediaType,
+  type MediaItem,
+  type ViewMode,
+  type SortField,
+  type SortOrder,
+  type FilterType,
+} from './library-types';
+import { MediaToolbar } from './media-library-toolbar';
+import { MediaSidebar } from './media-library-sidebar';
+import { MediaCard } from './media-icon-grid';
+import { MediaListView } from './media-list-view';
+import { MediaColumnView } from './media-column-view';
+import { cn } from '../../lib/utils';
+import { useConfigStore } from '../../stores/configStore';
+
+interface MediaLibraryProps {
+  jobs: InscriptionJob[];
+  isLoading: boolean;
+  error: string | null;
+  hasLoaded: boolean;
+  network: 'mainnet' | 'testnet';
+  onRefresh: () => void;
+  onSelect?: (job: InscriptionJob) => void;
+  emptyMessage?: string;
+  className?: string;
+}
+
+const MediaLibrary: React.FC<MediaLibraryProps> = ({
+  jobs,
+  isLoading,
+  error,
+  hasLoaded,
+  network,
+  onRefresh,
+  onSelect,
+  emptyMessage = 'No media files yet — inscribe something magical.',
+  className,
+}) => {
+  const { config } = useConfigStore();
+  const isDark = (config?.advanced?.theme ?? 'light') === 'dark';
+  const [viewMode, setViewMode] = useState<ViewMode>('icons');
+  const [sortField, setSortField] = useState<SortField>('name');
+  const [sortOrder, setSortOrder] = useState<SortOrder>('asc');
+  const [filter, setFilter] = useState<FilterType>('all');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedItem, setSelectedItem] = useState<MediaItem | null>(null);
+  const [columnSelection, setColumnSelection] = useState<string | null>(null);
+  const [copiedTopic, setCopiedTopic] = useState<string | null>(null);
+
+  const mediaItems = useMemo(() => jobs.map((job) => mapToMediaItem(job, network)), [jobs, network]);
+
+  const filteredItems = useMemo(() => {
+    const term = searchQuery.trim().toLowerCase();
+    return mediaItems
+      .filter((item) => {
+        const matchesFilter = filter === 'all' ? true : getMediaType(item.mimeType, item.name) === filter;
+        if (!matchesFilter) {
+          return false;
+        }
+        if (!term) {
+          return true;
+        }
+        return item.name.toLowerCase().includes(term) || item.topic.toLowerCase().includes(term);
+      })
+      .sort((a, b) => {
+        const factor = sortOrder === 'asc' ? 1 : -1;
+        if (sortField === 'name') {
+          return a.name.localeCompare(b.name) * factor;
+        }
+        const typeA = a.mimeType ?? '';
+        const typeB = b.mimeType ?? '';
+        return typeA.localeCompare(typeB) * factor;
+      });
+  }, [filter, mediaItems, searchQuery, sortField, sortOrder]);
+
+  const handleSort = useCallback(
+    (field: SortField) => {
+      if (field === sortField) {
+        setSortOrder((prev) => (prev === 'asc' ? 'desc' : 'asc'));
+      } else {
+        setSortField(field);
+        setSortOrder('asc');
+      }
+    },
+    [sortField],
+  );
+
+  const handleCopyTopic = useCallback(async (topic: string) => {
+    const normalized = `hcs://1/${normalizeTopic(topic)}`;
+    if (navigator?.clipboard?.writeText) {
+      await navigator.clipboard.writeText(normalized).catch(() => undefined);
+      setCopiedTopic(normalized);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!copiedTopic) {
+      return;
+    }
+    const timeout = window.setTimeout(() => setCopiedTopic(null), 2600);
+    return () => window.clearTimeout(timeout);
+  }, [copiedTopic]);
+
+  const handlePreview = useCallback((item: MediaItem) => {
+    setSelectedItem(item);
+  }, []);
+
+  const handleModalClose = useCallback(() => {
+    setSelectedItem(null);
+  }, []);
+
+  const forwardSelection = useCallback(
+    (media: MediaItem) => {
+      if (!onSelect) {
+        return;
+      }
+      const match = jobs.find((entry) => entry.id === media.id);
+      if (match) {
+        onSelect(match);
+      }
+    },
+    [jobs, onSelect],
+  );
+
+  const loadingState = isLoading && filteredItems.length === 0;
+  const showEmptyState = hasLoaded && !loadingState && filteredItems.length === 0 && !error;
+
+  return (
+    <div className={cn(className, isDark ? 'h-full w-full text-white' : 'h-full w-full text-gray-900')}>
+      <div
+        className={cn(
+          'relative flex h-full flex-col overflow-hidden rounded-desktop-lg border shadow-sm transition-colors duration-300',
+          isDark ? 'border-white/10 bg-[#0f1b39]' : 'border-gray-200 bg-white'
+        )}
+      >
+        <MediaToolbar
+          isDark={isDark}
+          viewMode={viewMode}
+          onViewModeChange={setViewMode}
+          searchQuery={searchQuery}
+          onSearchChange={setSearchQuery}
+          itemCount={filteredItems.length}
+          onRefresh={onRefresh}
+          isRefreshing={isLoading}
+        />
+
+        <div className='flex flex-1 min-h-0'>
+          <MediaSidebar isDark={isDark} items={filteredItems} filter={filter} onFilterChange={setFilter} />
+
+          <div
+            className={cn(
+              'relative flex-1 min-h-0 overflow-hidden transition-colors duration-300',
+              isDark ? 'bg-[#0a142d]' : 'bg-white'
+            )}
+          >
+            {copiedTopic ? (
+              <div
+                className={cn(
+                  'absolute right-6 top-6 z-10 rounded-full px-4 py-2 text-xs font-semibold uppercase tracking-[0.25em] shadow-sm',
+                  isDark ? 'bg-blue-500 text-white' : 'bg-blue-600 text-white'
+                )}
+              >
+                Copied {copiedTopic}
+              </div>
+            ) : null}
+
+            {loadingState ? (
+              <div className='flex h-full items-center justify-center'>
+                <Typography
+                  variant='body2'
+                  className={cn('text-sm font-medium', isDark ? 'text-white/75' : 'text-gray-600')}
+                >
+                  Loading your inscriptions…
+                </Typography>
+              </div>
+            ) : null}
+
+            {error ? (
+              <div className='flex h-full items-center justify-center'>
+                <Typography
+                  variant='body2'
+                  className={cn('text-sm font-medium', isDark ? 'text-red-300' : 'text-red-500')}
+                >
+                  {error}
+                </Typography>
+              </div>
+            ) : null}
+
+            {showEmptyState ? (
+              <div className='flex h-full items-center justify-center'>
+                <div
+                  className={cn(
+                    'rounded-desktop-lg border border-dashed px-10 py-12 text-center shadow-sm transition-colors duration-300',
+                    isDark ? 'border-white/20 text-white/80' : 'border-gray-300 text-gray-700'
+                  )}
+                >
+                  <Typography variant='body2' className='text-lg font-semibold'>
+                    {emptyMessage}
+                  </Typography>
+                </div>
+              </div>
+            ) : null}
+
+            {!loadingState && !error && filteredItems.length > 0 ? (
+              <div className='h-full w-full'>
+                {viewMode === 'icons' ? (
+                  <div className='h-full overflow-y-auto px-6 py-6'>
+                    <div className='grid gap-6 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4'>
+                      {filteredItems.map((item) => (
+                        <MediaCard
+                          key={item.id}
+                          item={item}
+                          onPreview={handlePreview}
+                          onCopyTopic={handleCopyTopic}
+                          onSelect={(media) => {
+                            forwardSelection(media);
+                          }}
+                          isDark={isDark}
+                        />
+                      ))}
+                    </div>
+                  </div>
+                ) : null}
+
+                {viewMode === 'list' ? (
+                  <MediaListView
+                    isDark={isDark}
+                    items={filteredItems}
+                    sortField={sortField}
+                    sortOrder={sortOrder}
+                    onSort={handleSort}
+                    onPreview={handlePreview}
+                    onCopyTopic={handleCopyTopic}
+                    onSelect={forwardSelection}
+                  />
+                ) : null}
+
+                {viewMode === 'columns' ? (
+                  <MediaColumnView
+                    isDark={isDark}
+                    items={filteredItems}
+                    selection={columnSelection}
+                    onSelectionChange={setColumnSelection}
+                    onCopyTopic={handleCopyTopic}
+                    onSelect={forwardSelection}
+                  />
+                ) : null}
+              </div>
+            ) : null}
+          </div>
+        </div>
+      </div>
+
+      <MediaModal item={selectedItem} isOpen={Boolean(selectedItem)} onClose={handleModalClose} />
+    </div>
+  );
+};
+
+export { MediaLibrary };
+
+export type { MediaLibraryProps };
diff --git a/src/renderer/components/media/MediaModal.tsx b/src/renderer/components/media/MediaModal.tsx
new file mode 100644
index 0000000..0da05ab
--- /dev/null
+++ b/src/renderer/components/media/MediaModal.tsx
@@ -0,0 +1,352 @@
+import React, { useCallback, useState, useEffect } from 'react';
+import { X, Download, Copy, Loader2 } from 'lucide-react';
+import { Button } from '../ui/Button';
+import Typography from '../ui/Typography';
+import { cn } from '../../lib/utils';
+import { useConfigStore } from '../../stores/configStore';
+
+interface MediaItem {
+  id: string;
+  topic: string;
+  name: string;
+  mimeType: string | null;
+  type: string | null;
+  network: 'mainnet' | 'testnet';
+  createdAt: Date | null;
+  url: string;
+}
+
+interface MediaModalProps {
+  item: MediaItem | null;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+type MediaType = 'image' | 'video' | 'audio' | 'text' | 'code' | 'json' | 'unknown';
+
+const getMediaType = (mimeType: string | null, filename: string): MediaType => {
+  const mime = mimeType?.toLowerCase() || '';
+  const ext = filename.split('.').pop()?.toLowerCase() || '';
+
+  if (mime.startsWith('image/') || ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'bmp'].includes(ext)) {
+    return 'image';
+  }
+  if (mime.startsWith('video/') || ['mp4', 'webm', 'ogg', 'avi', 'mov'].includes(ext)) {
+    return 'video';
+  }
+  if (mime.startsWith('audio/') || ['mp3', 'wav', 'ogg', 'flac', 'm4a'].includes(ext)) {
+    return 'audio';
+  }
+  if (mime === 'application/json' || ext === 'json') {
+    return 'json';
+  }
+  const codeExtensions = ['js', 'ts', 'jsx', 'tsx', 'py', 'java', 'cpp', 'c', 'cs', 'go', 'rs', 'php', 'rb', 'swift', 'kt'];
+  if (mime.startsWith('text/') && codeExtensions.includes(ext) || codeExtensions.includes(ext)) {
+    return 'code';
+  }
+  if (mime.startsWith('text/') || ['txt', 'md', 'csv', 'log'].includes(ext)) {
+    return 'text';
+  }
+  return 'unknown';
+};
+
+/**
+ * Content renderer for different media types in the modal
+ */
+const MediaContent: React.FC<{ item: MediaItem; isDark: boolean }> = ({ item, isDark }) => {
+  const [content, setContent] = useState<string>('');
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const mediaType = getMediaType(item.mimeType, item.name);
+
+  useEffect(() => {
+    const loadContent = async () => {
+      if (mediaType === 'text' || mediaType === 'code' || mediaType === 'json') {
+        try {
+          setIsLoading(true);
+          setError(null);
+          const response = await fetch(item.url);
+          if (!response.ok) {
+            throw new Error(`Failed to load content: ${response.statusText}`);
+          }
+          const text = await response.text();
+          setContent(text);
+        } catch (err) {
+          setError(err instanceof Error ? err.message : 'Failed to load content');
+        } finally {
+          setIsLoading(false);
+        }
+      } else {
+        setIsLoading(false);
+      }
+    };
+
+    loadContent();
+  }, [item.url, mediaType]);
+
+  const handleImageLoad = useCallback(() => setIsLoading(false), []);
+  const handleImageError = useCallback(() => {
+    setError('Failed to load image');
+    setIsLoading(false);
+  }, []);
+
+  if (error) {
+    return (
+      <div className='flex h-full items-center justify-center'>
+        <div className='text-center'>
+          <Typography variant='h6' className={cn('mb-2 text-red-500', isDark && 'text-red-300')}>
+            Error Loading Content
+          </Typography>
+          <Typography variant='body2' className={cn(isDark ? 'text-white/70' : 'text-gray-500')}>
+            {error}
+          </Typography>
+        </div>
+      </div>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <div className='flex h-full items-center justify-center'>
+        <div className='text-center'>
+          <Loader2 className='mx-auto mb-2 h-8 w-8 animate-spin text-orange-500' />
+          <Typography variant='body2' className={cn(isDark ? 'text-white/70' : 'text-gray-500')}>
+            Loading content...
+          </Typography>
+        </div>
+      </div>
+    );
+  }
+
+  switch (mediaType) {
+    case 'image':
+      return (
+        <div className='flex h-full items-center justify-center p-4'>
+          <img
+            src={item.url}
+            alt={item.name}
+            className='max-w-full max-h-full object-contain rounded-lg shadow-lg'
+            onLoad={handleImageLoad}
+            onError={handleImageError}
+          />
+        </div>
+      );
+
+    case 'video':
+      return (
+        <div className='flex h-full items-center justify-center p-4'>
+          <video
+            src={item.url}
+            controls
+            className='max-w-full max-h-full rounded-lg shadow-lg'
+            onLoadedData={() => setIsLoading(false)}
+            onError={() => setError('Failed to load video')}
+          >
+            Your browser does not support the video tag.
+          </video>
+        </div>
+      );
+
+    case 'audio':
+      return (
+        <div className='flex h-full items-center justify-center p-8'>
+          <div className='w-full max-w-md text-center'>
+            <Typography variant='h5' className='mb-6'>
+              {item.name}
+            </Typography>
+            <audio
+              src={item.url}
+              controls
+              className='w-full'
+              onLoadedData={() => setIsLoading(false)}
+              onError={() => setError('Failed to load audio')}
+            >
+              Your browser does not support the audio tag.
+            </audio>
+          </div>
+        </div>
+      );
+
+    case 'text':
+    case 'code':
+      return (
+        <div className='h-full overflow-auto p-6'>
+          <pre
+            className={cn(
+              'whitespace-pre-wrap rounded-lg border p-4 font-mono text-sm leading-relaxed',
+              isDark ? 'border-white/20 bg-[#1e2b54] text-white/80' : 'border-gray-200 bg-gray-50 text-gray-900'
+            )}
+          >
+            {content}
+          </pre>
+        </div>
+      );
+
+    case 'json':
+      return (
+        <div className='h-full overflow-auto p-6'>
+          <pre
+            className={cn(
+              'whitespace-pre rounded-lg border p-4 font-mono text-sm leading-relaxed',
+              isDark ? 'border-white/20 bg-[#1e2b54] text-white/80' : 'border-gray-200 bg-gray-50 text-gray-900'
+            )}
+          >
+            {JSON.stringify(JSON.parse(content), null, 2)}
+          </pre>
+        </div>
+      );
+
+    default:
+      return (
+        <div className='flex items-center justify-center h-full'>
+          <div className='text-center'>
+            <Typography variant='h6' className='text-gray-500 mb-2'>
+              Preview not available
+            </Typography>
+            <Typography variant='body2' className='text-gray-400 mb-4'>
+              This file type cannot be previewed
+            </Typography>
+            <Button
+              onClick={() => window.open(item.url, '_blank')}
+              variant='outline'
+            >
+              Open Externally
+            </Button>
+          </div>
+        </div>
+      );
+  }
+};
+
+/**
+ * Full-screen modal for viewing media content
+ */
+export const MediaModal: React.FC<MediaModalProps> = ({ item, isOpen, onClose }) => {
+  const { config } = useConfigStore();
+  const isDark = (config?.advanced?.theme ?? 'light') === 'dark';
+  const handleDownload = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (!item) return;
+
+    const link = document.createElement('a');
+    link.href = item.url;
+    link.download = item.name;
+    link.click();
+  }, [item]);
+
+  const handleCopy = useCallback(async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (!item) return;
+
+    if (navigator?.clipboard?.writeText) {
+      try {
+        await navigator.clipboard.writeText(item.url);
+      } catch {
+        // Failed to copy - ignore
+      }
+    }
+  }, [item]);
+
+  const handleBackdropClick = useCallback((e: React.MouseEvent) => {
+    if (e.target === e.currentTarget) {
+      onClose();
+    }
+  }, [onClose]);
+
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose();
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('keydown', handleEscape);
+      document.body.style.overflow = 'hidden';
+    }
+
+    return () => {
+      document.removeEventListener('keydown', handleEscape);
+      document.body.style.overflow = 'unset';
+    };
+  }, [isOpen, onClose]);
+
+  if (!isOpen || !item) {
+    return null;
+  }
+
+  return (
+    <div
+      className={cn(
+        'fixed inset-0 z-50 flex items-center justify-center p-4 transition-colors duration-300',
+        isDark ? 'bg-[#020617]/95' : 'bg-black/90'
+      )}
+      onClick={handleBackdropClick}
+    >
+      <div
+        className={cn(
+          'relative h-full w-full max-w-7xl max-h-full overflow-hidden rounded-lg shadow-2xl transition-colors duration-300',
+          isDark ? 'border border-white/15 bg-[#0b182f]' : 'border border-gray-200 bg-white'
+        )}
+      >
+        {/* Header */}
+        <div
+          className={cn(
+            'flex items-center justify-between border-b px-4 py-3 transition-colors duration-300',
+            isDark ? 'border-white/15 bg-[#111f3d]' : 'border-gray-200 bg-white'
+          )}
+        >
+          <div className='flex-1 min-w-0'>
+            <Typography variant='h6' className={cn('font-medium truncate', isDark ? 'text-white' : 'text-gray-900')}>
+              {item.name}
+            </Typography>
+            <Typography
+              variant='body2'
+              className={cn('mt-1 text-sm', isDark ? 'text-white/70' : 'text-gray-500')}
+            >
+              {item.mimeType || 'Unknown type'}{item.createdAt ? ` • ${item.createdAt.toLocaleDateString()}` : ''}
+            </Typography>
+          </div>
+
+          <div className='ml-4 flex items-center gap-2'>
+            <Button
+              size='sm'
+              variant='outline'
+              onClick={handleDownload}
+              className={cn('flex items-center gap-2', isDark ? 'border-white/30 text-white hover:border-white/50' : '')}
+            >
+              <Download className='w-4 h-4' />
+              Download
+            </Button>
+            <Button
+              size='sm'
+              variant='outline'
+              onClick={handleCopy}
+              className={cn('flex items-center gap-2', isDark ? 'border-white/30 text-white hover:border-white/50' : '')}
+            >
+              <Copy className='w-4 h-4' />
+              Copy URL
+            </Button>
+            <Button
+              size='sm'
+              variant='outline'
+              onClick={onClose}
+              className={cn('flex items-center gap-2', isDark ? 'border-white/30 text-white hover:border-white/50' : '')}
+            >
+              <X className='w-4 h-4' />
+              Close
+            </Button>
+          </div>
+        </div>
+
+        {/* Content */}
+        <div className={cn('flex-1 h-full overflow-hidden transition-colors duration-300', isDark ? 'bg-[#0b182f]' : 'bg-white')} style={{ height: 'calc(100% - 80px)' }}>
+          <MediaContent item={item} isDark={isDark} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MediaModal;
diff --git a/src/renderer/components/media/library-types.ts b/src/renderer/components/media/library-types.ts
new file mode 100644
index 0000000..53ad2d5
--- /dev/null
+++ b/src/renderer/components/media/library-types.ts
@@ -0,0 +1,65 @@
+import type { InscriptionJob } from '../../hooks/useInscriptionJobs';
+
+export type ViewMode = 'icons' | 'list' | 'columns';
+export type SortField = 'name' | 'type';
+export type SortOrder = 'asc' | 'desc';
+export type FilterType = 'all' | 'image' | 'video' | 'audio' | 'text' | 'code' | 'json';
+
+export interface MediaItem {
+  id: string;
+  topic: string;
+  name: string;
+  mimeType: string | null;
+  type: string | null;
+  network: 'mainnet' | 'testnet';
+  createdAt: Date | null;
+  url: string;
+}
+
+export const normalizeTopic = (topic: string): string => {
+  return topic.replace(/^hcs:\/\/(1\/)?/i, '').replace(/^1\//, '').trim();
+};
+
+export const getMediaType = (mimeType: string | null, filename: string): FilterType => {
+  const mime = mimeType?.toLowerCase() ?? '';
+  const extension = filename.split('.').pop()?.toLowerCase() ?? '';
+  if (mime.startsWith('image/') || ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'bmp'].includes(extension)) {
+    return 'image';
+  }
+  if (mime.startsWith('video/') || ['mp4', 'webm', 'ogg', 'avi', 'mov'].includes(extension)) {
+    return 'video';
+  }
+  if (mime.startsWith('audio/') || ['mp3', 'wav', 'ogg', 'flac', 'm4a'].includes(extension)) {
+    return 'audio';
+  }
+  if (mime === 'application/json' || extension === 'json') {
+    return 'json';
+  }
+  const codeExtensions = ['js', 'ts', 'jsx', 'tsx', 'py', 'java', 'cpp', 'c', 'cs', 'go', 'rs', 'php', 'rb', 'swift', 'kt'];
+  if (mime.startsWith('text/') && codeExtensions.includes(extension)) {
+    return 'code';
+  }
+  if (codeExtensions.includes(extension)) {
+    return 'code';
+  }
+  if (mime.startsWith('text/') || ['txt', 'md', 'csv', 'log'].includes(extension)) {
+    return 'text';
+  }
+  return 'all';
+};
+
+export const mapToMediaItem = (job: InscriptionJob, network: 'mainnet' | 'testnet'): MediaItem => {
+  const topic = normalizeTopic(job.imageTopic || job.topic);
+  const displayName = job.name?.trim().length ? job.name : topic || 'Untitled';
+  const createdAt = job.createdAt ? new Date(job.createdAt) : null;
+  return {
+    id: job.id,
+    topic,
+    name: displayName,
+    mimeType: job.mimeType ?? null,
+    type: job.type ?? null,
+    network,
+    createdAt,
+    url: `https://kiloscribe.com/api/inscription-cdn/${topic}?network=${network}`,
+  };
+};
diff --git a/src/renderer/components/media/media-column-view.tsx b/src/renderer/components/media/media-column-view.tsx
new file mode 100644
index 0000000..4f22aba
--- /dev/null
+++ b/src/renderer/components/media/media-column-view.tsx
@@ -0,0 +1,182 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { Copy } from 'lucide-react';
+import Typography from '../ui/Typography';
+import { Button } from '../ui/Button';
+import { cn } from '../../lib/utils';
+import { getMediaType, type MediaItem } from './library-types';
+import { MediaPreviewCard } from './media-icon-grid';
+
+interface MediaColumnViewProps {
+  items: MediaItem[];
+  selection: string | null;
+  onSelectionChange: (id: string) => void;
+  onCopyTopic: (topic: string) => void;
+  onSelect?: (item: MediaItem) => void;
+  isDark: boolean;
+}
+
+const MediaColumnView: React.FC<MediaColumnViewProps> = ({ items, selection, onSelectionChange, onCopyTopic, onSelect, isDark }) => {
+  const activeItem = useMemo(() => items.find((item) => item.id === selection) ?? items[0] ?? null, [items, selection]);
+  const activeMediaType = activeItem ? getMediaType(activeItem.mimeType, activeItem.name) : null;
+  const [previewText, setPreviewText] = useState('');
+  const [previewError, setPreviewError] = useState<string | null>(null);
+  const [isPreviewLoading, setIsPreviewLoading] = useState(false);
+
+  useEffect(() => {
+    if (!selection && items.length > 0) {
+      onSelectionChange(items[0].id);
+    }
+  }, [items, onSelectionChange, selection]);
+
+  useEffect(() => {
+    if (!activeItem) {
+      setPreviewText('');
+      setPreviewError(null);
+      setIsPreviewLoading(false);
+      return;
+    }
+
+    const type = getMediaType(activeItem.mimeType, activeItem.name);
+    if (type !== 'text' && type !== 'code' && type !== 'json') {
+      setPreviewText('');
+      setPreviewError(null);
+      setIsPreviewLoading(false);
+      return;
+    }
+
+    let cancelled = false;
+    setIsPreviewLoading(true);
+    setPreviewError(null);
+
+    fetch(activeItem.url)
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error(`Preview failed (${response.status})`);
+        }
+        return response.text();
+      })
+      .then((text) => {
+        if (!cancelled) {
+          setPreviewText(text.slice(0, 4000));
+        }
+      })
+      .catch((error: unknown) => {
+        if (!cancelled) {
+          setPreviewError(error instanceof Error ? error.message : 'Unable to load preview');
+          setPreviewText('');
+        }
+      })
+      .finally(() => {
+        if (!cancelled) {
+          setIsPreviewLoading(false);
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [activeItem]);
+
+  return (
+    <div className={cn('flex h-full transition-colors duration-300', isDark ? 'bg-[#0a152f]' : 'bg-white')}>
+      <div className={cn('w-64 border-r px-3 py-4 transition-colors duration-300', isDark ? 'border-white/20 bg-[#141f3d]' : 'border-gray-200 bg-white')}>
+        <div className='flex flex-col gap-2'>
+          {items.map((item) => {
+            const isActive = activeItem?.id === item.id;
+            return (
+              <button
+                key={item.id}
+                type='button'
+                data-testid='media-column-item'
+                onClick={() => onSelectionChange(item.id)}
+                className={cn(
+                  'flex items-center justify-between rounded-lg px-3 py-2 text-sm font-medium transition-colors duration-150',
+                  isActive
+                    ? 'bg-blue-600 text-white shadow-sm'
+                    : isDark
+                      ? 'text-white/80 hover:bg-white/10'
+                      : 'text-gray-700 hover:bg-blue-50'
+                )}
+              >
+                <span className='truncate'>{item.name}</span>
+                <span className='text-[0.65rem] uppercase tracking-wide text-white/70'>
+                  {isActive ? 'Active' : ''}
+                </span>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+      <div className={cn('flex flex-1 flex-col gap-4 p-6 transition-colors duration-300', isDark ? 'bg-[#0a152f]' : 'bg-white')} data-testid='media-column-preview'>
+        {activeItem ? (
+          <>
+            <MediaPreviewCard item={activeItem} isDark={isDark} />
+            <div className={cn('rounded-2xl border p-4 shadow-sm transition-colors duration-300', isDark ? 'border-white/20 bg-[#141f3d]' : 'border-gray-200 bg-white')}>
+              <Typography variant='h5' className={cn('text-lg font-semibold', isDark ? 'text-white' : 'text-gray-900')}>
+                {activeItem.name}
+              </Typography>
+              <div className='mt-3 flex flex-wrap items-center gap-3 text-sm'>
+                <span className={cn('rounded-md px-2 py-1 font-semibold uppercase tracking-wide', isDark ? 'bg-white/15 text-white/80' : 'bg-gray-100 text-gray-700')}>
+                  Topic ID {activeItem.topic}
+                </span>
+                <Button
+                  size='sm'
+                  variant='ghost'
+                  className={cn('flex items-center gap-1 px-2 py-1 text-xs font-semibold uppercase tracking-wide', isDark ? 'text-blue-300 hover:text-blue-200' : 'text-blue-600 hover:text-blue-500')}
+                  onClick={() => onCopyTopic(activeItem.topic)}
+                  aria-label='Copy topic id'
+                >
+                  <Copy className='h-3.5 w-3.5' />
+                  Copy Topic ID
+                </Button>
+                <Button
+                  size='sm'
+                  variant='outline'
+                  className={cn('flex items-center gap-2 px-3 py-1 text-xs font-semibold uppercase tracking-wide', isDark ? 'border-white/20 text-white/80 hover:border-white/40' : 'border-gray-300 text-gray-700 hover:border-blue-600')}
+                  onClick={() => {
+                    onSelect?.(activeItem);
+                    onCopyTopic(activeItem.topic);
+                  }}
+                  aria-label='Use topic id'
+                >
+                  Use in Doc
+                </Button>
+              </div>
+              <div className={cn('mt-4 text-xs uppercase tracking-[0.25em]', isDark ? 'text-white/70' : 'text-gray-600')}>
+                {activeMediaType}
+              </div>
+              {activeMediaType && ['text', 'code', 'json'].includes(activeMediaType) ? (
+                <div className={cn('mt-4 rounded-lg border p-3 text-xs', isDark ? 'border-white/25 bg-[#1e2b54] text-white/80' : 'border-gray-200 bg-gray-50 text-gray-800')}>
+                  {isPreviewLoading ? (
+                    <Typography variant='body2' className={cn('text-sm', isDark ? 'text-white/70' : 'text-gray-500')}>
+                      Loading preview…
+                    </Typography>
+                  ) : previewError ? (
+                    <Typography
+                      variant='body2'
+                      className={cn('text-sm', isDark ? 'text-red-300' : 'text-red-500')}
+                    >
+                      {previewError}
+                    </Typography>
+                  ) : (
+                    <pre className='max-h-64 overflow-auto whitespace-pre-wrap font-mono text-xs leading-5'>{previewText || 'No preview available.'}</pre>
+                  )}
+                </div>
+              ) : null}
+            </div>
+          </>
+        ) : (
+          <div className={cn('flex h-full items-center justify-center rounded-2xl border border-dashed text-sm transition-colors duration-300', isDark ? 'border-white/20 bg-[#141f3d] text-white/70' : 'border-gray-300 bg-white text-gray-600')}>
+            <div className='text-center'>
+              <Typography variant='body2' className='text-sm font-medium'>
+                Select an inscription to preview
+              </Typography>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export { MediaColumnView };
diff --git a/src/renderer/components/media/media-icon-grid.tsx b/src/renderer/components/media/media-icon-grid.tsx
new file mode 100644
index 0000000..3b15315
--- /dev/null
+++ b/src/renderer/components/media/media-icon-grid.tsx
@@ -0,0 +1,123 @@
+import React, { useCallback } from 'react';
+import { Copy, Volume2, Play, FileText, FileJson } from 'lucide-react';
+import Typography from '../ui/Typography';
+import { Button } from '../ui/Button';
+import { cn } from '../../lib/utils';
+import { getMediaType, type MediaItem } from './library-types';
+
+const MediaPreviewCard: React.FC<{ item: MediaItem; isDark: boolean }> = ({ item, isDark }) => {
+  const mediaType = getMediaType(item.mimeType, item.name);
+  const baseClass = isDark ? 'border-white/25 bg-[#1c2a55]' : 'border-gray-200 bg-white';
+
+  if (mediaType === 'image') {
+    return (
+      <div className={cn('relative h-40 w-full overflow-hidden rounded-xl shadow-sm', baseClass)}>
+        <img src={item.url} alt={item.name} className='h-full w-full object-cover' />
+      </div>
+    );
+  }
+
+  const Icon = mediaType === 'video' ? Play : mediaType === 'audio' ? Volume2 : mediaType === 'json' ? FileJson : FileText;
+
+  return (
+    <div className={cn('flex h-40 w-full items-center justify-center rounded-xl shadow-inner', baseClass)}>
+      <Icon className={cn('h-10 w-10', isDark ? 'text-white/70' : 'text-gray-600')} />
+    </div>
+  );
+};
+
+interface MediaCardProps {
+  item: MediaItem;
+  onPreview: (item: MediaItem) => void;
+  onCopyTopic: (topic: string) => void;
+  onSelect?: (item: MediaItem) => void;
+  isDark: boolean;
+}
+
+const MediaCard: React.FC<MediaCardProps> = ({ item, onPreview, onCopyTopic, onSelect, isDark }) => {
+  const handleSelect = useCallback(() => {
+    onPreview(item);
+  }, [item, onPreview]);
+
+  const handleUse = useCallback(() => {
+    onSelect?.(item);
+    onCopyTopic(item.topic);
+  }, [item, onCopyTopic, onSelect]);
+
+  const handleCopy = useCallback(
+    (event: React.MouseEvent) => {
+      event.stopPropagation();
+      onCopyTopic(item.topic);
+    },
+    [item.topic, onCopyTopic],
+  );
+
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        handleSelect();
+      }
+    },
+    [handleSelect],
+  );
+
+  return (
+    <div
+      role='button'
+      tabIndex={0}
+      onClick={handleSelect}
+      onKeyDown={handleKeyDown}
+      className={cn(
+        'flex h-full w-full flex-col gap-3 rounded-xl border p-4 text-left shadow-sm transition-transform duration-150 hover:-translate-y-0.5 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-500/40',
+        isDark ? 'border-white/20 bg-[#152046]' : 'border-gray-200 bg-white'
+      )}
+    >
+      <MediaPreviewCard item={item} isDark={isDark} />
+      <div className='flex flex-col gap-1'>
+        <Typography
+          variant='body1'
+          className={cn('text-base font-semibold leading-snug break-words', isDark ? 'text-white' : 'text-gray-900')}
+        >
+          {item.name}
+        </Typography>
+        <div
+          className={cn(
+            'flex items-center justify-between rounded-lg px-3 py-2 text-xs font-semibold uppercase tracking-wide',
+            isDark ? 'bg-white/15 text-white/80' : 'bg-gray-100 text-gray-600'
+          )}
+        >
+          <span className='truncate'>Topic ID {item.topic}</span>
+          <button
+            type='button'
+            onClick={handleCopy}
+            className={cn('hover:text-blue-400', isDark ? 'text-blue-300' : 'text-blue-600')}
+            aria-label='Copy topic id'
+          >
+            <Copy className='h-3.5 w-3.5' />
+          </button>
+        </div>
+      </div>
+      <div className='mt-1 flex items-center justify-between text-xs'>
+        <span className={cn(isDark ? 'text-white/70' : 'text-gray-600')}>{item.mimeType || 'Unknown type'}</span>
+        <Button
+          size='sm'
+          variant='ghost'
+          className={cn(
+            'px-2 py-1 text-xs font-semibold uppercase tracking-wide',
+            isDark ? 'text-blue-300 hover:text-blue-200' : 'text-blue-600 hover:text-blue-500'
+          )}
+          onClick={(event) => {
+            event.stopPropagation();
+            handleUse();
+          }}
+          aria-label='Use topic id'
+        >
+          Use
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export { MediaCard, MediaPreviewCard };
diff --git a/src/renderer/components/media/media-library-sidebar.tsx b/src/renderer/components/media/media-library-sidebar.tsx
new file mode 100644
index 0000000..65ace91
--- /dev/null
+++ b/src/renderer/components/media/media-library-sidebar.tsx
@@ -0,0 +1,114 @@
+import React, { useMemo } from 'react';
+import { Badge } from '../ui/badge';
+import { cn } from '../../lib/utils';
+import { getMediaType, type FilterType, type MediaItem } from './library-types';
+import {
+  Image as ImageIcon,
+  Play,
+  Volume2,
+  FileText,
+  FileJson,
+} from 'lucide-react';
+
+const FILTER_OPTIONS: Array<{ key: FilterType; label: string; icon: React.ComponentType<{ className?: string }> }> = [
+  { key: 'all', label: 'All Items', icon: ImageIcon },
+  { key: 'image', label: 'Images', icon: ImageIcon },
+  { key: 'video', label: 'Videos', icon: Play },
+  { key: 'audio', label: 'Audio', icon: Volume2 },
+  { key: 'text', label: 'Documents', icon: FileText },
+  { key: 'code', label: 'Code', icon: FileText },
+  { key: 'json', label: 'JSON', icon: FileJson },
+];
+
+interface SidebarButtonProps {
+  label: string;
+  count: number;
+  icon: React.ComponentType<{ className?: string }>;
+  isActive: boolean;
+  onClick: () => void;
+  isDark: boolean;
+}
+
+const SidebarButton: React.FC<SidebarButtonProps> = ({ label, count, icon: Icon, isActive, onClick, isDark }) => (
+  <button
+    type='button'
+    onClick={onClick}
+    className={cn(
+      'flex w-full items-center justify-between rounded-lg px-3 py-2 text-sm font-medium transition-colors duration-150',
+      isActive
+        ? 'bg-blue-600 text-white shadow-sm'
+        : isDark
+          ? 'text-white/80 hover:bg-white/10'
+          : 'text-gray-700 hover:bg-blue-50'
+    )}
+  >
+    <span className='flex items-center gap-2'>
+      <Icon className='h-4 w-4' />
+      {label}
+    </span>
+    <Badge
+      variant='secondary'
+      className={cn(
+        'text-[0.65rem] uppercase tracking-widest',
+        isActive
+          ? isDark ? 'bg-white/25 text-blue-900' : 'bg-white text-blue-700'
+          : isDark ? 'bg-white/15 text-white/80' : 'bg-gray-100 text-gray-600'
+      )}
+    >
+      {count}
+    </Badge>
+  </button>
+);
+
+interface MediaSidebarProps {
+  items: MediaItem[];
+  filter: FilterType;
+  onFilterChange: (filter: FilterType) => void;
+  isDark: boolean;
+}
+
+const MediaSidebar: React.FC<MediaSidebarProps> = ({ items, filter, onFilterChange, isDark }) => {
+  const counts = useMemo(() => {
+    const base: Record<FilterType, number> = {
+      all: items.length,
+      image: 0,
+      video: 0,
+      audio: 0,
+      text: 0,
+      code: 0,
+      json: 0,
+    };
+    items.forEach((item) => {
+      const type = getMediaType(item.mimeType, item.name);
+      if (type !== 'all') {
+        base[type] += 1;
+      }
+    });
+    return base;
+  }, [items]);
+
+  return (
+    <aside
+      className={cn(
+        'w-56 border-r px-3 py-5 transition-colors duration-300',
+        isDark ? 'border-white/20 bg-[#141f3d]' : 'border-gray-200 bg-white'
+      )}
+    >
+      <div className='space-y-2'>
+        {FILTER_OPTIONS.map((option) => (
+          <SidebarButton
+            key={option.key}
+            label={option.label}
+            icon={option.icon}
+            count={option.key === 'all' ? counts.all : counts[option.key]}
+            isActive={filter === option.key}
+            onClick={() => onFilterChange(option.key)}
+            isDark={isDark}
+          />
+        ))}
+      </div>
+    </aside>
+  );
+};
+
+export { MediaSidebar };
diff --git a/src/renderer/components/media/media-library-toolbar.tsx b/src/renderer/components/media/media-library-toolbar.tsx
new file mode 100644
index 0000000..e1384d9
--- /dev/null
+++ b/src/renderer/components/media/media-library-toolbar.tsx
@@ -0,0 +1,136 @@
+import React from 'react';
+import { Columns3, Grid3X3, List, RefreshCw, Search } from 'lucide-react';
+import { cn } from '../../lib/utils';
+import type { ViewMode } from './library-types';
+
+const VIEW_OPTIONS: Array<{ key: ViewMode; label: string; icon: React.ComponentType<{ className?: string }> }> = [
+  { key: 'icons', label: 'Icons', icon: Grid3X3 },
+  { key: 'list', label: 'List', icon: List },
+  { key: 'columns', label: 'Columns', icon: Columns3 },
+];
+
+interface ToolbarButtonProps {
+  label: string;
+  icon: React.ComponentType<{ className?: string }>;
+  isActive: boolean;
+  onClick: () => void;
+  isDark: boolean;
+}
+
+const ToolbarButton: React.FC<ToolbarButtonProps> = ({ label, icon: Icon, isActive, onClick, isDark }) => (
+  <button
+    type='button'
+    onClick={onClick}
+    className={cn(
+      'flex items-center gap-2 rounded-full px-3 py-1.5 text-xs font-semibold uppercase tracking-wide transition-colors duration-150',
+      isActive
+        ? 'bg-blue-600 text-white shadow-md'
+        : isDark
+        ? 'text-white/70 hover:bg-white/10'
+        : 'text-gray-600 hover:bg-blue-100'
+    )}
+    aria-label={`${label} view`}
+  >
+    <Icon className='h-3.5 w-3.5' />
+    {label}
+  </button>
+);
+
+interface MediaToolbarProps {
+  viewMode: ViewMode;
+  onViewModeChange: (view: ViewMode) => void;
+  searchQuery: string;
+  onSearchChange: (value: string) => void;
+  itemCount: number;
+  onRefresh: () => void;
+  isRefreshing: boolean;
+  isDark: boolean;
+}
+
+const MediaToolbar: React.FC<MediaToolbarProps> = ({
+  viewMode,
+  onViewModeChange,
+  searchQuery,
+  onSearchChange,
+  itemCount,
+  onRefresh,
+  isRefreshing,
+  isDark,
+}) => (
+  <div
+    className={cn(
+      'flex flex-wrap items-center gap-4 border-b px-5 py-4 text-sm transition-colors duration-300',
+      isDark ? 'border-white/15 bg-[#101d3f] text-white' : 'border-gray-200 bg-white text-gray-700'
+    )}
+  >
+    <div data-testid='media-toolbar-search' className='flex min-w-[240px] flex-1 items-center md:max-w-sm' role='search'>
+      <label htmlFor='media-library-search' className='sr-only'>Search library</label>
+      <div className='relative w-full'>
+        <Search
+          className={cn(
+            'pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2',
+            isDark ? 'text-white/50' : 'text-gray-400'
+          )}
+          aria-hidden
+        />
+        <input
+          id='media-library-search'
+          value={searchQuery}
+          onChange={(event) => onSearchChange(event.target.value)}
+          placeholder='Search by name or topic'
+          className={cn(
+            'w-full rounded-full border px-9 py-2 text-sm font-medium shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500/30',
+            isDark
+              ? 'border-white/25 bg-[#1a2750] text-white placeholder:text-white/50'
+              : 'border-gray-300 bg-white text-gray-800 placeholder:text-gray-400'
+          )}
+          aria-label='Search library'
+        />
+      </div>
+    </div>
+
+    <div
+      data-testid='media-toolbar-view-toggle'
+      className={cn(
+        'flex items-center gap-2 rounded-full px-2 py-1 shadow-sm transition-colors duration-300',
+        isDark ? 'bg-[#1a2750]' : 'bg-gray-100'
+      )}
+    >
+      {VIEW_OPTIONS.map((option) => (
+        <ToolbarButton
+          key={option.key}
+          isDark={isDark}
+          label={option.label}
+          icon={option.icon}
+          isActive={viewMode === option.key}
+          onClick={() => onViewModeChange(option.key)}
+        />
+      ))}
+    </div>
+
+    <div
+      className={cn(
+        'flex items-center gap-3 rounded-full px-4 py-2 text-xs font-semibold uppercase tracking-[0.2em] shadow-sm transition-colors duration-300',
+        isDark ? 'bg-[#1a2750] text-white/80' : 'bg-gray-100 text-gray-600'
+      )}
+    >
+      <span aria-live='polite'>{itemCount} items</span>
+      <button
+        type='button'
+        onClick={onRefresh}
+        disabled={isRefreshing}
+        className={cn(
+          'flex h-7 w-7 items-center justify-center rounded-full border transition-colors duration-150 disabled:cursor-not-allowed disabled:opacity-60',
+          isDark
+            ? 'border-white/25 text-white/75 hover:border-white/50 hover:text-white'
+            : 'border-gray-300 text-gray-600 hover:border-blue-600 hover:text-blue-600'
+        )}
+        aria-label='Refresh inscriptions'
+      >
+        <RefreshCw className={cn('h-3.5 w-3.5', isRefreshing && 'animate-spin')} />
+      </button>
+    </div>
+  </div>
+);
+
+export { MediaToolbar, VIEW_OPTIONS };
diff --git a/src/renderer/components/media/media-list-view.tsx b/src/renderer/components/media/media-list-view.tsx
new file mode 100644
index 0000000..40def91
--- /dev/null
+++ b/src/renderer/components/media/media-list-view.tsx
@@ -0,0 +1,113 @@
+import React, { useCallback } from 'react';
+import { Copy } from 'lucide-react';
+import { Button } from '../ui/Button';
+import { cn } from '../../lib/utils';
+import type { MediaItem, SortField, SortOrder } from './library-types';
+
+interface MediaListViewProps {
+  items: MediaItem[];
+  sortField: SortField;
+  sortOrder: SortOrder;
+  onSort: (field: SortField) => void;
+  onPreview: (item: MediaItem) => void;
+  onCopyTopic: (topic: string) => void;
+  onSelect?: (item: MediaItem) => void;
+  isDark: boolean;
+}
+
+const MediaListView: React.FC<MediaListViewProps> = ({ items, sortField, sortOrder, onSort, onPreview, onCopyTopic, onSelect, isDark }) => {
+  const toggleSort = useCallback(
+    (field: SortField) => {
+      onSort(field);
+    },
+    [onSort],
+  );
+
+  return (
+    <div className='flex h-full flex-col'>
+      <div
+        className={cn(
+          'grid grid-cols-[minmax(0,2fr)_minmax(0,2fr)_minmax(0,1fr)] items-center border-b px-4 py-2 text-xs font-semibold uppercase tracking-wide transition-colors duration-300',
+          isDark ? 'border-white/20 bg-[#141f3d] text-white/80' : 'border-gray-200 bg-gray-50 text-gray-600'
+        )}
+        role='rowgroup'
+      >
+        <button type='button' onClick={() => toggleSort('name')} className='text-left'>
+          Name {sortField === 'name' ? (sortOrder === 'asc' ? '▲' : '▼') : ''}
+        </button>
+        <div data-testid='media-list-header-topic'>Topic ID</div>
+        <button type='button' onClick={() => toggleSort('type')} className='justify-self-end text-right'>
+          Type {sortField === 'type' ? (sortOrder === 'asc' ? '▲' : '▼') : ''}
+        </button>
+      </div>
+      <div
+        className={cn('flex-1 overflow-y-auto', isDark ? 'bg-[#0a152f]' : 'bg-white')}
+        role='rowgroup'
+      >
+        {items.map((item) => {
+          const handleRowClick = () => {
+            onPreview(item);
+          };
+          const handleCopy = (event: React.MouseEvent) => {
+            event.stopPropagation();
+            onCopyTopic(item.topic);
+          };
+          const handleUse = (event: React.MouseEvent) => {
+            event.stopPropagation();
+            onSelect?.(item);
+            onCopyTopic(item.topic);
+          };
+          return (
+            <div
+              key={item.id}
+              data-testid={`media-list-item-${item.id}`}
+              onClick={handleRowClick}
+              className={cn(
+                'grid grid-cols-[minmax(0,2fr)_minmax(0,2fr)_minmax(0,1fr)] items-center border-b px-4 py-3 text-sm transition-colors duration-150',
+                isDark
+                  ? 'border-white/15 bg-[#141f3d] text-white hover:bg-blue-500/20'
+                  : 'border-gray-200 bg-white text-gray-800 hover:bg-blue-50'
+              )}
+            >
+              <div className='font-medium break-words'>{item.name}</div>
+              <div className='flex items-center gap-3 justify-self-start'>
+                <span
+                  className={cn(
+                    'rounded-md px-2 py-1 text-xs font-semibold uppercase tracking-wide',
+                    isDark ? 'bg-white/15 text-white/80' : 'bg-gray-100 text-gray-600'
+                  )}
+                >
+                  {item.topic}
+                </span>
+                <button
+                  type='button'
+                  onClick={handleCopy}
+                  className={cn('hover:text-blue-400', isDark ? 'text-blue-300' : 'text-blue-600')}
+                  aria-label='Copy topic id'
+                >
+                  <Copy className='h-3.5 w-3.5' />
+                </button>
+              </div>
+              <div className='flex items-center gap-2 justify-self-end text-right'>
+                <span className={cn('text-xs uppercase tracking-wide', isDark ? 'text-white/70' : 'text-gray-600')}>
+                  {item.mimeType || 'Unknown'}
+                </span>
+                <Button
+                  size='sm'
+                  variant='ghost'
+                  className={cn('px-2 py-1 text-[0.65rem] font-semibold uppercase tracking-wide', isDark ? 'text-blue-300 hover:text-blue-200' : 'text-blue-600 hover:text-blue-500')}
+                  onClick={handleUse}
+                  aria-label='Use topic id'
+                >
+                  Use
+                </Button>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export { MediaListView };
diff --git a/src/renderer/components/shell/BookmarkBar.tsx b/src/renderer/components/shell/BookmarkBar.tsx
new file mode 100644
index 0000000..c209082
--- /dev/null
+++ b/src/renderer/components/shell/BookmarkBar.tsx
@@ -0,0 +1,82 @@
+import React from 'react';
+import { getLogoForUrl } from '../../utils/logoMapper';
+
+interface Bookmark {
+  label: string;
+  url: string;
+  description?: string;
+}
+
+interface BookmarkBarProps {
+  bookmarks: Bookmark[];
+  onNavigate: (url: string) => void;
+}
+
+const BookmarkItem: React.FC<{
+  bookmark: Bookmark;
+  onNavigate: (url: string) => void;
+}> = ({ bookmark, onNavigate }) => {
+  const logo = getLogoForUrl(bookmark.url);
+
+  return (
+    <button
+      type='button'
+      onClick={() => onNavigate(bookmark.url)}
+      className='group flex items-center gap-3 p-3 rounded-lg bg-gray-50 hover:bg-gray-100 border border-gray-200 hover:border-gray-300 transition-all duration-200'
+    >
+      <div className='flex-shrink-0'>
+        {logo && logo.light ? (
+          <div className='w-8 h-8 rounded-md bg-white border border-gray-200 flex items-center justify-center p-1'>
+            <img
+              src={logo.light}
+              alt={`${bookmark.label} logo`}
+              className='w-full h-full object-contain'
+              draggable={false}
+            />
+          </div>
+        ) : (
+          <div className='w-8 h-8 rounded-md bg-brand-blue/10 border border-brand-blue/20 flex items-center justify-center'>
+            <span className='text-brand-blue font-semibold text-xs'>
+              {bookmark.label.charAt(0).toUpperCase()}
+            </span>
+          </div>
+        )}
+      </div>
+
+      <div className='flex-1 text-left min-w-0'>
+        <div className='text-gray-900 font-medium text-sm truncate' style={{ fontFamily: 'Roboto, sans-serif' }}>
+          {bookmark.label}
+        </div>
+        <div className='text-gray-500 text-xs truncate mt-0.5' style={{ fontFamily: 'Roboto, sans-serif' }}>
+          {new URL(bookmark.url).hostname}
+        </div>
+      </div>
+    </button>
+  );
+};
+
+const BookmarkBar: React.FC<BookmarkBarProps> = ({ bookmarks, onNavigate }) => {
+  return (
+    <div>
+      <div className='mb-4'>
+        <h3 className='text-gray-900 text-sm font-semibold mb-1' style={{ fontFamily: 'Roboto, sans-serif' }}>
+          Quick Access
+        </h3>
+        <p className='text-gray-500 text-xs' style={{ fontFamily: 'Roboto, sans-serif' }}>
+          Hedera ecosystem apps
+        </p>
+      </div>
+      <div className='grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-3'>
+        {bookmarks.map((bookmark) => (
+          <BookmarkItem
+            key={bookmark.url}
+            bookmark={bookmark}
+            onNavigate={onNavigate}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default BookmarkBar;
\ No newline at end of file
diff --git a/src/renderer/components/shell/BrowserAssistantPanel.tsx b/src/renderer/components/shell/BrowserAssistantPanel.tsx
new file mode 100644
index 0000000..7f88148
--- /dev/null
+++ b/src/renderer/components/shell/BrowserAssistantPanel.tsx
@@ -0,0 +1,995 @@
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { useNavigate } from 'react-router-dom';
+import { format } from 'date-fns';
+import {
+  FiArrowDown,
+  FiArrowLeft,
+  FiArrowRight,
+  FiCompass,
+  FiExternalLink,
+  FiX,
+  FiMessageSquare,
+  FiClock,
+  FiChevronDown,
+  FiTrash2,
+} from 'react-icons/fi';
+import type { IconType } from 'react-icons';
+import { Button } from '../ui/Button';
+import { Badge } from '../ui/badge';
+import Typography from '../ui/Typography';
+import MessageList from '../chat/MessageList';
+import AnimatedSuggestions from '../chat/headers/AnimatedSuggestions';
+import { useAgentStore } from '../../stores/agentStore';
+import { useConfigStore } from '../../stores/configStore';
+import { useWalletStore } from '../../stores/walletStore';
+import { useNotificationStore } from '../../stores/notificationStore';
+import { useAgentInit } from '../../hooks/useAgentInit';
+import useAssistantMessageController, {
+  type AttachmentPayload,
+  type ExtraAttachmentsBuilderArgs,
+} from '../../hooks/useAssistantMessageController';
+import useWalletOperationalMode from '../../hooks/useWalletOperationalMode';
+import { cn } from '../../lib/utils';
+import type { AgentStatus } from '../../stores/agentStore';
+import type { ChatSession } from '../../../main/db/schema';
+
+type BrowserPageContext = {
+  title: string;
+  description: string;
+  selection: string;
+  text: string;
+};
+
+type AssistantDockPlacement = 'left' | 'right' | 'bottom';
+
+type DockOption = {
+  value: AssistantDockPlacement;
+  icon: IconType;
+  aria: string;
+};
+
+type QuickAction = {
+  label: string;
+  description: string;
+  value: string;
+};
+
+type BrowserAssistantPanelProps = {
+  isOpen: boolean;
+  sessionId: string | null;
+  hostLabel: string;
+  currentUrl: string;
+  pageTitle: string;
+  onSessionCreated: (sessionId: string) => void;
+  onSessionsCleared: () => void;
+  fetchPageContext: () => Promise<BrowserPageContext | null>;
+  onClose: () => void;
+  dock: AssistantDockPlacement;
+  onDockChange: (dock: AssistantDockPlacement) => void;
+};
+
+const DOCK_OPTIONS: DockOption[] = [
+  { value: 'left', icon: FiArrowLeft, aria: 'Dock assistant to left' },
+  { value: 'bottom', icon: FiArrowDown, aria: 'Dock assistant to bottom' },
+  { value: 'right', icon: FiArrowRight, aria: 'Dock assistant to right' },
+];
+
+const buildSessionName = (host: string, title: string): string => {
+  const safeHost = host || 'Unknown Site';
+  const trimmedTitle = title.trim()
+    ? title.trim().slice(0, 48)
+    : 'Browser Session';
+  const timestamp = format(new Date(), 'yyyy-MM-dd HH:mm');
+  return `Browser @ ${safeHost} - ${trimmedTitle} - ${timestamp}`;
+};
+
+const truncateContext = (value: string, limit: number): string => {
+  if (value.length <= limit) {
+    return value;
+  }
+  return `${value.slice(0, limit)}...`;
+};
+
+const getStatusLabel = (connected: boolean, status: AgentStatus): string => {
+  if (connected) {
+    return 'Ready';
+  }
+  if (status === 'connecting') {
+    return 'Connecting…';
+  }
+  return 'Offline';
+};
+
+const isBrowserSession = (session: ChatSession | null | undefined): boolean => {
+  if (!session) {
+    return false;
+  }
+  const name = session.name?.trim().toLowerCase() ?? '';
+  if (!name) {
+    return false;
+  }
+  if (!name.includes('browser')) {
+    return false;
+  }
+  if (session.mode === 'personal') {
+    return true;
+  }
+  return name.startsWith('browser');
+};
+
+const PanelBackground: React.FC = () => (
+  <div className='pointer-events-none absolute inset-0 overflow-hidden'>
+    <div className='absolute inset-0 bg-gradient-to-br from-gray-50 via-purple-50/30 to-orange-50/20 dark:from-gray-950 dark:via-purple-950/20 dark:to-orange-950/15' />
+    <div className='absolute -top-32 -right-24 h-64 w-64 rounded-full bg-gradient-to-br from-purple-400/10 to-orange-400/10 blur-3xl dark:from-purple-600/5 dark:to-orange-600/5' />
+    <div className='absolute -bottom-32 -left-24 h-64 w-64 rounded-full bg-gradient-to-br from-orange-400/8 to-purple-400/8 blur-3xl dark:from-orange-600/4 dark:to-purple-600/4' />
+  </div>
+);
+
+const BrowserAssistantEmptyState: React.FC<{
+  hostLabel: string;
+  pageTitle: string;
+}> = (props) => {
+  const { hostLabel } = props;
+
+  return (
+    <div className='flex h-full w-full flex-col items-center justify-center p-8 text-center'>
+      <div className='w-12 h-12 rounded-full bg-gradient-to-br from-purple-500 to-orange-500 flex items-center justify-center mb-4'>
+        <FiCompass className='w-6 h-6 text-white' />
+      </div>
+      <Typography
+        variant='h6'
+        className='text-gray-900 dark:text-white font-medium mb-2'
+      >
+        Ready to help
+      </Typography>
+      <Typography
+        variant='body2'
+        className='text-gray-600 dark:text-gray-400 max-w-sm'
+      >
+        Ask me anything about this page. I can summarize content, explain
+        complex topics, or help you take action.
+      </Typography>
+    </div>
+  );
+};
+
+interface DockToggleButtonProps {
+  option: DockOption;
+  isActive: boolean;
+  onSelect: (value: AssistantDockPlacement) => void;
+}
+
+const DockToggleButton: React.FC<DockToggleButtonProps> = (props) => {
+  const { option, isActive, onSelect } = props;
+  const handleClick = useCallback(() => {
+    onSelect(option.value);
+  }, [onSelect, option.value]);
+
+  const Icon = option.icon;
+
+  return (
+    <button
+      type='button'
+      onClick={handleClick}
+      aria-label={option.aria}
+      className={cn(
+        'w-6 h-6 rounded flex items-center justify-center transition-colors',
+        isActive
+          ? 'bg-purple-100 dark:bg-purple-900/50 text-purple-600 dark:text-purple-400'
+          : 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-300'
+      )}
+    >
+      <Icon className='w-3 h-3' />
+    </button>
+  );
+};
+
+interface QuickActionCardProps {
+  action: QuickAction;
+  onSelect: (value: string) => void;
+}
+
+const QuickActionCard: React.FC<QuickActionCardProps> = (props) => {
+  const { action, onSelect } = props;
+  const handleClick = useCallback(() => {
+    onSelect(action.value);
+  }, [action.value, onSelect]);
+
+  return (
+    <button
+      type='button'
+      onClick={handleClick}
+      className='group flex h-24 flex-col justify-between rounded-2xl border border-gray-200/60 dark:border-gray-700/60 bg-white/80 dark:bg-gray-900/80 px-4 py-3 text-left transition-all duration-200 hover:border-purple-300/70 dark:hover:border-purple-600/70 hover:shadow-[0_20px_48px_rgba(139,92,246,0.2)] hover:bg-purple-50/80 dark:hover:bg-purple-950/40 backdrop-blur-sm'
+    >
+      <Typography
+        variant='caption'
+        className='text-[11px] uppercase tracking-[0.24em] text-gray-600 dark:text-gray-400 font-medium'
+      >
+        {action.label}
+      </Typography>
+      <Typography
+        variant='body2'
+        className='text-sm text-gray-700 dark:text-gray-300 leading-snug group-hover:text-gray-900 dark:group-hover:text-white transition-colors duration-200'
+      >
+        {action.description}
+      </Typography>
+    </button>
+  );
+};
+
+interface ComposerProps {
+  value: string;
+  onChange: (value: string) => void;
+  onSubmit: () => void;
+  connected: boolean;
+  submitting: boolean;
+  fileError: string | null;
+  files: File[];
+  onFileAdd: (files: FileList) => void;
+  onFileRemove: (index: number) => void;
+}
+
+const MoonscapeComposer: React.FC<ComposerProps> = (props) => {
+  const { value, onChange, onSubmit, connected, submitting } = props;
+
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      if (event.key === 'Enter' && !event.shiftKey) {
+        event.preventDefault();
+        onSubmit();
+      }
+    },
+    [onSubmit]
+  );
+
+  return (
+    <div className='flex flex-col gap-3 sm:flex-row sm:items-stretch'>
+      <div className='flex-1'>
+        <textarea
+          value={value}
+          onChange={(event) => onChange(event.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder='Ask me about this page...'
+          disabled={!connected || submitting}
+          rows={1}
+          className='w-full resize-none rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 px-4 py-3 text-sm text-gray-900 dark:text-white outline-none placeholder:text-gray-500 dark:placeholder:text-gray-400 transition-colors focus:border-purple-500 dark:focus:border-purple-400'
+          style={{
+            minHeight: '44px',
+            maxHeight: '160px',
+          }}
+        />
+      </div>
+      <Button
+        type='button'
+        onClick={onSubmit}
+        disabled={submitting || !value.trim() || !connected}
+        className='flex-shrink-0 h-[44px] sm:h-auto sm:min-h-[44px] sm:self-stretch px-5 sm:px-6 bg-gradient-to-r from-purple-500 to-orange-500 hover:from-purple-600 hover:to-orange-600 text-white font-medium rounded-xl transition-all duration-200 disabled:opacity-50 flex items-center justify-center'
+      >
+        Send
+      </Button>
+    </div>
+  );
+};
+
+const encodeStringToBase64 = (value: string): string => {
+  const encoder = new TextEncoder();
+  let binary = '';
+  encoder.encode(value).forEach((byte) => {
+    binary += String.fromCharCode(byte);
+  });
+  return window.btoa(binary);
+};
+
+const BrowserAssistantPanel: React.FC<BrowserAssistantPanelProps> = (props) => {
+  const {
+    isOpen,
+    sessionId,
+    hostLabel,
+    currentUrl,
+    pageTitle,
+    onSessionCreated,
+    onSessionsCleared,
+    fetchPageContext,
+    onClose,
+    dock,
+    onDockChange,
+  } = props;
+
+  const { walletReady } = useWalletOperationalMode();
+
+  const navigate = useNavigate();
+
+  const isConnected = useAgentStore((state) => state.isConnected);
+  const status = useAgentStore((state) => state.status);
+  const connect = useAgentStore((state) => state.connect);
+  const setOperationalMode = useAgentStore((state) => state.setOperationalMode);
+  const messages = useAgentStore((state) => state.messages);
+  const isTyping = useAgentStore((state) => state.isTyping);
+  const processingContext = useAgentStore((state) => state.processingContext);
+  const chatContext = useAgentStore((state) => state.chatContext);
+  const setChatContext = useAgentStore((state) => state.setChatContext);
+  const currentSession = useAgentStore((state) => state.currentSession);
+  const loadSession = useAgentStore((state) => state.loadSession);
+  const sessions = useAgentStore((state) => state.sessions);
+  const deleteSession = useAgentStore((state) => state.deleteSession);
+  const loadAllSessions = useAgentStore((state) => state.loadAllSessions);
+
+  const config = useConfigStore((state) => state.config);
+  const isConfigured = useConfigStore((state) => state.isConfigured);
+  const walletStore = useWalletStore();
+  const walletAccountId = walletStore.accountId;
+  const walletConnected = walletStore.isConnected;
+  const walletNetwork = walletStore.network;
+
+  const addNotification = useNotificationStore(
+    (state) => state.addNotification
+  );
+
+  const buildBrowserAttachments = useCallback(
+    async ({ addNotification }: ExtraAttachmentsBuilderArgs) => {
+      const attachments: AttachmentPayload[] = [];
+      try {
+        const context = await fetchPageContext();
+        const truncatedExcerpt = context?.text
+          ? truncateContext(context.text, 2000)
+          : undefined;
+        const contextPayload: Record<string, unknown> = {
+          url: currentUrl,
+        };
+        if (pageTitle.trim()) {
+          contextPayload.title = pageTitle.trim();
+        }
+        if (context?.description?.trim()) {
+          contextPayload.description = context.description.trim();
+        }
+        if (context?.selection?.trim()) {
+          contextPayload.selection = truncateContext(context.selection, 1500);
+        }
+        if (truncatedExcerpt) {
+          contextPayload.excerpt = truncatedExcerpt;
+        }
+        if (hostLabel) {
+          contextPayload.host = hostLabel;
+        }
+        const contextString = JSON.stringify(contextPayload, null, 2);
+        attachments.push({
+          name: 'page-context.json',
+          data: encodeStringToBase64(contextString),
+          type: 'application/json',
+          size: contextString.length,
+        });
+      } catch (error) {
+        addNotification({
+          type: 'warning',
+          title: 'Context Collection Failed',
+          message:
+            error instanceof Error
+              ? error.message
+              : 'Unable to capture page context for this message.',
+          duration: 6000,
+        });
+      }
+      return attachments;
+    },
+    [fetchPageContext, currentUrl, pageTitle, hostLabel]
+  );
+
+  const handleSessionActivated = useCallback(
+    (session: ChatSession) => {
+      if (!session.id) {
+        return;
+      }
+      const assistantLabel = session.name || hostLabel || pageTitle;
+      setChatContext({
+        mode: 'personal',
+        agentName: assistantLabel || 'Moonscape Assistant',
+      });
+      if (sessionId !== session.id) {
+        onSessionCreated(session.id);
+      }
+    },
+    [onSessionCreated, sessionId, setChatContext, hostLabel, pageTitle]
+  );
+
+  const {
+    inputValue,
+    setInputValue,
+    isSending,
+    isSubmitting,
+    selectedFiles,
+    fileError,
+    handleFileAdd,
+    handleFileRemove,
+    handleSendMessage,
+    resetAttachments,
+  } = useAssistantMessageController({
+    buildSessionName: () => buildSessionName(hostLabel, pageTitle),
+    buildExtraAttachments: buildBrowserAttachments,
+    onSessionActivated: handleSessionActivated,
+    resetTrigger: isOpen,
+  });
+  const [isHistoryOpen, setIsHistoryOpen] = useState(false);
+  const [isHistoryLoading, setIsHistoryLoading] = useState(false);
+  const [isDeletingAll, setIsDeletingAll] = useState(false);
+  const sessionOpRef = useRef<Promise<void> | null>(null);
+
+  useAgentInit({
+    isConfigured,
+    config,
+    isConnected,
+    status,
+    connect,
+    ready: isOpen && walletReady,
+  });
+
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+
+    const assistantLabel = hostLabel || pageTitle || 'Moonscape Assistant';
+    setChatContext({
+      mode: 'personal',
+      agentName: assistantLabel,
+    });
+  }, [isOpen, hostLabel, pageTitle, setChatContext]);
+
+  useEffect(() => {
+    if (!walletReady) {
+      return;
+    }
+    void setOperationalMode('provideBytes');
+  }, [walletReady, setOperationalMode]);
+
+  useEffect(() => {
+    if (!walletConnected || !walletAccountId) {
+      return;
+    }
+    const assistantLabel = hostLabel || pageTitle || 'Moonscape Assistant';
+    setChatContext({
+      mode: 'personal',
+      agentName: assistantLabel,
+    });
+  }, [walletConnected, walletAccountId, hostLabel, pageTitle, setChatContext]);
+
+
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+    if (!currentSession || currentSession.id !== sessionId) {
+      return;
+    }
+    const assistantLabel = currentSession.name || hostLabel || pageTitle;
+    setChatContext({
+      mode: 'personal',
+      agentName: assistantLabel || 'Moonscape Assistant',
+    });
+  }, [
+    isOpen,
+    currentSession?.id,
+    currentSession?.name,
+    sessionId,
+    hostLabel,
+    pageTitle,
+    setChatContext,
+  ]);
+
+  const handleClose = useCallback(() => {
+    onClose();
+  }, [onClose]);
+
+  const handleOpenChat = useCallback(() => {
+    navigate('/chat');
+  }, [navigate]);
+
+  const handleToggleHistory = useCallback(() => {
+    setIsHistoryOpen((previous) => !previous);
+  }, []);
+
+  const handleCloseHistory = useCallback(() => {
+    setIsHistoryOpen(false);
+  }, []);
+
+  useEffect(() => {
+    let active = true;
+    if (!isHistoryOpen) {
+      return () => {
+        active = false;
+      };
+    }
+
+    setIsHistoryLoading(true);
+    loadAllSessions()
+      .catch((error) => {
+        addNotification({
+          type: 'error',
+          title: 'Failed to load history',
+          message:
+            error instanceof Error
+              ? error.message
+              : 'Unable to load previous browser conversations',
+          duration: 5000,
+        });
+      })
+      .finally(() => {
+        if (active) {
+          setIsHistoryLoading(false);
+        }
+      });
+
+    return () => {
+      active = false;
+    };
+  }, [addNotification, isHistoryOpen, loadAllSessions]);
+
+  useEffect(() => {
+    if (!isHistoryOpen) {
+      return;
+    }
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        handleCloseHistory();
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [handleCloseHistory, isHistoryOpen]);
+
+  const handleSelectSession = useCallback(
+    (session: ChatSession) => {
+      if (!session?.id) {
+        return;
+      }
+      if (sessionOpRef.current) {
+        return;
+      }
+
+      handleCloseHistory();
+
+      const operation = (async () => {
+        try {
+          await loadSession(session.id);
+          const assistantLabel = session.name || hostLabel || pageTitle;
+          setChatContext({
+            mode: 'personal',
+            agentName: assistantLabel || 'Moonscape Assistant',
+          });
+          onSessionCreated(session.id);
+        } catch (error) {
+          addNotification({
+            type: 'error',
+            title: 'Assistant Session Error',
+            message:
+              error instanceof Error
+                ? error.message
+                : 'Unable to load browser session',
+            duration: 6000,
+          });
+        }
+      })();
+
+      sessionOpRef.current = operation.finally(() => {
+        sessionOpRef.current = null;
+      });
+    },
+    [
+      addNotification,
+      handleCloseHistory,
+      loadSession,
+      onSessionCreated,
+      setChatContext,
+      hostLabel,
+      pageTitle,
+    ]
+  );
+
+  const handleDeleteSession = useCallback(
+    async (sessionId: string) => {
+      try {
+        await deleteSession(sessionId);
+        addNotification({
+          type: 'success',
+          title: 'Session Deleted',
+          message: 'Browser session deleted successfully',
+          duration: 3000,
+        });
+      } catch (error) {
+        addNotification({
+          type: 'error',
+          title: 'Delete Error',
+          message:
+            error instanceof Error ? error.message : 'Failed to delete session',
+          duration: 6000,
+        });
+      }
+    },
+    [deleteSession, addNotification]
+  );
+
+  const handleDeleteAllSessions = useCallback(async () => {
+    if (isDeletingAll) {
+      return;
+    }
+
+    const targets = sessions.filter(isBrowserSession);
+
+    if (targets.length === 0) {
+      onSessionsCleared();
+      handleCloseHistory();
+      return;
+    }
+
+    setIsDeletingAll(true);
+
+    try {
+      for (const session of targets) {
+        if (session?.id) {
+          await deleteSession(session.id);
+        }
+      }
+
+      await loadAllSessions();
+      onSessionsCleared();
+      addNotification({
+        type: 'success',
+        title: 'Sessions Deleted',
+        message: 'All browser sessions were deleted.',
+        duration: 4000,
+      });
+      handleCloseHistory();
+    } catch (error) {
+      addNotification({
+        type: 'error',
+        title: 'Delete Error',
+        message:
+          error instanceof Error
+            ? error.message
+            : 'Failed to delete browser sessions',
+        duration: 6000,
+      });
+    } finally {
+      setIsDeletingAll(false);
+      resetAttachments();
+    }
+  }, [
+    isDeletingAll,
+    sessions,
+    deleteSession,
+    loadAllSessions,
+    onSessionsCleared,
+    addNotification,
+    handleCloseHistory,
+    resetAttachments,
+  ]);
+
+  const handleDockSelection = useCallback(
+    (value: AssistantDockPlacement) => {
+      if (value === dock) {
+        return;
+      }
+      onDockChange(value);
+    },
+    [dock, onDockChange]
+  );
+
+  const handleSuggestionSelect = useCallback((value: string) => {
+    setInputValue(value);
+  }, []);
+
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+
+    if (!sessionId) {
+      return;
+    }
+
+    if (sessionOpRef.current) {
+      return;
+    }
+
+    if (currentSession?.id === sessionId) {
+      return;
+    }
+
+    const run = async () => {
+      try {
+        await loadSession(sessionId);
+      } catch (error) {
+        addNotification({
+          type: 'error',
+          title: 'Assistant Session Error',
+          message:
+            error instanceof Error
+              ? error.message
+              : 'Unable to load browser session',
+          duration: 6000,
+        });
+      } finally {
+        sessionOpRef.current = null;
+      }
+    };
+
+    sessionOpRef.current = run();
+  }, [isOpen, sessionId, currentSession?.id, loadSession, addNotification]);
+  const activeMessages = useMemo(() => {
+    if (currentSession?.id !== sessionId) {
+      return [];
+    }
+    if (chatContext.mode !== 'personal') {
+      return [];
+    }
+    return messages;
+  }, [messages, chatContext.mode, currentSession?.id, sessionId]);
+
+  const statusLabel = useMemo(() => {
+    if (isTyping) {
+      return processingContext === 'form'
+        ? 'Processing form…'
+        : 'Assistant is thinking…';
+    }
+    return getStatusLabel(isConnected, status);
+  }, [isTyping, processingContext, isConnected, status]);
+
+  const upperHost = hostLabel ? hostLabel.toUpperCase() : 'MOONSCAPE';
+  const displayTitle = pageTitle.trim() || hostLabel;
+
+  // Filter sessions to only show personal browser sessions
+  const browserSessions = useMemo(() => {
+    if (!isHistoryOpen || !Array.isArray(sessions)) {
+      return [];
+    }
+
+    try {
+      const filtered = sessions.filter(isBrowserSession);
+
+      filtered.sort((a, b) => {
+        const aDate = a.lastMessageAt || a.updatedAt;
+        const bDate = b.lastMessageAt || b.updatedAt;
+        if (!aDate || !bDate) {
+          return 0;
+        }
+        return new Date(bDate).getTime() - new Date(aDate).getTime();
+      });
+
+      const MAX_HISTORY_COUNT = 100;
+      return filtered.slice(0, MAX_HISTORY_COUNT);
+    } catch {
+      return [];
+    }
+  }, [isHistoryOpen, sessions]);
+
+  return (
+    <aside className='relative flex h-full w-full flex-col bg-white dark:bg-gray-950 border-l border-gray-200 dark:border-gray-800'>
+      <PanelBackground />
+
+      <div className='relative z-10 flex h-full flex-col'>
+        {/* Clean Header */}
+        <header className='flex items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-gray-800'>
+          <div className='flex items-center gap-2'>
+            <div className='w-6 h-6 rounded-full bg-gradient-to-br from-purple-500 to-orange-500 flex items-center justify-center flex-shrink-0'>
+              <FiCompass className='w-3 h-3 text-white' />
+            </div>
+            <span className='text-sm font-medium text-gray-900 dark:text-white'>
+              Moonscape
+            </span>
+            <span className='text-xs text-gray-500 dark:text-gray-400'>•</span>
+            <span className='text-xs text-gray-500 dark:text-gray-400'>
+              {statusLabel}
+            </span>
+            {walletConnected ? (
+              <Badge className='ml-2 text-[10px] uppercase tracking-widest bg-purple-500/10 text-purple-600 dark:bg-purple-500/20 dark:text-purple-200 border border-purple-500/20'>
+                {walletNetwork?.toUpperCase() ?? 'TESTNET'} •
+                {walletAccountId ? walletAccountId.slice(-6) : '------'}
+              </Badge>
+            ) : null}
+          </div>
+          <div className='flex items-center gap-1'>
+            <Button
+              type='button'
+              variant='ghost'
+              size='icon'
+              onClick={handleToggleHistory}
+              aria-label='Session history'
+              aria-expanded={isHistoryOpen}
+              aria-haspopup='dialog'
+              className={cn(
+                'w-6 h-6 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors',
+                isHistoryOpen && 'text-purple-500 dark:text-purple-300'
+              )}
+            >
+              <FiClock className='w-3 h-3' />
+            </Button>
+            {DOCK_OPTIONS.map((option) => (
+              <DockToggleButton
+                key={option.value}
+                option={option}
+                isActive={option.value === dock}
+                onSelect={handleDockSelection}
+              />
+            ))}
+            <Button
+              type='button'
+              variant='ghost'
+              size='icon'
+              onClick={handleClose}
+              className='w-6 h-6 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white ml-1'
+            >
+              <FiX className='w-3 h-3' />
+            </Button>
+          </div>
+        </header>
+
+        {/* Chat Messages */}
+        <div className='flex-1 overflow-hidden'>
+          <div className='h-full overflow-y-auto'>
+            <MessageList
+              messages={activeMessages}
+              isLoading={isTyping}
+              userProfile={null}
+              isHCS10={false}
+              emptyState={
+                <BrowserAssistantEmptyState
+                  hostLabel={hostLabel}
+                  pageTitle={pageTitle}
+                />
+              }
+            />
+          </div>
+        </div>
+
+        {/* Input Area - Fixed at bottom */}
+        <div className='border-t border-gray-200 dark:border-gray-800 p-4'>
+          <MoonscapeComposer
+            value={inputValue}
+            onChange={setInputValue}
+            onSubmit={handleSendMessage}
+            connected={isConnected}
+            submitting={isSubmitting || isTyping}
+            fileError={fileError}
+            files={selectedFiles}
+            onFileAdd={handleFileAdd}
+            onFileRemove={handleFileRemove}
+          />
+        </div>
+      </div>
+
+      {isHistoryOpen ? (
+        <div className='fixed inset-0 z-40 flex items-center justify-center px-4'>
+          <div
+            className='absolute inset-0 bg-[rgba(10,13,24,0.55)] backdrop-blur-sm'
+            onClick={handleCloseHistory}
+          />
+          <div className='relative z-10 w-full max-w-md overflow-hidden rounded-3xl border border-gray-200/80 dark:border-gray-700/60 bg-white/95 dark:bg-gray-900/95 shadow-[0_40px_120px_rgba(15,23,42,0.45)]'>
+            <div className='flex items-start justify-between gap-4 border-b border-gray-200/80 dark:border-gray-800/70 px-5 py-4'>
+              <div>
+                <Typography
+                  variant='caption'
+                  className='text-xs font-semibold tracking-[0.22em] text-gray-500 dark:text-gray-400 uppercase'
+                >
+                  Conversation History
+                </Typography>
+                <Typography
+                  variant='body2'
+                  className='text-sm text-gray-700 dark:text-gray-300 mt-1'
+                >
+                  Reopen a previous Moonscape browsing session.
+                </Typography>
+              </div>
+              <div className='flex items-center gap-2'>
+                <Button
+                  type='button'
+                  variant='ghost'
+                  size='sm'
+                  onClick={handleDeleteAllSessions}
+                  disabled={isDeletingAll || browserSessions.length === 0}
+                  className='h-8 rounded-xl border border-red-500/40 bg-red-500/5 text-red-500 hover:bg-red-500/10 disabled:opacity-60'
+                >
+                  <FiTrash2 className='h-3.5 w-3.5' />
+                  <span>Delete All</span>
+                </Button>
+                <Button
+                  type='button'
+                  variant='ghost'
+                  size='icon'
+                  onClick={handleCloseHistory}
+                  className='w-8 h-8 rounded-xl text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100/80 dark:hover:bg-gray-800/70'
+                >
+                  <FiX className='w-4 h-4' />
+                </Button>
+              </div>
+            </div>
+            {isHistoryLoading ? (
+              <div className='px-5 py-12 text-center text-sm text-gray-500 dark:text-gray-400'>
+                Loading sessions…
+              </div>
+            ) : browserSessions.length === 0 ? (
+              <div className='px-5 py-12 text-center text-sm text-gray-500 dark:text-gray-400'>
+                No previous browser sessions yet.
+              </div>
+            ) : (
+              <div className='flex flex-col gap-1 px-2 py-3 max-h-80 overflow-y-auto'>
+                {browserSessions.map((session) => {
+                  const isActive = currentSession?.id === session.id;
+                  const sessionTitle = session.name
+                    .replace(/^Browser @ [^-]+ - /, '')
+                    .replace(/ - \d{4}-\d{2}-\d{2} \d{2}:\d{2}$/, '');
+                  const hostMatch = session.name.match(/Browser @ ([^-]+)/);
+                  const host = hostMatch ? hostMatch[1] : 'Unknown';
+                  const lastTimestamp =
+                    session.lastMessageAt || session.updatedAt;
+                  const lastUsed = lastTimestamp
+                    ? new Date(lastTimestamp)
+                    : null;
+
+                  return (
+                    <div
+                      key={session.id}
+                      className='group relative rounded-2xl border border-transparent hover:border-purple-200/80 dark:hover:border-purple-700/60 transition-colors duration-150'
+                    >
+                      <button
+                        type='button'
+                        onClick={() => handleSelectSession(session)}
+                        className={cn(
+                          'w-full rounded-2xl px-4 py-3 flex items-center gap-3 text-left transition-colors',
+                          isActive
+                            ? 'bg-gradient-to-r from-purple-500/20 via-purple-500/10 to-orange-400/10'
+                            : 'bg-white/80 dark:bg-gray-900/80 hover:bg-purple-50/80 dark:hover:bg-purple-950/30'
+                        )}
+                      >
+                        <div className='flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-purple-500 to-orange-500 shadow-inner shadow-white/30'>
+                          <FiCompass className='h-5 w-5 text-white' />
+                        </div>
+                        <div className='flex-1 min-w-0'>
+                          <Typography
+                            variant='body2'
+                            className='font-semibold text-gray-900 dark:text-white truncate'
+                          >
+                            {sessionTitle}
+                          </Typography>
+                          <div className='mt-1 flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400'>
+                            <span className='truncate'>{host}</span>
+                            {lastUsed ? (
+                              <span>{lastUsed.toLocaleDateString()}</span>
+                            ) : null}
+                          </div>
+                        </div>
+                        {isActive ? (
+                          <span className='flex h-2 w-2 flex-shrink-0 rounded-full bg-purple-500' />
+                        ) : null}
+                      </button>
+                      <button
+                        type='button'
+                        onClick={(event) => {
+                          event.stopPropagation();
+                          handleDeleteSession(session.id);
+                        }}
+                        className='absolute right-3 top-1/2 -translate-y-1/2 hidden h-7 w-7 items-center justify-center rounded-lg bg-red-500/10 text-red-500 transition-opacity group-hover:flex'
+                        aria-label='Delete session'
+                      >
+                        <FiTrash2 className='h-3.5 w-3.5' />
+                      </button>
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+        </div>
+      ) : null}
+    </aside>
+  );
+};
+
+export default BrowserAssistantPanel;
+export { MoonscapeComposer };
diff --git a/src/renderer/components/shell/BuilderStudioRouter.tsx b/src/renderer/components/shell/BuilderStudioRouter.tsx
new file mode 100644
index 0000000..dafe7fd
--- /dev/null
+++ b/src/renderer/components/shell/BuilderStudioRouter.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { Navigate, useRoutes } from 'react-router-dom';
+import Layout from '../Layout';
+import DashboardPage from '../../pages/DashboardPage';
+import ChatPage from '../../pages/ChatPage';
+import MCPPage from '../../pages/MCPPage';
+import PluginsPage from '../../pages/PluginsPage';
+import ToolsPage from '../../pages/ToolsPage';
+import BlockTesterPage from '../../pages/BlockTesterPage';
+import SettingsPage from '../../pages/SettingsPage';
+import AcknowledgementsPage from '../../pages/AcknowledgementsPage';
+import AgentDiscoveryPage from '../../pages/AgentDiscoveryPage';
+import ConnectionsPage from '../../pages/ConnectionsPage';
+import { EntityManagerPage } from '../../pages/entity-manager-page';
+import { HCS10ProfileRegistration } from '../../pages/HCS10ProfileRegistration';
+
+const BuilderStudioRoutes: React.FC = () => {
+  const element = useRoutes([
+    { path: '', element: <DashboardPage /> },
+    { path: 'dashboard', element: <DashboardPage /> },
+    { path: 'chat/:agentId?', element: <ChatPage /> },
+    { path: 'discover', element: <AgentDiscoveryPage /> },
+    { path: 'connections', element: <ConnectionsPage /> },
+    { path: 'mcp', element: <MCPPage /> },
+    { path: 'plugins', element: <PluginsPage /> },
+    { path: 'tools', element: <ToolsPage /> },
+    { path: 'entity-manager', element: <EntityManagerPage /> },
+    { path: 'block-tester', element: <BlockTesterPage /> },
+    { path: 'hcs10-profile', element: <HCS10ProfileRegistration /> },
+    { path: 'settings', element: <SettingsPage /> },
+    { path: 'acknowledgements', element: <AcknowledgementsPage /> },
+    { path: '*', element: <Navigate to='dashboard' replace /> },
+  ]);
+
+  return <Layout>{element}</Layout>;
+};
+
+export default BuilderStudioRoutes;
+
diff --git a/src/renderer/components/shell/DesktopShellRouter.tsx b/src/renderer/components/shell/DesktopShellRouter.tsx
new file mode 100644
index 0000000..8c02461
--- /dev/null
+++ b/src/renderer/components/shell/DesktopShellRouter.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { Route, Routes } from 'react-router-dom';
+import { ShellProvider } from './ShellContext';
+import ShellLayout from './ShellLayout';
+import ShellHome from './ShellHome';
+import ShellBrowserWindow from './ShellBrowserWindow';
+import ShellChatWindow from './ShellChatWindow';
+import ShellBuilderWindow from './ShellBuilderWindow';
+import ShellDiscoveryWindow from './ShellDiscoveryWindow';
+import ShellConnectionsWindow from './ShellConnectionsWindow';
+import ShellMCPWindow from './ShellMCPWindow';
+import ShellPluginsWindow from './ShellPluginsWindow';
+import ShellToolsWindow from './ShellToolsWindow';
+import ShellSettingsWindow from './ShellSettingsWindow';
+import ShellProfileWindow from './ShellProfileWindow';
+import ShellMediaWindow from './ShellMediaWindow';
+import ShellAcknowledgementsWindow from './ShellAcknowledgementsWindow';
+
+export const DesktopShellRouter: React.FC = () => {
+  return (
+    <ShellProvider>
+      <Routes>
+        <Route element={<ShellLayout />}>
+          <Route index element={<ShellHome />} />
+          <Route path='chat'>
+            <Route index element={<ShellChatWindow />} />
+            <Route path=':agentId' element={<ShellChatWindow />} />
+          </Route>
+          <Route path='browser' element={<ShellBrowserWindow />} />
+          <Route path='media' element={<ShellMediaWindow />} />
+          <Route path='discover' element={<ShellDiscoveryWindow />} />
+          <Route path='connections' element={<ShellConnectionsWindow />} />
+          <Route path='mcp' element={<ShellMCPWindow />} />
+          <Route path='plugins' element={<ShellPluginsWindow />} />
+          <Route path='tools' element={<ShellToolsWindow />} />
+          <Route path='settings' element={<ShellSettingsWindow />} />
+          <Route path='hcs10-profile' element={<ShellProfileWindow />} />
+          <Route path='acknowledgements' element={<ShellAcknowledgementsWindow />} />
+          <Route path='builder/*' element={<ShellBuilderWindow />} />
+        </Route>
+      </Routes>
+    </ShellProvider>
+  );
+};
+
+export default DesktopShellRouter;
diff --git a/src/renderer/components/shell/ShellAcknowledgementsWindow.tsx b/src/renderer/components/shell/ShellAcknowledgementsWindow.tsx
new file mode 100644
index 0000000..3da724a
--- /dev/null
+++ b/src/renderer/components/shell/ShellAcknowledgementsWindow.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import AcknowledgementsPage from '../../pages/AcknowledgementsPage';
+import { ShellWindow } from './ShellWindow';
+import { SHELL_WINDOWS } from './ShellContext';
+
+const ShellAcknowledgementsWindow: React.FC = () => {
+  return (
+    <ShellWindow definition={SHELL_WINDOWS.acknowledgements} windowKey='acknowledgements'>
+      <div className='h-full overflow-y-auto bg-gradient-to-br from-white/85 to-white/70 dark:from-black/50 dark:to-black/60'>
+        <AcknowledgementsPage />
+      </div>
+    </ShellWindow>
+  );
+};
+
+export default ShellAcknowledgementsWindow;
diff --git a/src/renderer/components/shell/ShellBrowserWindow.tsx b/src/renderer/components/shell/ShellBrowserWindow.tsx
new file mode 100644
index 0000000..ec6a6d0
--- /dev/null
+++ b/src/renderer/components/shell/ShellBrowserWindow.tsx
@@ -0,0 +1,1117 @@
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import {
+  FiArrowRightCircle,
+  FiRotateCw,
+  FiMessageSquare,
+} from 'react-icons/fi';
+import { cn } from '../../lib/utils';
+import BrowserAssistantPanel from './BrowserAssistantPanel';
+import moonscapeLogo from '../../../../assets/moonscape-logo.png';
+import ShellWindow, { useShellWindowControls } from './ShellWindow';
+import { SHELL_WINDOWS, useShell } from './ShellContext';
+import { useConfigStore } from '../../stores/configStore';
+import type { BrowserState } from '@/types/electron';
+
+const DEFAULT_URL = 'https://hedera.kiloscribe.com';
+const SAFE_PROTOCOL = /^(https?:|ipfs:|ipns:|file:)/i;
+
+type AssistantDock = 'right' | 'left' | 'bottom';
+
+const MIN_ASSISTANT_WIDTH = 320;
+const MAX_ASSISTANT_WIDTH = 560;
+const MIN_ASSISTANT_HEIGHT = 260;
+const MAX_ASSISTANT_HEIGHT = 520;
+const DEFAULT_ASSISTANT_WIDTH = 392;
+const DEFAULT_ASSISTANT_HEIGHT = 320;
+
+const clamp = (value: number, min: number, max: number): number => {
+  return Math.min(Math.max(value, min), max);
+};
+
+const normalizeUrl = (value: string): string => {
+  if (!value) {
+    return DEFAULT_URL;
+  }
+  const trimmed = value.trim();
+  if (/^[a-zA-Z][a-zA-Z0-9+.-]*:/.test(trimmed)) {
+    return trimmed;
+  }
+  return `https://${trimmed}`;
+};
+
+interface Bookmark {
+  label: string;
+  url: string;
+  description?: string;
+}
+
+const BOOKMARKS: Bookmark[] = [
+  {
+    label: 'KiloScribe',
+    url: 'https://hedera.kiloscribe.com',
+    description: 'On-chain file storage and NFT platform',
+  },
+  {
+    label: 'SaucerSwap',
+    url: 'https://saucerswap.finance',
+    description: 'Decentralized exchange on Hedera',
+  },
+  {
+    label: 'Bonzo Finance',
+    url: 'https://bonzo.finance',
+    description: 'DeFi lending and borrowing platform',
+  },
+  {
+    label: 'hGraph.io',
+    url: 'https://hgraph.com',
+    description: 'Hedera network explorer and analytics',
+  },
+  {
+    label: 'SentX',
+    url: 'https://sentx.io',
+    description: 'Hedera wallet and DeFi services',
+  },
+];
+
+interface BookmarkButtonProps {
+  bookmark: Bookmark;
+  onSelect: (url: string) => void;
+  isDark: boolean;
+}
+
+const BookmarkButton: React.FC<BookmarkButtonProps> = ({
+  bookmark,
+  onSelect,
+  isDark,
+}) => {
+  const handleClick = useCallback(() => {
+    onSelect(bookmark.url);
+  }, [bookmark.url, onSelect]);
+
+  return (
+    <button
+      type='button'
+      onClick={handleClick}
+      className={cn(
+        'px-2 py-1 rounded transition-colors truncate max-w-24',
+        isDark
+          ? 'text-gray-300 hover:bg-orange-900/30 hover:text-orange-200 hover:border hover:border-orange-500/50'
+          : 'text-gray-700 hover:bg-orange-50 hover:text-orange-800 hover:border hover:border-orange-200'
+      )}
+      style={{ fontFamily: 'Roboto, sans-serif' }}
+      aria-label={
+        bookmark.description
+          ? `${bookmark.label}: ${bookmark.description}`
+          : bookmark.label
+      }
+    >
+      {bookmark.label}
+    </button>
+  );
+};
+
+type TrafficLightVariant = 'close' | 'minimize' | 'maximize';
+
+const TRAFFIC_LIGHT_COLORS: Record<
+  TrafficLightVariant,
+  { background: string; iconColor: string }
+> = {
+  close: {
+    background: 'bg-red-500 hover:bg-red-500/90',
+    iconColor: 'text-white',
+  },
+  minimize: {
+    background: 'bg-yellow-400 hover:bg-yellow-400/90',
+    iconColor: 'text-brand-ink',
+  },
+  maximize: {
+    background: 'bg-green-500 hover:bg-green-500/90',
+    iconColor: 'text-white',
+  },
+};
+
+interface TrafficLightProps {
+  variant: TrafficLightVariant;
+  onClick: () => void;
+  isExpanded?: boolean;
+}
+
+const TrafficLightButton: React.FC<TrafficLightProps> = ({
+  variant,
+  onClick,
+  isExpanded = false,
+}) => {
+  const { background, iconColor } = TRAFFIC_LIGHT_COLORS[variant];
+
+  return (
+    <button
+      type='button'
+      onClick={onClick}
+      className={cn(
+        'flex h-[16px] w-[16px] items-center justify-center rounded-full transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/70',
+        background
+      )}
+      aria-label={
+        variant === 'close'
+          ? 'Close browser'
+          : variant === 'minimize'
+            ? 'Minimize browser'
+            : isExpanded
+              ? 'Restore browser size'
+              : 'Maximize browser'
+      }
+      title={
+        variant === 'close'
+          ? 'Close'
+          : variant === 'minimize'
+            ? 'Minimize'
+            : isExpanded
+              ? 'Restore'
+              : 'Maximize'
+      }
+    >
+      <svg
+        className={cn('h-[12px] w-[12px] text-current', iconColor)}
+        viewBox='0 0 16 16'
+        aria-hidden='true'
+      >
+        {variant === 'close' ? (
+          <>
+            <line
+              x1='4'
+              y1='4'
+              x2='12'
+              y2='12'
+              stroke='currentColor'
+              strokeWidth='1.6'
+              strokeLinecap='round'
+            />
+            <line
+              x1='12'
+              y1='4'
+              x2='4'
+              y2='12'
+              stroke='currentColor'
+              strokeWidth='1.6'
+              strokeLinecap='round'
+            />
+          </>
+        ) : null}
+        {variant === 'minimize' ? (
+          <line
+            x1='4'
+            y1='8'
+            x2='12'
+            y2='8'
+            stroke='currentColor'
+            strokeWidth='1.8'
+            strokeLinecap='round'
+          />
+        ) : null}
+        {variant === 'maximize' ? (
+          isExpanded ? (
+            <rect
+              x='4.5'
+              y='4.5'
+              width='7'
+              height='7'
+              rx='1.6'
+              stroke='currentColor'
+              strokeWidth='1.4'
+              fill='none'
+            />
+          ) : (
+            <>
+              <line
+                x1='8'
+                y1='4'
+                x2='8'
+                y2='12'
+                stroke='currentColor'
+                strokeWidth='1.6'
+                strokeLinecap='round'
+              />
+              <line
+                x1='4'
+                y1='8'
+                x2='12'
+                y2='8'
+                stroke='currentColor'
+                strokeWidth='1.6'
+                strokeLinecap='round'
+              />
+            </>
+          )
+        ) : null}
+      </svg>
+    </button>
+  );
+};
+
+const initialBrowserState: BrowserState = {
+  requestedUrl: DEFAULT_URL,
+  currentUrl: DEFAULT_URL,
+  title: '',
+  isLoading: true,
+  canGoBack: false,
+  canGoForward: false,
+  lastError: null,
+};
+
+type PageContext = {
+  title: string;
+  description: string;
+  selection: string;
+  text: string;
+  favicons: string[];
+};
+
+const PAGE_CONTEXT_SCRIPT = String.raw`
+(() => {
+  const obtainSelection = () => {
+    try {
+      const raw = window.getSelection ? window.getSelection().toString() : '';
+      return raw || '';
+    } catch (error) {
+      return '';
+    }
+  };
+
+  const meta = document.querySelector('meta[name="description"]');
+  const description = meta && typeof meta.content === 'string' ? meta.content : '';
+
+  let textContent = '';
+  try {
+    textContent = document.body ? document.body.innerText || '' : '';
+  } catch (error) {
+    textContent = '';
+  }
+
+  let computedTitle = '';
+  try {
+    computedTitle = document.title || '';
+  } catch (error) {
+    computedTitle = '';
+  }
+
+  const iconLinks = Array.from(
+    document.querySelectorAll(
+      'link[rel~=\"icon\"], link[rel=\"shortcut icon\"], link[rel=\"apple-touch-icon\"], link[rel=\"apple-touch-icon-precomposed\"], link[rel=\"mask-icon\"]'
+    )
+  )
+    .map((link) => link.href || link.getAttribute('href') || '')
+    .filter(Boolean);
+
+  return {
+    title: computedTitle,
+    description,
+    selection: obtainSelection(),
+    text: textContent,
+    favicons: iconLinks,
+  };
+})();
+`;
+
+const FAVICON_SCRIPT = String.raw`
+(() =>
+  Array.from(
+    document.querySelectorAll(
+      'link[rel~=\"icon\"], link[rel=\"shortcut icon\"], link[rel=\"apple-touch-icon\"], link[rel=\"apple-touch-icon-precomposed\"], link[rel=\"mask-icon\"]'
+    )
+  )
+    .map((link) => link.href || link.getAttribute('href') || '')
+    .filter(Boolean)
+)();
+`;
+
+const isBrowserState = (value: unknown): value is BrowserState => {
+  if (!value || typeof value !== 'object') {
+    return false;
+  }
+  const candidate = value as Partial<BrowserState>;
+  if (typeof candidate.requestedUrl !== 'string') {
+    return false;
+  }
+  if (typeof candidate.currentUrl !== 'string') {
+    return false;
+  }
+  if (typeof candidate.title !== 'string') {
+    return false;
+  }
+  if (typeof candidate.isLoading !== 'boolean') {
+    return false;
+  }
+  if (typeof candidate.canGoBack !== 'boolean') {
+    return false;
+  }
+  if (typeof candidate.canGoForward !== 'boolean') {
+    return false;
+  }
+  if (
+    !(typeof candidate.lastError === 'string' || candidate.lastError === null)
+  ) {
+    return false;
+  }
+  return true;
+};
+
+const BrowserSurface: React.FC = () => {
+  const [browserState, setBrowserState] =
+    useState<BrowserState>(initialBrowserState);
+  const [inputValue, setInputValue] = useState<string>(
+    initialBrowserState.requestedUrl
+  );
+  const [isAssistantOpen, setIsAssistantOpen] = useState(false);
+  const [assistantSessionId, setAssistantSessionId] = useState<string | null>(
+    null
+  );
+  const [assistantDock, setAssistantDock] = useState<AssistantDock>('right');
+  const [assistantWidth, setAssistantWidth] = useState<number>(
+    DEFAULT_ASSISTANT_WIDTH
+  );
+  const [assistantHeight, setAssistantHeight] = useState<number>(
+    DEFAULT_ASSISTANT_HEIGHT
+  );
+  const browserContainerRef = useRef<HTMLDivElement | null>(null);
+  const isDarkTheme = useConfigStore((state) => state.config?.advanced?.theme === 'dark');
+  const urlInputRef = useRef<HTMLInputElement | null>(null);
+  const isMinimizedRef = useRef(false);
+  const assistantResizeStateRef = useRef<{
+    orientation: 'horizontal' | 'vertical';
+    direction: 1 | -1;
+    startWidth: number;
+    startHeight: number;
+    startX: number;
+    startY: number;
+  } | null>(null);
+  const location = useLocation();
+  const navigate = useNavigate();
+  const { minimize, close, toggleExpand, isExpanded, isMinimized } =
+    useShellWindowControls();
+  const { setWindowMetadata, resetWindowMetadata, windowMetadata } = useShell();
+  const browserMetadata = windowMetadata.browser;
+
+  const applyBounds = useCallback(() => {
+    const api = window.electron?.browser;
+    const container = browserContainerRef.current;
+    if (!api || !container) {
+      return;
+    }
+    if (isMinimizedRef.current) {
+      return;
+    }
+    const rect = container.getBoundingClientRect();
+    const bounds = {
+      x: Math.round(rect.left),
+      y: Math.round(rect.top),
+      width: Math.max(Math.round(rect.width), 0),
+      height: Math.max(Math.round(rect.height), 0),
+    };
+    void api.setBounds(bounds);
+  }, []);
+
+  useEffect(() => {
+    isMinimizedRef.current = isMinimized;
+  }, [isMinimized]);
+
+  useEffect(() => {
+    const api = window.electron?.browser;
+    if (!api) {
+      return;
+    }
+    void api.attach().then(() => {
+      applyBounds();
+    });
+    return () => {
+      void api.detach();
+    };
+  }, [applyBounds]);
+
+  useEffect(() => {
+    const api = window.electron?.browser;
+    if (!api) {
+      return;
+    }
+    if (isMinimized) {
+      void api.detach();
+      return;
+    }
+    void api.attach().then(() => {
+      applyBounds();
+    });
+  }, [isMinimized, applyBounds]);
+
+  useEffect(() => {
+    const container = browserContainerRef.current;
+    const api = window.electron?.browser;
+    if (!container || !api) {
+      return;
+    }
+    applyBounds();
+    let observer: ResizeObserver | null = null;
+    if (typeof ResizeObserver !== 'undefined') {
+      observer = new ResizeObserver(() => {
+        applyBounds();
+      });
+      observer.observe(container);
+    }
+    window.addEventListener('resize', applyBounds);
+    return () => {
+      window.removeEventListener('resize', applyBounds);
+      if (observer) {
+        observer.disconnect();
+      }
+    };
+  }, [applyBounds]);
+
+  useEffect(() => {
+    if (!isAssistantOpen) {
+      return;
+    }
+    applyBounds();
+  }, [
+    applyBounds,
+    isAssistantOpen,
+    assistantDock,
+    assistantHeight,
+    assistantWidth,
+  ]);
+
+  useEffect(() => {
+    if (isAssistantOpen) {
+      return;
+    }
+    assistantResizeStateRef.current = null;
+    document.body.style.removeProperty('user-select');
+    document.body.style.removeProperty('cursor');
+  }, [isAssistantOpen]);
+
+  const handleBrowserStateUpdate = useCallback((state: BrowserState) => {
+    setBrowserState(state);
+    const nextValue = state.requestedUrl || state.currentUrl || DEFAULT_URL;
+    const activeElement = document.activeElement;
+    if (activeElement === urlInputRef.current) {
+      return;
+    }
+    setInputValue(nextValue);
+  }, []);
+
+  useEffect(() => {
+    let active = true;
+    let unsubscribe: (() => void) | undefined;
+
+    const subscribe = async () => {
+      const api = window.electron?.browser;
+      if (!api) {
+        return;
+      }
+      try {
+        const initialState = await api.getState();
+        if (active && isBrowserState(initialState)) {
+          handleBrowserStateUpdate(initialState);
+        }
+      } catch {
+        if (active) {
+          setBrowserState(initialBrowserState);
+        }
+      }
+      unsubscribe = api.onState((state) => {
+        if (!active) {
+          return;
+        }
+        if (isBrowserState(state)) {
+          handleBrowserStateUpdate(state);
+        }
+      });
+    };
+
+    void subscribe();
+
+    return () => {
+      active = false;
+      if (unsubscribe) {
+        unsubscribe();
+      }
+    };
+  }, [handleBrowserStateUpdate]);
+
+  useEffect(() => {
+    let label = browserState.title.trim();
+    let fallbackIconUrl: string | null = null;
+    const icon = SHELL_WINDOWS.browser.icon;
+    try {
+      const url = new URL(browserState.currentUrl);
+      fallbackIconUrl = `${url.origin}/favicon.ico`;
+      if (!label) {
+        label = url.hostname;
+      }
+    } catch {
+      fallbackIconUrl = null;
+    }
+    if (!label) {
+      label = SHELL_WINDOWS.browser.label;
+    }
+    setWindowMetadata('browser', { label, icon });
+    if (!browserMetadata?.iconUrl && fallbackIconUrl) {
+      setWindowMetadata('browser', { iconUrl: fallbackIconUrl });
+    }
+  }, [
+    browserMetadata?.iconUrl,
+    browserState.currentUrl,
+    browserState.title,
+    setWindowMetadata,
+  ]);
+
+  useEffect(() => {
+    return () => {
+      if (!isMinimizedRef.current) {
+        resetWindowMetadata('browser');
+      }
+    };
+  }, [resetWindowMetadata]);
+
+  const collectFavicons = useCallback(async () => {
+    const api = window.electron?.browser;
+    if (!api) {
+      return;
+    }
+    try {
+      const favicons = await api.executeJavaScript<string[] | null>(
+        FAVICON_SCRIPT
+      );
+      if (Array.isArray(favicons) && favicons.length > 0) {
+        const resolvedIcon = favicons
+          .map((entry) => {
+            if (typeof entry !== 'string' || entry.trim().length === 0) {
+              return null;
+            }
+            try {
+              return new URL(entry, browserState.currentUrl).href;
+            } catch {
+              return entry;
+            }
+          })
+          .find((value) => value && value.trim().length > 0);
+        if (resolvedIcon) {
+          setWindowMetadata('browser', { iconUrl: resolvedIcon });
+        }
+      }
+    } catch {
+      return;
+    }
+  }, [browserState.currentUrl, setWindowMetadata]);
+
+  useEffect(() => {
+    if (browserState.isLoading) {
+      return;
+    }
+    void collectFavicons();
+  }, [browserState.isLoading, collectFavicons]);
+
+  const handleShellMinimize = useCallback(() => {
+    const api = window.electron?.browser;
+    if (api) {
+      void api.detach();
+    }
+    minimize();
+  }, [minimize]);
+
+  const handleShellToggleExpand = useCallback(() => {
+    toggleExpand();
+  }, [toggleExpand]);
+
+  const handleShellClose = useCallback(() => {
+    const api = window.electron?.browser;
+    if (api) {
+      void api.detach();
+    }
+    close();
+  }, [close]);
+
+  const openExternal = useCallback((targetUrl: string) => {
+    if (window.electron?.openExternal) {
+      window.electron.openExternal(targetUrl).catch((): void => undefined);
+      return;
+    }
+    window.open(targetUrl, '_blank', 'noopener,noreferrer');
+  }, []);
+
+  const navigateTo = useCallback(
+    (destination: string) => {
+      const normalized = normalizeUrl(destination);
+      if (!SAFE_PROTOCOL.test(normalized)) {
+        openExternal(normalized);
+        return;
+      }
+      setBrowserState((prev) => ({
+        ...prev,
+        requestedUrl: normalized,
+        isLoading: true,
+        lastError: null,
+      }));
+      setInputValue(normalized);
+      const api = window.electron?.browser;
+      if (api) {
+        void api.navigate(normalized);
+      }
+    },
+    [openExternal]
+  );
+
+  const handleSubmit = useCallback(
+    (event: React.FormEvent<HTMLFormElement>) => {
+      event.preventDefault();
+      navigateTo(inputValue.trim());
+    },
+    [inputValue, navigateTo]
+  );
+
+  const handleChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      setInputValue(event.target.value);
+    },
+    []
+  );
+
+  const handleRefresh = useCallback(() => {
+    const api = window.electron?.browser;
+    if (!api) {
+      return;
+    }
+    void api.reload();
+  }, []);
+
+  const handleGoBack = useCallback(() => {
+    const api = window.electron?.browser;
+    if (!api || !browserState.canGoBack) {
+      return;
+    }
+    void api.goBack();
+  }, [browserState.canGoBack]);
+
+  const handleGoForward = useCallback(() => {
+    const api = window.electron?.browser;
+    if (!api || !browserState.canGoForward) {
+      return;
+    }
+    void api.goForward();
+  }, [browserState.canGoForward]);
+
+  const handleToggleAssistant = useCallback(() => {
+    setIsAssistantOpen((previous) => !previous);
+  }, []);
+
+  const handleAssistantClose = useCallback(() => {
+    setIsAssistantOpen(false);
+  }, []);
+
+  const handleSessionCreated = useCallback((sessionIdValue: string) => {
+    setAssistantSessionId(sessionIdValue);
+  }, []);
+
+  const handleAssistantSessionsCleared = useCallback(() => {
+    setAssistantSessionId(null);
+  }, []);
+
+  const handleAssistantDockChange = useCallback((nextDock: AssistantDock) => {
+    setAssistantDock(nextDock);
+  }, []);
+
+  const handleAssistantPointerMove = useCallback((event: PointerEvent) => {
+    const state = assistantResizeStateRef.current;
+    if (!state) {
+      return;
+    }
+    if (state.orientation === 'horizontal') {
+      const delta = (event.clientX - state.startX) * state.direction;
+      const nextWidth = clamp(
+        state.startWidth + delta,
+        MIN_ASSISTANT_WIDTH,
+        MAX_ASSISTANT_WIDTH
+      );
+      setAssistantWidth(nextWidth);
+      return;
+    }
+    const delta = (event.clientY - state.startY) * state.direction;
+    const nextHeight = clamp(
+      state.startHeight + delta,
+      MIN_ASSISTANT_HEIGHT,
+      MAX_ASSISTANT_HEIGHT
+    );
+    setAssistantHeight(nextHeight);
+  }, []);
+
+  const handleAssistantPointerUp = useCallback(() => {
+    assistantResizeStateRef.current = null;
+    document.body.style.removeProperty('user-select');
+    document.body.style.removeProperty('cursor');
+    window.removeEventListener('pointermove', handleAssistantPointerMove);
+    window.removeEventListener('pointerup', handleAssistantPointerUp);
+  }, [handleAssistantPointerMove]);
+
+  const handleAssistantResizeStart = useCallback(
+    (event: React.PointerEvent<HTMLDivElement>) => {
+      if (!isAssistantOpen) {
+        return;
+      }
+      const orientation =
+        assistantDock === 'bottom' ? 'vertical' : 'horizontal';
+      const direction: 1 | -1 =
+        assistantDock === 'left' ? 1 : assistantDock === 'right' ? -1 : -1;
+      assistantResizeStateRef.current = {
+        orientation,
+        direction,
+        startWidth: assistantWidth,
+        startHeight: assistantHeight,
+        startX: event.clientX,
+        startY: event.clientY,
+      };
+      document.body.style.userSelect = 'none';
+      document.body.style.cursor =
+        orientation === 'horizontal' ? 'ew-resize' : 'ns-resize';
+      window.addEventListener('pointermove', handleAssistantPointerMove);
+      window.addEventListener('pointerup', handleAssistantPointerUp);
+      event.preventDefault();
+    },
+    [
+      assistantDock,
+      assistantHeight,
+      assistantWidth,
+      handleAssistantPointerMove,
+      handleAssistantPointerUp,
+      isAssistantOpen,
+    ]
+  );
+
+  const handleAssistantResizeMouseStart = useCallback(
+    (event: React.MouseEvent<HTMLDivElement>) => {
+      handleAssistantResizeStart(
+        event as unknown as React.PointerEvent<HTMLDivElement>
+      );
+    },
+    [handleAssistantResizeStart]
+  );
+
+  useEffect(() => {
+    return () => {
+      window.removeEventListener('pointermove', handleAssistantPointerMove);
+      window.removeEventListener('pointerup', handleAssistantPointerUp);
+    };
+  }, [handleAssistantPointerMove, handleAssistantPointerUp]);
+
+  const fetchPageContext =
+    useCallback(async (): Promise<PageContext | null> => {
+      if (browserState.isLoading) {
+        return null;
+      }
+      const api = window.electron?.browser;
+      if (!api) {
+        return null;
+      }
+      try {
+        const result = await api.executeJavaScript<PageContext | null>(
+          PAGE_CONTEXT_SCRIPT
+        );
+        if (!result || typeof result !== 'object') {
+          return null;
+        }
+        const context = result as Partial<PageContext>;
+        const favicons = Array.isArray(context.favicons)
+          ? context.favicons
+          : [];
+        const resolvedIcon = favicons
+          .map((entry) => {
+            if (typeof entry !== 'string' || entry.trim().length === 0) {
+              return null;
+            }
+            try {
+              return new URL(entry, browserState.currentUrl).href;
+            } catch {
+              return entry;
+            }
+          })
+          .find((value) => value && value.trim().length > 0);
+        if (resolvedIcon) {
+          setWindowMetadata('browser', { iconUrl: resolvedIcon });
+        }
+        return {
+          title: typeof context.title === 'string' ? context.title : '',
+          description:
+            typeof context.description === 'string' ? context.description : '',
+          selection:
+            typeof context.selection === 'string' ? context.selection : '',
+          text: typeof context.text === 'string' ? context.text : '',
+          favicons,
+        };
+      } catch {
+        return null;
+      }
+    }, [browserState.currentUrl, browserState.isLoading, setWindowMetadata]);
+
+  useEffect(() => {
+    const params = new URLSearchParams(location.search);
+    const target = params.get('target');
+    if (target) {
+      navigateTo(target);
+      navigate('/browser', { replace: true });
+    }
+  }, [location.search, navigate, navigateTo]);
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (!(event.ctrlKey || event.metaKey)) {
+        return;
+      }
+      if (!event.shiftKey) {
+        return;
+      }
+      if (event.key.toLowerCase() !== 'i') {
+        return;
+      }
+      const api = window.electron?.browser;
+      if (!api) {
+        return;
+      }
+      event.preventDefault();
+      void api.openDevTools();
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, []);
+
+  const actionButtonClass = useCallback(
+    (enabled: boolean) =>
+      cn(
+        'p-1 rounded text-white transition-colors',
+        enabled ? 'hover:bg-white/10' : 'opacity-50 cursor-not-allowed'
+      ),
+    []
+  );
+
+  const hostLabel = useMemo(() => {
+    const target = browserState.currentUrl || browserState.requestedUrl;
+    try {
+      const parsed = new URL(target);
+      if (parsed.hostname) {
+        return parsed.hostname;
+      }
+      if (parsed.host) {
+        return parsed.host;
+      }
+      return target;
+    } catch (error) {
+      if (target.includes('//')) {
+        const afterScheme = target.split('//')[1];
+        if (afterScheme) {
+          const candidate = afterScheme.split('/')[0];
+          if (candidate) {
+            return candidate;
+          }
+        }
+      }
+      return target;
+    }
+  }, [browserState.currentUrl, browserState.requestedUrl]);
+
+  const handleBookmarkSelect = useCallback(
+    (url: string) => {
+      navigateTo(url);
+    },
+    [navigateTo]
+  );
+
+  const isBottomDock = assistantDock === 'bottom';
+
+  const assistantNode = !isAssistantOpen ? null : (
+    <div
+      data-testid='assistant-dock'
+      data-dock={assistantDock}
+      style={
+        assistantDock === 'bottom'
+          ? { height: `${assistantHeight}px` }
+          : { width: `${assistantWidth}px` }
+      }
+      className={cn(
+        'relative flex-shrink-0 overflow-hidden bg-[rgba(14,16,28,0.92)] text-white backdrop-blur-3xl transition-[width,height] duration-200 min-h-0',
+        assistantDock === 'bottom'
+          ? 'w-full border-t border-white/10'
+          : 'h-full',
+        assistantDock === 'left' ? 'border-r border-white/10' : assistantDock === 'right' ? 'border-l border-white/10' : ''
+      )}
+    >
+      <div
+        role='separator'
+        aria-orientation={
+          assistantDock === 'bottom' ? 'horizontal' : 'vertical'
+        }
+        data-testid='assistant-resizer'
+        onPointerDown={handleAssistantResizeStart}
+        onMouseDown={handleAssistantResizeMouseStart}
+        className={cn(
+          'absolute z-20',
+          assistantDock === 'bottom'
+            ? 'top-0 left-0 h-2 w-full cursor-ns-resize'
+            : 'top-0 h-full w-2 cursor-ew-resize',
+          assistantDock === 'left' ? 'right-0' : '',
+          assistantDock === 'right' ? 'left-0' : ''
+        )}
+      >
+        <span className='block h-full w-full rounded-full bg-white/10 opacity-0 transition-opacity duration-150 hover:opacity-80' />
+      </div>
+      <BrowserAssistantPanel
+        isOpen={isAssistantOpen}
+        sessionId={assistantSessionId}
+        hostLabel={hostLabel}
+        currentUrl={browserState.currentUrl}
+        pageTitle={browserState.title}
+        onSessionCreated={handleSessionCreated}
+        onSessionsCleared={handleAssistantSessionsCleared}
+        fetchPageContext={fetchPageContext}
+        onClose={handleAssistantClose}
+        dock={assistantDock}
+        onDockChange={handleAssistantDockChange}
+      />
+    </div>
+  );
+
+  return (
+    <div className='relative flex h-full w-full min-h-0 flex-col overflow-hidden rounded-desktop-lg border border-white/5 bg-hol-glass-dark/80 text-white shadow-desktop-window backdrop-blur-desktop'>
+      <div className='relative z-10 bg-gradient-to-r from-purple-600 to-orange-400 p-2 flex items-center gap-2'>
+        <div className='flex items-center gap-[6px] pl-1'>
+          <TrafficLightButton variant='close' onClick={handleShellClose} />
+          <TrafficLightButton
+            variant='minimize'
+            onClick={handleShellMinimize}
+          />
+          <TrafficLightButton
+            variant='maximize'
+            onClick={handleShellToggleExpand}
+            isExpanded={isExpanded}
+          />
+        </div>
+
+        <div className='flex items-center gap-2 ml-4'>
+          <button
+            type='button'
+            onClick={handleGoBack}
+            disabled={!browserState.canGoBack}
+            className={actionButtonClass(browserState.canGoBack)}
+            aria-label='Go Back'
+          >
+            <FiArrowRightCircle className='w-4 h-4 text-white rotate-180' />
+          </button>
+          <button
+            type='button'
+            onClick={handleGoForward}
+            disabled={!browserState.canGoForward}
+            className={actionButtonClass(browserState.canGoForward)}
+            aria-label='Go Forward'
+          >
+            <FiArrowRightCircle className='w-4 h-4 text-white' />
+          </button>
+          <button
+            type='button'
+            onClick={handleRefresh}
+            className='p-1 hover:bg-white/10 rounded'
+            aria-label='Refresh'
+          >
+            <FiRotateCw className='w-4 h-4 text-white' />
+          </button>
+        </div>
+
+        <form
+          onSubmit={handleSubmit}
+          className='flex-1 mx-4 flex items-center gap-2 bg-white/90 rounded-md px-3 py-1'
+        >
+          <img
+            src={moonscapeLogo}
+            alt='Moonscape'
+            className='w-4 h-4 object-contain'
+          />
+          <input
+            id='browser-url'
+            ref={urlInputRef}
+            value={inputValue}
+            onChange={handleChange}
+            className='flex-1 bg-transparent text-gray-700 text-sm focus:outline-none placeholder:text-gray-500'
+            placeholder='Search or enter address'
+            aria-label='Browser address'
+            style={{ fontFamily: 'Roboto, sans-serif' }}
+          />
+        </form>
+
+        <div className='flex items-center gap-2'>
+          <button
+            type='button'
+            onClick={handleToggleAssistant}
+            className='p-1 hover:bg-white/10 rounded text-white'
+            aria-label='Toggle Assistant'
+          >
+            <FiMessageSquare className='w-4 h-4' />
+          </button>
+        </div>
+      </div>
+
+      <div
+        className={cn(
+          'relative z-10 flex flex-1 overflow-hidden',
+          isBottomDock ? 'flex-col' : 'flex-row'
+        )}
+      >
+        {assistantDock === 'left' ? assistantNode : null}
+        <div className='flex-1 min-h-0 flex flex-col'>
+          <div className={cn(
+            'flex items-center gap-1 px-3 py-1 border-b text-xs transition-colors duration-300',
+            isDarkTheme
+              ? 'bg-gray-900 border-gray-700'
+              : 'bg-gray-100 border-gray-200'
+          )}>
+            {BOOKMARKS.map((bookmark) => (
+              <BookmarkButton
+                key={bookmark.url}
+                bookmark={bookmark}
+                onSelect={handleBookmarkSelect}
+                isDark={isDarkTheme}
+              />
+            ))}
+          </div>
+          <div className='flex-1 min-h-0 relative'>
+            <div
+              ref={browserContainerRef}
+              className='absolute inset-0'
+              data-testid='browser-surface'
+              data-current-url={
+                browserState.currentUrl || browserState.requestedUrl
+              }
+            />
+          </div>
+        </div>
+        {assistantDock === 'right' ? assistantNode : null}
+        {assistantDock === 'bottom' ? assistantNode : null}
+      </div>
+      <div className='pointer-events-none absolute inset-x-0 bottom-0 h-14 bg-gradient-to-b from-transparent via-black/15 to-black/35' />
+    </div>
+  );
+};
+
+const ShellBrowserWindow: React.FC = () => {
+  return (
+    <ShellWindow windowKey='browser' hideChrome>
+      <BrowserSurface />
+    </ShellWindow>
+  );
+};
+
+export default ShellBrowserWindow;
+
+export { BrowserSurface as BrowserSurfaceForTesting };
diff --git a/src/renderer/components/shell/ShellBuilderWindow.tsx b/src/renderer/components/shell/ShellBuilderWindow.tsx
new file mode 100644
index 0000000..3388429
--- /dev/null
+++ b/src/renderer/components/shell/ShellBuilderWindow.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { ShellWindow } from './ShellWindow';
+import { SHELL_WINDOWS } from './ShellContext';
+import BuilderStudioRoutes from './BuilderStudioRouter';
+
+const ShellBuilderWindow: React.FC = () => {
+  return (
+    <ShellWindow definition={SHELL_WINDOWS.builder} windowKey='builder'>
+      <div className='h-full overflow-hidden bg-white/85 dark:bg-black/60'>
+        <BuilderStudioRoutes />
+      </div>
+    </ShellWindow>
+  );
+};
+
+export default ShellBuilderWindow;
+
diff --git a/src/renderer/components/shell/ShellChatWindow.tsx b/src/renderer/components/shell/ShellChatWindow.tsx
new file mode 100644
index 0000000..344262b
--- /dev/null
+++ b/src/renderer/components/shell/ShellChatWindow.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import ChatPage from '../../pages/ChatPage';
+import { ShellWindow } from './ShellWindow';
+import { SHELL_WINDOWS } from './ShellContext';
+
+const ShellChatWindow: React.FC = () => {
+  return (
+    <ShellWindow definition={SHELL_WINDOWS.chat} windowKey='chat'>
+      <div className='h-full overflow-hidden bg-gradient-to-br from-white/80 to-white/60 dark:from-black/50 dark:to-black/60'>
+        <ChatPage />
+      </div>
+    </ShellWindow>
+  );
+};
+
+export default ShellChatWindow;
+
diff --git a/src/renderer/components/shell/ShellConnectionsWindow.tsx b/src/renderer/components/shell/ShellConnectionsWindow.tsx
new file mode 100644
index 0000000..3853554
--- /dev/null
+++ b/src/renderer/components/shell/ShellConnectionsWindow.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import ConnectionsPage from '../../pages/ConnectionsPage';
+import { ShellWindow } from './ShellWindow';
+import { SHELL_WINDOWS } from './ShellContext';
+
+const ShellConnectionsWindow: React.FC = () => {
+  return (
+    <ShellWindow definition={SHELL_WINDOWS.connections} windowKey='connections'>
+      <div className='h-full overflow-hidden'>
+        <ConnectionsPage />
+      </div>
+    </ShellWindow>
+  );
+};
+
+export default ShellConnectionsWindow;
\ No newline at end of file
diff --git a/src/renderer/components/shell/ShellContext.tsx b/src/renderer/components/shell/ShellContext.tsx
new file mode 100644
index 0000000..61bedbb
--- /dev/null
+++ b/src/renderer/components/shell/ShellContext.tsx
@@ -0,0 +1,304 @@
+import React, { createContext, useCallback, useContext, useMemo, useState } from 'react';
+import { HiChatBubbleLeftRight, HiGlobeAlt, HiWrenchScrewdriver, HiMagnifyingGlass, HiLink, HiServerStack, HiPuzzlePiece, HiCog6Tooth, HiUserCircle, HiPhoto, HiHeart } from 'react-icons/hi2';
+import { FiTool } from 'react-icons/fi';
+import type { IconType } from 'react-icons';
+
+export type ShellWindowKey =
+  | 'chat'
+  | 'browser'
+  | 'builder'
+  | 'discover'
+  | 'connections'
+  | 'mcp'
+  | 'plugins'
+  | 'tools'
+  | 'settings'
+  | 'profile'
+  | 'media'
+  | 'acknowledgements';
+
+export interface ShellWindowDefinition {
+  key: ShellWindowKey;
+  title: string;
+  route: string;
+  icon: IconType;
+  label: string;
+}
+
+export interface ShellWindowMetadata {
+  label: string;
+  icon: IconType;
+  iconUrl?: string | null;
+}
+
+interface ShellContextValue {
+  activeWindow: ShellWindowKey | null;
+  openWindows: ShellWindowKey[];
+  registerWindow(key: ShellWindowKey, metadata?: Partial<ShellWindowMetadata>): void;
+  unregisterWindow(key: ShellWindowKey): void;
+  setActiveWindow(key: ShellWindowKey | null): void;
+  windowStates: Partial<Record<ShellWindowKey, unknown>>;
+  setWindowState(key: ShellWindowKey, value: unknown): void;
+  clearWindowState(key: ShellWindowKey): void;
+  minimizedWindows: ShellWindowKey[];
+  minimizeWindow(key: ShellWindowKey): void;
+  restoreWindow(key: ShellWindowKey): void;
+  getWindowState<T = unknown>(key: ShellWindowKey): T | undefined;
+  isWindowMinimized(key: ShellWindowKey): boolean;
+  windowMetadata: Record<ShellWindowKey, ShellWindowMetadata>;
+  setWindowMetadata(key: ShellWindowKey, metadata: Partial<ShellWindowMetadata>): void;
+  resetWindowMetadata(key: ShellWindowKey): void;
+}
+
+const ShellContext = createContext<ShellContextValue | null>(null);
+
+export const SHELL_WINDOWS: Record<ShellWindowKey, ShellWindowDefinition> = {
+  chat: {
+    key: 'chat',
+    title: 'Chat Agent',
+    route: '/chat',
+    icon: HiChatBubbleLeftRight,
+    label: 'Chat Agent',
+  },
+  browser: {
+    key: 'browser',
+    title: 'Moonscape',
+    route: '/browser',
+    icon: HiGlobeAlt,
+    label: 'Moonscape',
+  },
+  media: {
+    key: 'media',
+    title: 'Media Library',
+    route: '/media',
+    icon: HiPhoto,
+    label: 'Media Library',
+  },
+  builder: {
+    key: 'builder',
+    title: 'Builder Studio',
+    route: '/builder',
+    icon: HiWrenchScrewdriver,
+    label: 'Builder Studio',
+  },
+  discover: {
+    key: 'discover',
+    title: 'Discover',
+    route: '/discover',
+    icon: HiMagnifyingGlass,
+    label: 'Discover',
+  },
+  connections: {
+    key: 'connections',
+    title: 'Connections',
+    route: '/connections',
+    icon: HiLink,
+    label: 'Connections',
+  },
+  mcp: {
+    key: 'mcp',
+    title: 'MCP Servers',
+    route: '/mcp',
+    icon: HiServerStack,
+    label: 'MCP Servers',
+  },
+  plugins: {
+    key: 'plugins',
+    title: 'Plugins',
+    route: '/plugins',
+    icon: HiPuzzlePiece,
+    label: 'Plugins',
+  },
+  tools: {
+    key: 'tools',
+    title: 'Tools',
+    route: '/tools',
+    icon: FiTool,
+    label: 'Tools',
+  },
+  settings: {
+    key: 'settings',
+    title: 'Settings',
+    route: '/settings',
+    icon: HiCog6Tooth,
+    label: 'Settings',
+  },
+  profile: {
+    key: 'profile',
+    title: 'My Profile',
+    route: '/hcs10-profile',
+    icon: HiUserCircle,
+    label: 'My Profile',
+  },
+  acknowledgements: {
+    key: 'acknowledgements',
+    title: 'Acknowledgements',
+    route: '/acknowledgements',
+    icon: HiHeart,
+    label: 'Acknowledgements',
+  },
+};
+
+const BASE_WINDOW_METADATA: Record<ShellWindowKey, ShellWindowMetadata> = Object.keys(
+  SHELL_WINDOWS
+).reduce((acc, rawKey) => {
+  const key = rawKey as ShellWindowKey;
+  const definition = SHELL_WINDOWS[key];
+  acc[key] = {
+    label: definition.label,
+    icon: definition.icon,
+    iconUrl: null,
+  };
+  return acc;
+}, {} as Record<ShellWindowKey, ShellWindowMetadata>);
+
+export const ShellProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [activeWindow, setActiveWindow] = useState<ShellWindowKey | null>(null);
+  const [openWindows, setOpenWindows] = useState<ShellWindowKey[]>([]);
+  const [windowStates, setWindowStates] = useState<Partial<Record<ShellWindowKey, unknown>>>(
+    {}
+  );
+  const [minimizedWindows, setMinimizedWindows] = useState<ShellWindowKey[]>([]);
+  const [windowMetadata, setWindowMetadataState] = useState<Record<ShellWindowKey, ShellWindowMetadata>>(
+    BASE_WINDOW_METADATA
+  );
+
+  const registerWindow = useCallback((key: ShellWindowKey, metadata?: Partial<ShellWindowMetadata>) => {
+    setOpenWindows((prev) => (prev.includes(key) ? prev : [...prev, key]));
+    setMinimizedWindows((prev) => prev.filter((value) => value !== key));
+    setActiveWindow(key);
+    if (metadata && Object.keys(metadata).length > 0) {
+      setWindowMetadataState((prev) => ({
+        ...prev,
+        [key]: {
+          ...(prev[key] ?? BASE_WINDOW_METADATA[key]),
+          ...metadata,
+        },
+      }));
+    }
+  }, []);
+
+  const unregisterWindow = useCallback((key: ShellWindowKey) => {
+    setOpenWindows((prev) => prev.filter((value) => value !== key));
+    setMinimizedWindows((prev) => prev.filter((value) => value !== key));
+    setActiveWindow((current) => {
+      if (current === key) {
+        return null;
+      }
+      return current;
+    });
+  }, []);
+
+  const setWindowState = useCallback((key: ShellWindowKey, value: unknown) => {
+    setWindowStates((prev) => ({
+      ...prev,
+      [key]: value,
+    }));
+  }, []);
+
+  const clearWindowState = useCallback((key: ShellWindowKey) => {
+    setWindowStates((prev) => {
+      if (!(key in prev)) {
+        return prev;
+      }
+      const next = { ...prev };
+      delete next[key];
+      return next;
+    });
+  }, []);
+
+  const minimizeWindow = useCallback((key: ShellWindowKey) => {
+    setMinimizedWindows((prev) => (prev.includes(key) ? prev : [...prev, key]));
+    setActiveWindow((current) => {
+      if (current === key) {
+        return null;
+      }
+      return current;
+    });
+  }, []);
+
+  const restoreWindow = useCallback((key: ShellWindowKey) => {
+    setMinimizedWindows((prev) => prev.filter((value) => value !== key));
+    setActiveWindow(key);
+  }, []);
+
+  const getWindowState = useCallback(
+    <T,>(key: ShellWindowKey): T | undefined => {
+      return windowStates[key] as T | undefined;
+    },
+    [windowStates]
+  );
+
+  const isWindowMinimized = useCallback(
+    (key: ShellWindowKey) => minimizedWindows.includes(key),
+    [minimizedWindows]
+  );
+
+  const setWindowMetadata = useCallback(
+    (key: ShellWindowKey, metadata: Partial<ShellWindowMetadata>) => {
+      setWindowMetadataState((prev) => ({
+        ...prev,
+        [key]: {
+          ...(prev[key] ?? BASE_WINDOW_METADATA[key]),
+          ...metadata,
+        },
+      }));
+    },
+    []
+  );
+
+  const resetWindowMetadata = useCallback((key: ShellWindowKey) => {
+    setWindowMetadataState((prev) => ({
+      ...prev,
+      [key]: BASE_WINDOW_METADATA[key],
+    }));
+  }, []);
+
+  const value = useMemo(
+    () => ({
+      activeWindow,
+      openWindows,
+      registerWindow,
+      unregisterWindow,
+      setActiveWindow,
+      windowStates,
+      setWindowState,
+      clearWindowState,
+      minimizedWindows,
+      minimizeWindow,
+      restoreWindow,
+      getWindowState,
+      isWindowMinimized,
+      windowMetadata,
+      setWindowMetadata,
+      resetWindowMetadata,
+    }),
+    [
+      activeWindow,
+      openWindows,
+      registerWindow,
+      unregisterWindow,
+      windowStates,
+      setWindowState,
+      clearWindowState,
+      minimizedWindows,
+      minimizeWindow,
+      restoreWindow,
+      getWindowState,
+      isWindowMinimized,
+      windowMetadata,
+      setWindowMetadata,
+      resetWindowMetadata,
+    ]
+  );
+
+  return <ShellContext.Provider value={value}>{children}</ShellContext.Provider>;
+};
+
+export const useShell = (): ShellContextValue => {
+  const context = useContext(ShellContext);
+  if (context === null) {
+    throw new Error('useShell must be used within a ShellProvider');
+  }
+  return context;
+};
diff --git a/src/renderer/components/shell/ShellDiscoveryWindow.tsx b/src/renderer/components/shell/ShellDiscoveryWindow.tsx
new file mode 100644
index 0000000..7ccb631
--- /dev/null
+++ b/src/renderer/components/shell/ShellDiscoveryWindow.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import AgentDiscoveryPage from '../../pages/AgentDiscoveryPage';
+import { ShellWindow } from './ShellWindow';
+import { SHELL_WINDOWS } from './ShellContext';
+
+const ShellDiscoveryWindow: React.FC = () => {
+  return (
+    <ShellWindow definition={SHELL_WINDOWS.discover} windowKey='discover'>
+      <div className='h-full overflow-hidden'>
+        <AgentDiscoveryPage />
+      </div>
+    </ShellWindow>
+  );
+};
+
+export default ShellDiscoveryWindow;
\ No newline at end of file
diff --git a/src/renderer/components/shell/ShellHome.tsx b/src/renderer/components/shell/ShellHome.tsx
new file mode 100644
index 0000000..08cb564
--- /dev/null
+++ b/src/renderer/components/shell/ShellHome.tsx
@@ -0,0 +1,442 @@
+import React, { useMemo, useCallback, KeyboardEvent } from 'react';
+import {
+  HiChatBubbleBottomCenterText,
+  HiGlobeAlt,
+  HiMagnifyingGlass,
+  HiServerStack,
+  HiLink,
+  HiWrenchScrewdriver,
+  HiPuzzlePiece,
+  HiUserCircle,
+  HiCog6Tooth,
+  HiQuestionMarkCircle,
+  HiHeart,
+  HiPhoto,
+} from 'react-icons/hi2';
+import { FiTool, FiSend } from 'react-icons/fi';
+import type { IconType } from 'react-icons';
+import { motion } from 'framer-motion';
+import Typography from '../ui/Typography';
+import Logo from '../ui/Logo';
+import { useShellNavigation } from './useShellNavigation';
+import moonscapeLogo from '../../../../assets/moonscape-logo.png';
+import kiloscribeLogo from '../../../../assets/logos/Kiloscribe.png';
+import bonzoLogo from '../../../../assets/logos/Bonzo.png';
+import hgraphLogo from '../../../../assets/logos/HGRAPH.png';
+import sentxLogo from '../../../../assets/logos/SentX.png';
+import SaucerSwapLogo from '../brand/SaucerSwapLogo';
+import { useConfigStore } from '../../stores/configStore';
+import { cn } from '../../lib/utils';
+
+interface DesktopProgram {
+  id: string;
+  label: string;
+  description: string;
+  route: string;
+  accent: string;
+  icon: IconType;
+  external?: boolean;
+  imageSrc?: string;
+  logoComponent?: React.ComponentType<{ className?: string }>;
+}
+
+interface DesktopProgramGroup {
+  id: string;
+  title: string;
+  programs: DesktopProgram[];
+}
+
+const CORE_PROGRAMS: DesktopProgramGroup[] = [
+  {
+    id: 'core',
+    title: 'Core Programs',
+    programs: [
+      {
+        id: 'chat',
+        label: 'Chat Agent',
+        description: 'Converse with your assistant.',
+        route: '/chat',
+        accent: 'from-brand-blue via-brand-purple to-brand-blue',
+        icon: HiChatBubbleBottomCenterText,
+      },
+      {
+        id: 'browser',
+        label: 'Moonscape',
+        description: 'Browse the decentralized web.',
+        route: '/browser',
+        accent: 'from-brand-green via-brand-blue to-brand-purple',
+        icon: HiGlobeAlt,
+        imageSrc: moonscapeLogo,
+      },
+      {
+        id: 'media-library',
+        label: 'Media',
+        description: 'Review your stored inscriptions.',
+        route: '/media',
+        accent: 'from-brand-purple via-brand-blue to-brand-green',
+        icon: HiPhoto,
+      },
+      {
+        id: 'bookmark-kiloscribe',
+        label: 'KiloScribe',
+        description: 'HOL publishing & storage.',
+        route: `/browser?target=${encodeURIComponent('https://hedera.kiloscribe.com')}`,
+        accent: 'from-brand-blue via-brand-purple to-brand-green',
+        icon: HiGlobeAlt,
+        imageSrc: kiloscribeLogo,
+      },
+      {
+        id: 'bookmark-saucerswap',
+        label: 'SaucerSwap',
+        description: 'Trade on Hedera DeFi.',
+        route: `/browser?target=${encodeURIComponent('https://saucerswap.finance')}`,
+        accent: 'from-brand-green via-brand-blue to-brand-purple',
+        icon: HiGlobeAlt,
+        logoComponent: SaucerSwapLogo,
+      },
+      {
+        id: 'bookmark-bonzo',
+        label: 'Bonzo',
+        description: 'Lend and borrow assets.',
+        route: `/browser?target=${encodeURIComponent('https://bonzo.finance')}`,
+        accent: 'from-hol-gold via-brand-purple to-brand-blue',
+        icon: HiGlobeAlt,
+        imageSrc: bonzoLogo,
+      },
+      {
+        id: 'bookmark-hgraph',
+        label: 'hGraph.io',
+        description: 'Explore Hedera data.',
+        route: `/browser?target=${encodeURIComponent('https://hgraph.com')}`,
+        accent: 'from-brand-purple via-brand-blue to-brand-green',
+        icon: HiGlobeAlt,
+        imageSrc: hgraphLogo,
+      },
+      {
+        id: 'bookmark-sentx',
+        label: 'SentX',
+        description: 'Access Hedera services.',
+        route: `/browser?target=${encodeURIComponent('https://sentx.io')}`,
+        accent: 'from-brand-blue via-brand-green to-brand-purple',
+        icon: HiGlobeAlt,
+        imageSrc: sentxLogo,
+      }
+    ],
+  },
+  {
+    id: 'explore',
+    title: 'Explore HOL',
+    programs: [
+      {
+        id: 'discover',
+        label: 'Discover',
+        description: 'Find agents and templates.',
+        route: '/discover',
+        accent: 'from-brand-blue via-brand-purple to-brand-blue',
+        icon: HiMagnifyingGlass,
+      },
+      {
+        id: 'connections',
+        label: 'Connections',
+        description: 'Manage live sessions.',
+        route: '/connections',
+        accent: 'from-brand-green via-brand-blue to-brand-purple',
+        icon: HiLink,
+      },
+      {
+        id: 'mcp',
+        label: 'MCP',
+        description: 'Configure MCP access.',
+        route: '/mcp',
+        accent: 'from-brand-purple via-brand-blue to-brand-green',
+        icon: HiServerStack,
+      },
+      {
+        id: 'plugins',
+        label: 'Plugins',
+        description: 'Extend with integrations.',
+        route: '/plugins',
+        accent: 'from-brand-blue via-brand-purple to-brand-green',
+        icon: HiPuzzlePiece,
+      },
+      {
+        id: 'tools',
+        label: 'Tools',
+        description: 'Developer utilities.',
+        route: '/tools',
+        accent: 'from-hol-gold via-brand-purple to-brand-blue',
+        icon: FiTool,
+      },
+    ],
+  },
+  {
+    id: 'workspace',
+    title: 'Workspace',
+    programs: [
+      {
+        id: 'profile',
+        label: 'Profile',
+        description: 'Update your identity.',
+        route: '/hcs10-profile',
+        accent: 'from-brand-purple via-brand-blue to-brand-purple',
+        icon: HiUserCircle,
+      },
+      {
+        id: 'settings',
+        label: 'Settings',
+        description: 'Configure HOL Desktop.',
+        route: '/settings',
+        accent: 'from-brand-blue via-brand-green to-brand-blue',
+        icon: HiCog6Tooth,
+      },
+    ],
+  },
+  {
+    id: 'support',
+    title: 'Support & Community',
+    programs: [
+      {
+        id: 'help',
+        label: 'Help',
+        description: 'Guides and troubleshooting.',
+        route: '/help',
+        accent: 'from-brand-blue via-brand-purple to-brand-blue',
+        icon: HiQuestionMarkCircle,
+      },
+      {
+        id: 'acknowledgements',
+        label: 'Credits',
+        description: 'Credits & licenses.',
+        route: '/acknowledgements',
+        accent: 'from-brand-purple via-brand-blue to-brand-green',
+        icon: HiHeart,
+      },
+      {
+        id: 'telegram',
+        label: 'Telegram',
+        description: 'Join the community chat.',
+        route: 'https://t.me/hashgraphonline',
+        accent: 'from-brand-green via-brand-blue to-brand-purple',
+        icon: FiSend,
+        external: true,
+      },
+    ],
+  },
+];
+
+const isActivationKey = (event: KeyboardEvent<HTMLButtonElement>): boolean => {
+  return event.key === 'Enter' || event.key === ' ';
+};
+
+const DesktopIcon: React.FC<{
+  program: DesktopProgram;
+  onOpen(program: DesktopProgram): void;
+  isDark: boolean;
+}> = ({ program, onOpen, isDark }) => {
+  const handleOpen = useCallback(() => {
+    onOpen(program);
+  }, [onOpen, program]);
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLButtonElement>) => {
+      if (isActivationKey(event)) {
+        event.preventDefault();
+        handleOpen();
+      }
+    },
+    [handleOpen]
+  );
+
+  const Icon = program.icon;
+  const LogoComponent = program.logoComponent;
+  const iconColor = (() => {
+    switch (program.id) {
+      case 'chat':
+        return isDark ? 'text-blue-300' : 'text-blue-500';
+      case 'browser':
+        return isDark ? 'text-emerald-300' : 'text-emerald-500';
+      case 'media-library':
+        return isDark ? 'text-purple-300' : 'text-purple-500';
+      case 'bookmark-kiloscribe':
+        return isDark ? 'text-indigo-300' : 'text-indigo-500';
+      case 'bookmark-saucerswap':
+        return isDark ? 'text-emerald-300' : 'text-emerald-500';
+      case 'bookmark-bonzo':
+        return isDark ? 'text-orange-300' : 'text-orange-500';
+      case 'bookmark-hgraph':
+        return isDark ? 'text-cyan-300' : 'text-cyan-500';
+      case 'bookmark-sentx':
+        return isDark ? 'text-pink-300' : 'text-pink-500';
+      case 'discover':
+        return isDark ? 'text-sky-300' : 'text-sky-500';
+      case 'connections':
+        return isDark ? 'text-teal-300' : 'text-teal-500';
+      case 'mcp':
+        return isDark ? 'text-violet-300' : 'text-violet-500';
+      case 'plugins':
+        return isDark ? 'text-fuchsia-300' : 'text-fuchsia-500';
+      case 'tools':
+        return isDark ? 'text-amber-300' : 'text-amber-500';
+      case 'profile':
+        return isDark ? 'text-lime-300' : 'text-lime-500';
+      case 'settings':
+        return isDark ? 'text-slate-200' : 'text-slate-600';
+      case 'help':
+        return isDark ? 'text-sky-300' : 'text-sky-500';
+      case 'acknowledgements':
+        return isDark ? 'text-rose-300' : 'text-rose-500';
+      case 'telegram':
+        return isDark ? 'text-sky-300' : 'text-sky-500';
+      default:
+        return isDark ? 'text-gray-200' : 'text-gray-600';
+    }
+  })();
+
+  return (
+    <motion.button
+      type='button'
+      onClick={handleOpen}
+      onDoubleClick={handleOpen}
+      onKeyDown={handleKeyDown}
+      className={cn(
+        'group flex w-14 flex-col items-center gap-2 rounded-2xl p-2.5 text-center transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1',
+        isDark
+          ? 'hover:bg-white/10 focus-visible:ring-white/35 focus-visible:ring-offset-gray-900'
+          : 'hover:bg-white focus-visible:ring-blue-500/30 focus-visible:ring-offset-white text-brand-ink/80'
+      )}
+      whileHover={{ scale: 1.05, y: -4 }}
+      whileTap={{ scale: 0.97 }}
+      aria-label={program.label}
+    >
+      <div
+        className={cn(
+          'relative flex h-12 w-12 items-center justify-center rounded-xl transition-all duration-200 border',
+          isDark
+            ? 'bg-white/12 border-white/25 shadow-md shadow-black/35 backdrop-blur-sm'
+            : 'bg-white border-gray-200 shadow-sm shadow-gray-300/40 group-hover:shadow-lg'
+        )}
+      >
+        {program.imageSrc ? (
+          <img
+            src={program.imageSrc}
+            alt={`${program.label} icon`}
+            className='h-10 w-10 object-contain'
+            draggable={false}
+          />
+        ) : LogoComponent ? (
+          <LogoComponent className='h-10 w-10' />
+        ) : (
+          <Icon className={cn('h-7 w-7 transition-colors duration-200', iconColor)} aria-hidden='true' />
+        )}
+      </div>
+
+      <Typography
+        variant='caption'
+        className={cn(
+          'text-[11px] font-medium tracking-wide transition-colors duration-200 leading-tight text-center',
+          isDark ? 'text-gray-200' : 'text-brand-ink/75'
+        )}
+        style={{ fontFamily: 'SF Pro Text, -apple-system, system-ui, sans-serif' }}
+      >
+        {program.label}
+      </Typography>
+    </motion.button>
+  );
+};
+
+const DesktopIconGroup: React.FC<{
+  group: DesktopProgramGroup;
+  onOpen(program: DesktopProgram): void;
+  isDark: boolean;
+}> = ({ group, onOpen, isDark }) => {
+  return (
+    <div className='flex flex-col gap-5'>
+      <Typography
+        variant='h3'
+        className='text-xs font-semibold uppercase tracking-[0.24em] text-brand-ink/45 dark:text-white/45'
+        noMargin
+      >
+        {group.title}
+      </Typography>
+      <div className='grid grid-cols-5 sm:grid-cols-7 xl:grid-cols-9 gap-2 justify-items-center place-items-center max-w-4xl'>
+        {group.programs.map((program) => (
+          <DesktopIcon key={program.id} program={program} onOpen={onOpen} isDark={isDark} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+const ShellHome: React.FC = () => {
+  const { open } = useShellNavigation();
+  const { config } = useConfigStore();
+  const isDark = (config?.advanced?.theme ?? 'light') === 'dark';
+
+  const programGroups = useMemo(() => CORE_PROGRAMS, []);
+
+  const handleOpen = useCallback(
+    (program: DesktopProgram) => {
+      if (program.external) {
+        window.open(program.route, '_blank', 'noopener,noreferrer');
+        return;
+      }
+      open(program.route);
+    },
+    [open]
+  );
+
+  return (
+    <div
+      className={cn(
+        'min-h-full w-full flex-col gap-10 px-10 pb-20 pt-6 transition-all duration-500',
+        isDark ? 'text-white' : 'text-brand-ink/80'
+      )}
+    >
+      <div className='flex flex-col items-center gap-2'>
+        <motion.div
+          initial={{ opacity: 0, scale: 0.9 }}
+          animate={{ opacity: 1, scale: 1 }}
+          transition={{ duration: 0.8, ease: "easeOut" }}
+          className='flex flex-col items-center gap-2'
+        >
+          <Logo variant='icon' size='lg' />
+          <Typography
+            variant='h1'
+            className={cn(
+              'text-5xl md:text-[3.5rem] font-bold tracking-tight transition-colors duration-500',
+              'bg-gradient-to-r from-brand-blue via-brand-purple to-brand-green bg-clip-text text-transparent',
+              'dark:from-white dark:via-blue-200 dark:to-purple-200'
+            )}
+            style={{ fontFamily: 'Roboto, sans-serif' }}
+          >
+            HOL Desktop
+          </Typography>
+          <div
+            data-testid='shell-status-line'
+            className='mt-1 flex items-center gap-1 text-[0.7rem] font-semibold uppercase tracking-[0.3em] text-brand-ink/50 dark:text-white/50'
+          >
+            <span>reinventing:</span>
+            <span className='text-brand-blue'>(</span>
+            <span>"the_internet"</span>
+            <span className='text-brand-blue'>)</span>
+          </div>
+        </motion.div>
+      </div>
+
+      <div className='flex flex-col gap-10'>
+        {programGroups.map((group, index) => (
+          <motion.div
+            key={group.id}
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: index * 0.2 }}
+          >
+            <DesktopIconGroup group={group} onOpen={handleOpen} isDark={isDark} />
+          </motion.div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default ShellHome;
diff --git a/src/renderer/components/shell/ShellLayout.tsx b/src/renderer/components/shell/ShellLayout.tsx
new file mode 100644
index 0000000..faa61e5
--- /dev/null
+++ b/src/renderer/components/shell/ShellLayout.tsx
@@ -0,0 +1,138 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { Outlet, useLocation, useNavigate } from 'react-router-dom';
+import { useShell } from './ShellContext';
+import type { ShellWindowKey } from './ShellContext';
+import { ShellTaskbar } from './ShellTaskbar';
+import Logo from '../ui/Logo';
+import WalletDisplay from './WalletDisplay';
+import ShellThemeToggle from './ShellThemeToggle';
+import { useConfigStore } from '../../stores/configStore';
+import { cn } from '../../lib/utils';
+
+const resolveWindowFromPath = (pathname: string): ShellWindowKey | null => {
+  if (pathname.startsWith('/chat')) {
+    return 'chat';
+  }
+  if (pathname.startsWith('/browser')) {
+    return 'browser';
+  }
+  if (pathname.startsWith('/builder')) {
+    return 'builder';
+  }
+  return null;
+};
+
+const ShellLayout: React.FC = () => {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const { setActiveWindow } = useShell();
+  const [currentTime, setCurrentTime] = useState(() => new Date());
+  const { config } = useConfigStore();
+  const currentTheme = config?.advanced?.theme ?? 'light';
+  const isDark = currentTheme === 'dark';
+  const themeClassName = isDark ? 'shell-theme-dark' : 'shell-theme-light';
+
+  useEffect(() => {
+    setActiveWindow(resolveWindowFromPath(location.pathname));
+  }, [location.pathname, setActiveWindow]);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setCurrentTime(new Date());
+    }, 30000);
+    return () => {
+      clearInterval(timer);
+    };
+  }, []);
+
+  const formattedTime = useMemo(() => {
+    return new Intl.DateTimeFormat('en-US', {
+      hour: 'numeric',
+      minute: 'numeric',
+    }).format(currentTime);
+  }, [currentTime]);
+
+  const formattedDate = useMemo(() => {
+    return new Intl.DateTimeFormat('en-US', {
+      weekday: 'short',
+      month: 'short',
+      day: 'numeric',
+    }).format(currentTime);
+  }, [currentTime]);
+
+  const handleNavigateHome = useCallback(() => {
+    navigate('/');
+  }, [navigate]);
+
+  return (
+    <div
+      data-testid='shell-layout-root'
+      data-shell-theme={currentTheme}
+      className={cn(
+        'relative min-h-screen w-full overflow-hidden transition-all duration-500',
+        isDark
+          ? 'bg-gradient-to-br from-gray-950 via-brand-ink/85 to-gray-900 text-white'
+          : 'bg-gradient-to-br from-slate-100 via-white to-slate-200 text-slate-900',
+        themeClassName
+      )}
+    >
+      <div className='pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_15%_15%,rgba(59,130,246,0.08),transparent_70%)]' />
+      <div className='pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_85%_20%,rgba(234,179,8,0.05),transparent_70%)]' />
+
+      <div className='relative z-10 flex h-screen flex-col'>
+        <header
+          className={cn(
+            'flex h-12 items-center justify-between gap-6 border-b px-6 text-xs font-medium transition-all duration-150 backdrop-blur-lg',
+            isDark
+              ? 'border-white/10 bg-black/25 text-white/80'
+              : 'border-gray-200/70 bg-white/85 text-slate-700 shadow-sm'
+          )}
+        >
+          <button
+            type='button'
+            onClick={handleNavigateHome}
+            className={cn(
+              'flex items-center gap-2 rounded-xl px-3 py-1.5 text-sm font-semibold transition-colors duration-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-1',
+              isDark
+                ? 'text-white hover:bg-white/10 focus-visible:ring-white/40 focus-visible:ring-offset-transparent'
+                : 'text-slate-900 hover:bg-slate-100 focus-visible:ring-blue-400/40 focus-visible:ring-offset-white'
+            )}
+          >
+            <Logo variant='icon' size='sm' />
+            <span className='leading-none'>HOL Desktop</span>
+          </button>
+
+          <div className='flex items-center gap-3 md:gap-4 ml-auto'>
+            <div
+              className={cn(
+                'hidden md:flex items-center gap-2 rounded-full border px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.28em]',
+                isDark
+                  ? 'border-white/10 bg-white/5 text-white/70'
+                  : 'border-gray-200/50 bg-white/60 text-slate-500'
+              )}
+            >
+              <span>{formattedDate}</span>
+              <span className='text-orange-500'>•</span>
+              <span className='tabular-nums'>{formattedTime}</span>
+            </div>
+            <ShellThemeToggle />
+            <WalletDisplay />
+          </div>
+        </header>
+        <main className='flex-1 overflow-y-auto'>
+          <div className={cn(
+            'min-h-full transition-all duration-300',
+            isDark ? 'bg-transparent' : 'bg-white/60'
+          )}>
+            <div className='px-6 pt-6 pb-14 md:px-12 lg:px-14'>
+              <Outlet />
+            </div>
+          </div>
+        </main>
+        <ShellTaskbar currentTimeLabel={formattedTime} currentDateLabel={formattedDate} />
+      </div>
+    </div>
+  );
+};
+
+export default ShellLayout;
diff --git a/src/renderer/components/shell/ShellMCPWindow.tsx b/src/renderer/components/shell/ShellMCPWindow.tsx
new file mode 100644
index 0000000..834b881
--- /dev/null
+++ b/src/renderer/components/shell/ShellMCPWindow.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import MCPPage from '../../pages/MCPPage';
+import { ShellWindow } from './ShellWindow';
+import { SHELL_WINDOWS } from './ShellContext';
+
+const ShellMCPWindow: React.FC = () => {
+  return (
+    <ShellWindow definition={SHELL_WINDOWS.mcp} windowKey='mcp'>
+      <div className='h-full overflow-hidden'>
+        <MCPPage />
+      </div>
+    </ShellWindow>
+  );
+};
+
+export default ShellMCPWindow;
\ No newline at end of file
diff --git a/src/renderer/components/shell/ShellMediaWindow.tsx b/src/renderer/components/shell/ShellMediaWindow.tsx
new file mode 100644
index 0000000..47b6eb7
--- /dev/null
+++ b/src/renderer/components/shell/ShellMediaWindow.tsx
@@ -0,0 +1,112 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { Alert, AlertDescription, AlertTitle } from '../ui/alert';
+import Typography from '../ui/Typography';
+import { ShellWindow } from './ShellWindow';
+import { SHELL_WINDOWS } from './ShellContext';
+import { MediaLibrary } from '../media/MediaLibrary';
+import { useInscriptionJobs, type InscriptionJob } from '../../hooks/useInscriptionJobs';
+import { useConfigStore } from '../../stores/configStore';
+import { cn } from '../../lib/utils';
+
+const normalizeTopic = (topic: string): string => {
+  return topic.replace(/^hcs:\/\/(1\/)?/i, '').replace(/^1\//, '');
+};
+
+const buildHcsUrl = (topic: string): string => {
+  const normalized = normalizeTopic(topic);
+  return `hcs://1/${normalized}`;
+};
+
+const ShellMediaWindow: React.FC = () => {
+  const { jobs, loading, error, hasLoaded, loadJobs, network } = useInscriptionJobs();
+  const { config } = useConfigStore();
+  const isDark = (config?.advanced?.theme ?? 'light') === 'dark';
+  const [copiedUrl, setCopiedUrl] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!hasLoaded) {
+      void loadJobs();
+    }
+  }, [hasLoaded, loadJobs]);
+
+  useEffect(() => {
+    if (!copiedUrl) {
+      return;
+    }
+    const timer = window.setTimeout(() => {
+      setCopiedUrl(null);
+    }, 4000);
+    return () => window.clearTimeout(timer);
+  }, [copiedUrl]);
+
+  const handleSelect = useCallback(async (job: InscriptionJob) => {
+    const topicCandidate = job.topic || job.imageTopic;
+    if (!topicCandidate) {
+      return;
+    }
+    const hcsUrl = buildHcsUrl(topicCandidate);
+    if (navigator?.clipboard?.writeText) {
+      await navigator.clipboard.writeText(hcsUrl).catch(() => undefined);
+    }
+    setCopiedUrl(hcsUrl);
+  }, []);
+
+
+  return (
+    <ShellWindow windowKey='media' definition={SHELL_WINDOWS.media} defaultExpanded>
+      <div
+        className={cn(
+          'flex h-full flex-col gap-6 px-6 py-6 transition-colors duration-300',
+          isDark ? 'bg-[#050b1a]' : 'bg-gray-100'
+        )}
+      >
+        <div
+          className={cn(
+            'flex flex-col gap-3 rounded-2xl border px-6 py-5 shadow-md transition-colors duration-300',
+            isDark ? 'border-white/10 bg-[#101d3f]' : 'border-gray-200 bg-white'
+          )}
+        >
+          <Typography variant='h4' className={cn('text-xl font-semibold', isDark ? 'text-white' : 'text-gray-900')}>
+            Media Library
+          </Typography>
+          <Typography variant='body2' className={cn('text-sm', isDark ? 'text-white/80' : 'text-gray-600')}>
+            Browse your inscriptions, copy topic IDs, and reuse assets across desktop programs.
+          </Typography>
+          {copiedUrl ? (
+            <Alert
+              className={cn(
+                'mt-3 max-w-lg border text-sm font-medium break-all',
+                isDark
+                  ? 'border-orange-400/50 bg-orange-500/20 text-orange-100'
+                  : 'border-orange-400 bg-orange-50 text-orange-800'
+              )}
+            >
+              <AlertTitle className='text-xs font-semibold uppercase tracking-wide'>Copied to clipboard</AlertTitle>
+              <AlertDescription>{copiedUrl}</AlertDescription>
+            </Alert>
+          ) : null}
+        </div>
+        <div
+          className={cn(
+            'flex-1 min-h-0 rounded-2xl border shadow-md transition-colors duration-300',
+            isDark ? 'border-white/10 bg-[#0f1b39]' : 'border-gray-200 bg-white'
+          )}
+        >
+          <MediaLibrary
+            jobs={jobs}
+            isLoading={loading}
+            error={error}
+            hasLoaded={hasLoaded}
+            network={network}
+            onRefresh={loadJobs}
+            onSelect={handleSelect}
+            emptyMessage='No media files available yet. Create inscriptions to see them here.'
+            className='h-full'
+          />
+        </div>
+      </div>
+    </ShellWindow>
+  );
+};
+
+export default ShellMediaWindow;
diff --git a/src/renderer/components/shell/ShellPluginsWindow.tsx b/src/renderer/components/shell/ShellPluginsWindow.tsx
new file mode 100644
index 0000000..4e0044e
--- /dev/null
+++ b/src/renderer/components/shell/ShellPluginsWindow.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import PluginsPage from '../../pages/PluginsPage';
+import { ShellWindow } from './ShellWindow';
+import { SHELL_WINDOWS } from './ShellContext';
+
+const ShellPluginsWindow: React.FC = () => {
+  return (
+    <ShellWindow definition={SHELL_WINDOWS.plugins} windowKey='plugins'>
+      <div className='h-full overflow-hidden bg-gradient-to-br from-white/80 to-white/60 dark:from-black/50 dark:to-black/60'>
+        <PluginsPage />
+      </div>
+    </ShellWindow>
+  );
+};
+
+export default ShellPluginsWindow;
\ No newline at end of file
diff --git a/src/renderer/components/shell/ShellProfileWindow.tsx b/src/renderer/components/shell/ShellProfileWindow.tsx
new file mode 100644
index 0000000..f5b1825
--- /dev/null
+++ b/src/renderer/components/shell/ShellProfileWindow.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { HCS10ProfileRegistration } from '../../pages/HCS10ProfileRegistration';
+import { ShellWindow } from './ShellWindow';
+import { SHELL_WINDOWS } from './ShellContext';
+
+const ShellProfileWindow: React.FC = () => {
+  return (
+    <ShellWindow definition={SHELL_WINDOWS.profile} windowKey='profile'>
+      <div className='h-full overflow-hidden bg-gradient-to-br from-white/80 to-white/60 dark:from-black/50 dark:to-black/60'>
+        <HCS10ProfileRegistration />
+      </div>
+    </ShellWindow>
+  );
+};
+
+export default ShellProfileWindow;
\ No newline at end of file
diff --git a/src/renderer/components/shell/ShellSettingsWindow.tsx b/src/renderer/components/shell/ShellSettingsWindow.tsx
new file mode 100644
index 0000000..5cd8714
--- /dev/null
+++ b/src/renderer/components/shell/ShellSettingsWindow.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import SettingsPage from '../../pages/SettingsPage';
+import { ShellWindow } from './ShellWindow';
+import { SHELL_WINDOWS } from './ShellContext';
+
+const ShellSettingsWindow: React.FC = () => {
+  return (
+    <ShellWindow definition={SHELL_WINDOWS.settings} windowKey='settings'>
+      <div className='h-full overflow-hidden bg-gradient-to-br from-white/80 to-white/60 dark:from-black/50 dark:to-black/60'>
+        <SettingsPage />
+      </div>
+    </ShellWindow>
+  );
+};
+
+export default ShellSettingsWindow;
\ No newline at end of file
diff --git a/src/renderer/components/shell/ShellTaskbar.tsx b/src/renderer/components/shell/ShellTaskbar.tsx
new file mode 100644
index 0000000..108a9ca
--- /dev/null
+++ b/src/renderer/components/shell/ShellTaskbar.tsx
@@ -0,0 +1,333 @@
+import React, { useCallback, KeyboardEvent, useMemo } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import type { IconType } from 'react-icons';
+import {
+  HiChatBubbleBottomCenterText,
+  HiGlobeAlt,
+  HiWrenchScrewdriver,
+  HiMagnifyingGlass,
+  HiLink,
+  HiServerStack,
+  HiPhoto,
+} from 'react-icons/hi2';
+import { cn } from '../../lib/utils';
+import { SHELL_WINDOWS, useShell } from './ShellContext';
+import type { ShellWindowKey, ShellWindowMetadata } from './ShellContext';
+import { useConfigStore } from '../../stores/configStore';
+
+interface ShellTaskbarProps {
+  currentTimeLabel: string;
+  currentDateLabel: string;
+}
+
+interface DockItem {
+  label: string;
+  route: string;
+  icon: IconType;
+  key: ShellWindowKey;
+}
+
+interface OpenWindowItem {
+  key: ShellWindowKey;
+  label: string;
+  icon: IconType;
+  iconUrl?: string | null;
+  route: string;
+  isMinimized: boolean;
+}
+
+const DOCK_ITEMS: DockItem[] = [
+  {
+    label: 'Chat Agent',
+    route: SHELL_WINDOWS.chat.route,
+    icon: HiChatBubbleBottomCenterText,
+    key: 'chat',
+  },
+  {
+    label: 'Moonscape',
+    route: SHELL_WINDOWS.browser.route,
+    icon: HiGlobeAlt,
+    key: 'browser',
+  },
+  {
+    label: 'Media Library',
+    route: SHELL_WINDOWS.media.route,
+    icon: HiPhoto,
+    key: 'media',
+  },
+  {
+    label: 'Agent Directory',
+    route: SHELL_WINDOWS.discover.route,
+    icon: HiMagnifyingGlass,
+    key: 'discover',
+  },
+  {
+    label: 'Connections',
+    route: SHELL_WINDOWS.connections.route,
+    icon: HiLink,
+    key: 'connections',
+  },
+  {
+    label: 'MCP Servers',
+    route: SHELL_WINDOWS.mcp.route,
+    icon: HiServerStack,
+    key: 'mcp',
+  },
+];
+
+const DOCK_KEY_SET = new Set<ShellWindowKey>(
+  DOCK_ITEMS.map((item) => item.key)
+);
+
+const isActivationKey = (event: KeyboardEvent<HTMLButtonElement>): boolean => {
+  return event.key === 'Enter' || event.key === ' ';
+};
+
+interface DockButtonProps {
+  item: DockItem;
+  isActive: boolean;
+  isMinimized: boolean;
+  onNavigate(route: string, key: ShellWindowKey): void;
+  metadata?: ShellWindowMetadata;
+  isDark: boolean;
+}
+
+interface DockButtonProps {
+  item: DockItem;
+  isActive: boolean;
+  isMinimized: boolean;
+  onNavigate(route: string, key: ShellWindowKey): void;
+  metadata?: ShellWindowMetadata;
+  isDark: boolean;
+}
+
+const DockButton: React.FC<DockButtonProps> = ({
+  item,
+  isActive,
+  isMinimized,
+  onNavigate,
+  metadata,
+  isDark,
+}) => {
+  const handleNavigate = useCallback(() => {
+    onNavigate(item.route, item.key);
+  }, [item.route, item.key, onNavigate]);
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLButtonElement>) => {
+      if (isActivationKey(event)) {
+        event.preventDefault();
+        handleNavigate();
+      }
+    },
+    [handleNavigate]
+  );
+
+  const Icon = metadata?.icon ?? item.icon;
+  const iconUrl = metadata?.iconUrl ?? null;
+  const displayLabel = metadata?.label ?? item.label;
+
+  return (
+    <button
+      type='button'
+      onClick={handleNavigate}
+      onKeyDown={handleKeyDown}
+      aria-label={displayLabel}
+      className={cn(
+        'group relative flex h-12 w-12 items-center justify-center rounded-lg transition-all duration-200 focus-visible:outline-none focus-visible:ring-2',
+        isActive
+          ? 'scale-105 bg-blue-500 shadow-lg focus-visible:ring-white/70'
+          : isDark
+            ? 'bg-white/10 hover:bg-white/20 hover:scale-105 focus-visible:ring-white/60'
+            : 'bg-white/70 border border-gray-200 hover:bg-white hover:scale-105 shadow-sm focus-visible:ring-blue-500/40',
+        isMinimized ? 'opacity-70' : 'opacity-100'
+      )}
+    >
+      {iconUrl ? (
+        <img
+          src={iconUrl}
+          alt={displayLabel}
+          className='h-6 w-6 rounded object-cover transition-all duration-200'
+        />
+      ) : (
+        <Icon
+          className={cn(
+            'h-6 w-6 transition-all duration-200',
+            isDark
+              ? isActive
+                ? 'text-white'
+                : 'text-white/80'
+              : isActive
+                ? 'text-brand-ink'
+                : 'text-brand-ink/70'
+          )}
+          aria-hidden='true'
+        />
+      )}
+      <div
+        className={cn(
+          'absolute -bottom-2 h-1 w-6 rounded-full transition-all duration-300',
+          isDark
+            ? isActive
+              ? 'bg-white/80'
+              : 'bg-white/40'
+            : isActive
+              ? 'bg-brand-blue/70'
+              : 'bg-brand-blue/40'
+        )}
+      />
+    </button>
+  );
+};
+
+export const ShellTaskbar: React.FC<ShellTaskbarProps> = ({
+  currentTimeLabel,
+  currentDateLabel,
+}) => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const {
+    activeWindow,
+    minimizedWindows,
+    restoreWindow,
+    setActiveWindow,
+    openWindows,
+    windowMetadata,
+  } = useShell();
+  const { config } = useConfigStore();
+  const isDark = (config?.advanced?.theme ?? 'light') === 'dark';
+
+  const activeRoute = useMemo(() => location.pathname, [location.pathname]);
+
+  const handleNavigate = useCallback(
+    (route: string, key: ShellWindowKey) => {
+      const wasMinimized = minimizedWindows.includes(key);
+      if (wasMinimized) {
+        restoreWindow(key);
+      }
+      setActiveWindow(key);
+      navigate(route);
+    },
+    [minimizedWindows, navigate, restoreWindow, setActiveWindow]
+  );
+
+  const openWindowItems = useMemo<OpenWindowItem[]>(() => {
+    return openWindows
+      .map((key) => {
+        const isMinimized = minimizedWindows.includes(key);
+        if (DOCK_KEY_SET.has(key) && !isMinimized) {
+          return null;
+        }
+        const definition = SHELL_WINDOWS[key];
+        const metadata = windowMetadata[key];
+        if (!definition || !metadata) {
+          return null;
+        }
+        return {
+          key,
+          label: metadata.label,
+          icon: metadata.icon,
+          iconUrl: metadata.iconUrl ?? null,
+          route: definition.route,
+          isMinimized,
+        } as OpenWindowItem;
+      })
+      .filter((value): value is OpenWindowItem => Boolean(value));
+  }, [minimizedWindows, openWindows, windowMetadata]);
+
+  const handleOpenWindowClick = useCallback(
+    (key: ShellWindowKey, route: string) => {
+      handleNavigate(route, key);
+    },
+    [handleNavigate]
+  );
+
+  return (
+    <div className='pointer-events-none absolute inset-x-0 bottom-4'>
+      <div className='mx-auto w-fit'>
+        <div
+          className={cn(
+            'pointer-events-auto flex items-center gap-2 rounded-xl px-3 py-2.5 backdrop-blur-md transition-all duration-300',
+            isDark
+              ? 'border border-white/30 bg-white/15 shadow-lg shadow-black/30'
+              : 'border border-gray-200 bg-white/90 shadow-lg shadow-gray-300/50'
+          )}
+        >
+          <div className='flex items-center gap-2'>
+            {DOCK_ITEMS.map((item) => (
+              <DockButton
+                key={item.key}
+                item={item}
+                isActive={
+                  activeWindow === item.key ||
+                  activeRoute.startsWith(item.route)
+                }
+                isMinimized={minimizedWindows.includes(item.key)}
+                onNavigate={handleNavigate}
+                metadata={windowMetadata[item.key]}
+                isDark={isDark}
+              />
+            ))}
+          </div>
+          {openWindowItems.length > 0 ? (
+            <>
+              <div
+                className={cn(
+                  'h-8 w-px mx-1',
+                  isDark ? 'bg-white/20' : 'bg-gray-300'
+                )}
+              />
+              <div className='flex items-center gap-2'>
+                {openWindowItems.map((item) => {
+                  const {
+                    key,
+                    label,
+                    icon: ItemIcon,
+                    iconUrl,
+                    route,
+                    isMinimized,
+                  } = item;
+                  return (
+                    <button
+                      key={key}
+                      type='button'
+                      onClick={() => handleOpenWindowClick(key, route)}
+                      className={cn(
+                        'flex items-center gap-2 rounded-xl px-3 py-2 text-xs font-medium transition-colors duration-200',
+                        isDark
+                          ? 'border border-white/20 bg-white/10 text-white hover:bg-white/20'
+                          : 'border border-brand-blue/20 bg-white/90 text-brand-ink hover:bg-white',
+                        activeWindow === key &&
+                          (isDark ? 'bg-white/25' : 'bg-brand-blue/10'),
+                        isMinimized && 'opacity-70'
+                      )}
+                    >
+                      {iconUrl ? (
+                        <img
+                          src={iconUrl}
+                          alt={label}
+                          className='h-4 w-4 rounded-sm object-cover'
+                        />
+                      ) : (
+                        <ItemIcon
+                          className={cn(
+                            'h-4 w-4',
+                            isDark ? 'text-white' : 'text-brand-ink'
+                          )}
+                          aria-hidden='true'
+                        />
+                      )}
+                      <span>{label}</span>
+                    </button>
+                  );
+                })}
+              </div>
+            </>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ShellTaskbar;
diff --git a/src/renderer/components/shell/ShellThemeToggle.tsx b/src/renderer/components/shell/ShellThemeToggle.tsx
new file mode 100644
index 0000000..848ad73
--- /dev/null
+++ b/src/renderer/components/shell/ShellThemeToggle.tsx
@@ -0,0 +1,35 @@
+import React, { useCallback, useMemo } from 'react';
+import { FiMoon, FiSun } from 'react-icons/fi';
+import { useConfigStore } from '../../stores/configStore';
+import { cn } from '../../lib/utils';
+
+const ShellThemeToggle: React.FC = () => {
+  const { config, setTheme } = useConfigStore();
+
+  const currentTheme = useMemo(() => config?.advanced?.theme ?? 'light', [config?.advanced?.theme]);
+  const isDark = currentTheme === 'dark';
+
+  const handleToggleTheme = useCallback(() => {
+    const nextTheme = currentTheme === 'light' ? 'dark' : 'light';
+    void setTheme(nextTheme);
+  }, [currentTheme, setTheme]);
+
+  return (
+    <button
+      type='button'
+      onClick={handleToggleTheme}
+      className={cn(
+        'flex h-8 w-8 items-center justify-center rounded-xl border transition-all duration-200 hover:-translate-y-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1',
+        isDark
+          ? 'border-white/20 bg-white/10 text-white hover:bg-white/20 focus-visible:ring-white/40 focus-visible:ring-offset-gray-900'
+          : 'border-gray-200 bg-white text-slate-700 hover:bg-slate-100 focus-visible:ring-blue-400/50 focus-visible:ring-offset-white'
+      )}
+      aria-label={`Switch to ${currentTheme === 'light' ? 'dark' : 'light'} mode`}
+      title={`Switch to ${currentTheme === 'light' ? 'dark' : 'light'} mode`}
+    >
+      {currentTheme === 'light' ? <FiMoon className='h-4 w-4' /> : <FiSun className='h-4 w-4' />}
+    </button>
+  );
+};
+
+export default ShellThemeToggle;
diff --git a/src/renderer/components/shell/ShellToolsWindow.tsx b/src/renderer/components/shell/ShellToolsWindow.tsx
new file mode 100644
index 0000000..d946ba6
--- /dev/null
+++ b/src/renderer/components/shell/ShellToolsWindow.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import ToolsPage from '../../pages/ToolsPage';
+import { ShellWindow } from './ShellWindow';
+import { SHELL_WINDOWS } from './ShellContext';
+
+const ShellToolsWindow: React.FC = () => {
+  return (
+    <ShellWindow definition={SHELL_WINDOWS.tools} windowKey='tools'>
+      <div className='h-full overflow-hidden bg-gradient-to-br from-white/80 to-white/60 dark:from-black/50 dark:to-black/60'>
+        <ToolsPage />
+      </div>
+    </ShellWindow>
+  );
+};
+
+export default ShellToolsWindow;
\ No newline at end of file
diff --git a/src/renderer/components/shell/ShellWindow.tsx b/src/renderer/components/shell/ShellWindow.tsx
new file mode 100644
index 0000000..fdde9bb
--- /dev/null
+++ b/src/renderer/components/shell/ShellWindow.tsx
@@ -0,0 +1,219 @@
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { motion } from 'framer-motion';
+import { FiX } from 'react-icons/fi';
+import Typography from '../ui/Typography';
+import { SHELL_WINDOWS, useShell } from './ShellContext';
+import type { ShellWindowDefinition, ShellWindowKey } from './ShellContext';
+import { cn } from '../../lib/utils';
+
+interface ShellWindowProps {
+  windowKey: ShellWindowKey;
+  definition?: ShellWindowDefinition;
+  children: React.ReactNode;
+  hideChrome?: boolean;
+  defaultExpanded?: boolean;
+}
+
+type TeardownReason = 'none' | 'minimize' | 'close';
+
+type WindowLayoutState = {
+  isExpanded: boolean;
+};
+
+const DEFAULT_LAYOUT_STATE: WindowLayoutState = {
+  isExpanded: false,
+};
+
+interface ShellWindowControlsContextValue {
+  minimize(): void;
+  close(): void;
+  toggleExpand(): void;
+  isExpanded: boolean;
+  isMinimized: boolean;
+}
+
+const ShellWindowControlsContext = createContext<ShellWindowControlsContextValue | null>(null);
+
+export const useShellWindowControls = (): ShellWindowControlsContextValue => {
+  const context = useContext(ShellWindowControlsContext);
+  if (!context) {
+    throw new Error('useShellWindowControls must be used within a ShellWindow');
+  }
+  return context;
+};
+
+export const ShellWindow: React.FC<ShellWindowProps> = ({
+  windowKey,
+  definition,
+  children,
+  hideChrome = false,
+  defaultExpanded = false,
+}) => {
+  const navigate = useNavigate();
+  const {
+    registerWindow,
+    unregisterWindow,
+    minimizeWindow,
+    restoreWindow,
+    isWindowMinimized,
+    setActiveWindow,
+    getWindowState,
+    setWindowState,
+    clearWindowState,
+    resetWindowMetadata,
+  } = useShell();
+
+  const teardownReasonRef = useRef<TeardownReason>('none');
+
+  const resolvedDefinition = useMemo(
+    () => definition ?? SHELL_WINDOWS[windowKey],
+    [definition, windowKey]
+  );
+
+  const [layoutState, setLayoutState] = useState<WindowLayoutState>(() => {
+    const stored = getWindowState<WindowLayoutState>(windowKey);
+    if (stored) {
+      return { ...DEFAULT_LAYOUT_STATE, ...stored };
+    }
+    return { ...DEFAULT_LAYOUT_STATE, isExpanded: defaultExpanded };
+  });
+
+  useEffect(() => {
+    registerWindow(windowKey, {
+      label: resolvedDefinition.label,
+      icon: resolvedDefinition.icon,
+      iconUrl: null,
+    });
+    return () => {
+      const reason = teardownReasonRef.current;
+      teardownReasonRef.current = 'none';
+      if (reason === 'minimize') {
+        return;
+      }
+      unregisterWindow(windowKey);
+      if (reason === 'close') {
+        clearWindowState(windowKey);
+        resetWindowMetadata(windowKey);
+      }
+    };
+  }, [clearWindowState, registerWindow, unregisterWindow, resetWindowMetadata, windowKey, resolvedDefinition]);
+
+  useEffect(() => {
+    setWindowState(windowKey, layoutState);
+  }, [layoutState, setWindowState, windowKey]);
+
+  const minimized = isWindowMinimized(windowKey);
+
+  const handleFocus = useCallback(() => {
+    restoreWindow(windowKey);
+    setActiveWindow(windowKey);
+  }, [restoreWindow, setActiveWindow, windowKey]);
+
+  const handleMinimize = useCallback(() => {
+    teardownReasonRef.current = 'minimize';
+    minimizeWindow(windowKey);
+    navigate('/');
+  }, [minimizeWindow, navigate, windowKey]);
+
+  const handleClose = useCallback(() => {
+    teardownReasonRef.current = 'close';
+    navigate('/');
+  }, [navigate]);
+
+  const handleToggleExpand = useCallback(() => {
+    setLayoutState((prev) => ({
+      ...prev,
+      isExpanded: !prev.isExpanded,
+    }));
+  }, []);
+
+  const Icon = resolvedDefinition.icon;
+
+  const chromeClassName = hideChrome
+    ? 'border border-transparent bg-transparent shadow-none'
+    : 'rounded-desktop-xl border border-hol-border bg-hol-surface shadow-desktop-window';
+
+  const containerBaseClass = hideChrome
+    ? 'relative mt-1.5 flex min-h-0 flex-col transition-all duration-200'
+    : 'relative mx-auto mt-1.5 flex min-h-0 flex-col transition-all duration-200';
+
+  const sizeClass = layoutState.isExpanded
+    ? 'h-[calc(100vh-112px)] w-[calc(100vw-64px)] max-w-none'
+    : 'h-[78vh] w-full max-w-[1080px]';
+
+  const containerClassName = cn(
+    containerBaseClass,
+    chromeClassName,
+    hideChrome ? 'w-full h-[78vh]' : sizeClass
+  );
+
+  const contentChromeClass = hideChrome
+    ? 'flex-1 min-h-0 overflow-hidden transition-opacity duration-200'
+    : 'flex-1 min-h-0 overflow-hidden border border-hol-border bg-hol-surface-alt transition-opacity duration-200';
+
+  return (
+    <motion.section
+      className={containerClassName}
+      layout
+      onMouseDown={handleFocus}
+      initial={{ opacity: 0.85, scale: 0.98 }}
+      animate={{ opacity: minimized ? 0 : 1, scale: minimized ? 0.95 : 1 }}
+      transition={{ duration: 0.2 }}
+    >
+      <ShellWindowControlsContext.Provider
+        value={{
+          minimize: handleMinimize,
+          close: handleClose,
+          toggleExpand: handleToggleExpand,
+          isExpanded: layoutState.isExpanded,
+          isMinimized: minimized,
+        }}
+      >
+        {hideChrome ? null : (
+          <div className='flex items-center justify-between rounded-t-desktop-xl bg-gradient-to-r from-hol-primary to-hol-primary-light px-5 py-3 text-hol-text-inverse'>
+            <div className='flex items-center gap-3'>
+              <span className='flex h-7 w-7 items-center justify-center rounded-md bg-white/25 text-hol-text-inverse'>
+                <Icon className='h-4 w-4' aria-hidden='true' />
+              </span>
+              <Typography variant='caption' className='text-sm font-semibold tracking-wide text-hol-text-inverse'>
+                {resolvedDefinition.title}
+              </Typography>
+            </div>
+            <div className='flex items-center gap-1'>
+              <button
+                type='button'
+                onClick={handleMinimize}
+                className='flex h-6 w-7 items-center justify-center rounded-[4px] border border-white/50 bg-white/30 text-[10px] text-hol-text-inverse'
+                aria-label='Minimize window'
+              >
+                _
+              </button>
+              <button
+                type='button'
+                onClick={handleToggleExpand}
+                className='flex h-6 w-7 items-center justify-center rounded-[4px] border border-white/50 bg-white/30 text-[10px] text-hol-text-inverse'
+                aria-label={layoutState.isExpanded ? 'Restore window size' : 'Maximize window'}
+              >
+                {layoutState.isExpanded ? '❐' : '□'}
+              </button>
+              <button
+                type='button'
+                onClick={handleClose}
+                className='flex h-6 w-7 items-center justify-center rounded-[4px] border border-white/60 bg-white/35 text-[10px] text-hol-text-inverse hover:bg-white/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-hol-highlight focus-visible:ring-offset-2 focus-visible:ring-offset-hol-primary'
+                aria-label={`Close ${resolvedDefinition.label}`}
+              >
+                <FiX className='h-3 w-3' aria-hidden='true' />
+              </button>
+            </div>
+          </div>
+        )}
+        <div className={cn(contentChromeClass, minimized ? 'pointer-events-none opacity-0' : 'opacity-100')}>
+          <div className='h-full overflow-hidden'>{children}</div>
+        </div>
+      </ShellWindowControlsContext.Provider>
+    </motion.section>
+  );
+};
+
+export default ShellWindow;
diff --git a/src/renderer/components/shell/WalletDisplay.tsx b/src/renderer/components/shell/WalletDisplay.tsx
new file mode 100644
index 0000000..d57642e
--- /dev/null
+++ b/src/renderer/components/shell/WalletDisplay.tsx
@@ -0,0 +1,95 @@
+import React, { useCallback } from 'react';
+import { useWalletStore } from '../../stores/walletStore';
+import { useConfigStore } from '../../stores/configStore';
+import { cn } from '../../lib/utils';
+import { Button } from '../ui/Button';
+
+const WalletDisplay: React.FC = () => {
+  const {
+    isConnected,
+    accountId,
+    balance,
+    network,
+    isInitializing,
+    connect,
+    disconnect,
+  } = useWalletStore();
+  const { config } = useConfigStore();
+  const isDark = (config?.advanced?.theme ?? 'light') === 'dark';
+
+  const formatBalance = (balance: string | null): string => {
+    if (!balance) return '0 ℏ';
+    const num = parseFloat(balance);
+    if (num >= 1000) {
+      return `${(num / 1000).toFixed(1)}k ℏ`;
+    }
+    return `${num.toFixed(2)} ℏ`;
+  };
+
+  const formatAccountId = (accountId: string): string => {
+    if (accountId.length <= 12) return accountId;
+    return `${accountId.slice(0, 6)}...${accountId.slice(-4)}`;
+  };
+
+  const handleConnect = useCallback(() => {
+    void connect();
+  }, [connect]);
+
+  const handleDisconnect = useCallback(() => {
+    void disconnect();
+  }, [disconnect]);
+
+  if (!isConnected || !accountId) {
+    return (
+      <Button
+        size='sm'
+        onClick={handleConnect}
+        disabled={isInitializing}
+        className={cn(
+          'rounded-full border px-3 py-1 text-xs font-semibold transition-all duration-200',
+          isDark
+            ? 'border-white/25 bg-white/10 text-white hover:bg-white/20'
+            : 'border-blue-200 bg-blue-50 text-blue-600 hover:bg-blue-100'
+        )}
+      >
+        {isInitializing ? 'Connecting…' : 'Connect Wallet'}
+      </Button>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        'flex items-center gap-2 text-xs font-semibold transition-colors duration-200',
+        isDark ? 'text-white/80' : 'text-brand-ink/85'
+      )}
+    >
+      <div
+        className={cn(
+          'flex items-center gap-2 rounded-full border px-3 py-1 backdrop-blur-sm transition-colors duration-200',
+          isDark ? 'border-white/15 bg-white/10' : 'border-gray-200 bg-white/90 shadow-sm'
+        )}
+      >
+        <span className={cn('h-2 w-2 rounded-full', network === 'mainnet' ? 'bg-brand-green' : 'bg-brand-blue')} />
+        <span className='font-mono' style={{ fontFamily: 'Roboto Mono, monospace' }}>
+          {formatAccountId(accountId)}
+        </span>
+        <span className='font-mono text-[10px] opacity-70' style={{ fontFamily: 'Roboto Mono, monospace' }}>
+          {formatBalance(balance)}
+        </span>
+        <button
+          type='button'
+          onClick={handleDisconnect}
+          className={cn(
+            'rounded-full px-2 py-1 text-[10px] font-semibold transition-all duration-200',
+            isDark ? 'bg-white/15 text-white hover:bg-white/25' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+          )}
+        >
+          Disconnect
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default WalletDisplay;
diff --git a/src/renderer/components/shell/useShellNavigation.ts b/src/renderer/components/shell/useShellNavigation.ts
new file mode 100644
index 0000000..733f6df
--- /dev/null
+++ b/src/renderer/components/shell/useShellNavigation.ts
@@ -0,0 +1,20 @@
+import { useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+export const useShellNavigation = () => {
+  const navigate = useNavigate();
+
+  const open = useCallback(
+    (route: string) => {
+      navigate(route);
+    },
+    [navigate]
+  );
+
+  const goHome = useCallback(() => {
+    navigate('/');
+  }, [navigate]);
+
+  return { open, goHome };
+};
+
diff --git a/src/renderer/electron.d.ts b/src/renderer/electron.d.ts
index 71308d8..ffd45a7 100644
--- a/src/renderer/electron.d.ts
+++ b/src/renderer/electron.d.ts
@@ -193,7 +193,8 @@ export interface ElectronAPI {
   ) => Promise<{ success: boolean; data?: MCPServerData; error?: string }>;
   installMCPFromRegistry: (
     serverId: string,
-    packageName?: string
+    packageName?: string,
+    installCommand?: { command: string; args: string[] }
   ) => Promise<{ success: boolean; data?: MCPServerData; error?: string }>;
   clearMCPRegistryCache: () => Promise<{ success: boolean; error?: string }>;
   getMCPCacheStats: () => Promise<{
@@ -261,6 +262,17 @@ export interface ElectronAPI {
   ) => Promise<PluginSecurityResult>;
   clearPluginCache: () => Promise<{ success: boolean; error?: string }>;
 
+  getPaths: () => Promise<{
+    moonscapePreload?: string;
+  }>;
+  paths?: {
+    moonscapePreload?: string;
+  };
+
+  minimizeWindow: () => void;
+  maximizeWindow: () => void;
+  closeWindow: () => void;
+
   onPluginInstallProgress: (
     callback: (progress: PluginInstallProgress) => void
   ) => void;
diff --git a/src/renderer/hooks/useAssistantMessageController.ts b/src/renderer/hooks/useAssistantMessageController.ts
new file mode 100644
index 0000000..988a471
--- /dev/null
+++ b/src/renderer/hooks/useAssistantMessageController.ts
@@ -0,0 +1,367 @@
+import { useState, useCallback, useEffect } from 'react';
+import { useAgentStore } from '../stores/agentStore';
+import type { ChatSession } from '../../main/db/schema';
+import useFileAttachments from './useFileAttachments';
+import { useNotificationStore } from '../stores/notificationStore';
+import type { Notification } from '../stores/notificationStore';
+
+type AssistantChatContext = {
+  mode: 'personal' | 'hcs10';
+  topicId?: string;
+  agentName?: string;
+};
+
+export type AttachmentPayload = {
+  name: string;
+  data: string;
+  type: string;
+  size: number;
+};
+
+export type BuildSessionNameArgs = {
+  message: string;
+  chatContext: AssistantChatContext;
+  defaultName: string;
+  currentSession?: ChatSession | null;
+};
+
+export type ExtraAttachmentsBuilderArgs = {
+  message: string;
+  addNotification: (
+    notification: Omit<Notification, 'id' | 'timestamp'>
+  ) => void;
+  chatContext: AssistantChatContext;
+  session: ChatSession;
+};
+
+export type AssistantMessageControllerOptions = {
+  /**
+   * Builds the session name when a new session must be created.
+   */
+  buildSessionName: (args: BuildSessionNameArgs) => string;
+  /**
+   * Optional callback to add additional attachments (e.g. browser page context).
+   */
+  buildExtraAttachments?: (
+    args: ExtraAttachmentsBuilderArgs
+  ) => Promise<AttachmentPayload[]>;
+  /**
+   * Fired before a new session is created, allowing callers to mark manual selection state.
+   */
+  onBeforeSessionCreate?: () => void;
+  /**
+   * Fired once a new session has been created.
+   */
+  onSessionCreated?: (sessionId: string) => void;
+  /**
+   * Fired whenever a session is confirmed as active for the outbound message.
+   */
+  onSessionActivated?: (session: ChatSession) => void;
+  /**
+   * Optional reset trigger. When defined and transitions to false, input & attachments reset.
+   */
+  resetTrigger?: boolean;
+};
+
+export type AssistantMessageControllerResult = {
+  inputValue: string;
+  setInputValue: (value: string) => void;
+  isSending: boolean;
+  isSubmitting: boolean;
+  selectedFiles: File[];
+  fileError: string | null;
+  handleFileAdd: (files: FileList) => void;
+  handleFileRemove: (index: number) => void;
+  handleSendMessage: () => Promise<void>;
+  resetAttachments: () => void;
+};
+
+/**
+ * Creates a reusable controller for composing assistant messages.
+ * @param options Controls session naming, attachment enrichment, and lifecycle callbacks.
+ * @returns State and handlers used to drive assistant message composition UI.
+ */
+export function useAssistantMessageController(
+  options: AssistantMessageControllerOptions
+): AssistantMessageControllerResult {
+  const {
+    buildSessionName,
+    buildExtraAttachments,
+    onBeforeSessionCreate,
+    onSessionCreated,
+    onSessionActivated,
+    resetTrigger,
+  } = options;
+
+  const [inputValue, setInputValue] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isSending, setIsSending] = useState(false);
+
+  const addNotification = useNotificationStore(
+    (state) => state.addNotification
+  );
+
+  const createSession = useAgentStore((state) => state.createSession);
+  const loadSession = useAgentStore((state) => state.loadSession);
+  const saveSession = useAgentStore((state) => state.saveSession);
+  const sendMessage = useAgentStore((state) => state.sendMessage);
+  const isConnected = useAgentStore((state) => state.isConnected);
+  const isTyping = useAgentStore((state) => state.isTyping);
+  const chatContext = useAgentStore((state) => state.chatContext);
+  const currentSession = useAgentStore((state) => state.currentSession);
+
+  const {
+    files: selectedFiles,
+    addFiles,
+    removeFile,
+    reset: resetAttachments,
+    fileError,
+    toBase64,
+  } = useFileAttachments(5, 10);
+
+  const handleFileAdd = useCallback(
+    (fileList: FileList) => {
+      addFiles(fileList);
+    },
+    [addFiles]
+  );
+
+  const handleFileRemove = useCallback(
+    (index: number) => {
+      removeFile(index);
+    },
+    [removeFile]
+  );
+
+  const handleSendMessage = useCallback(async () => {
+    const message = inputValue.trim();
+    if (
+      (!message && selectedFiles.length === 0) ||
+      isSubmitting ||
+      isTyping ||
+      !isConnected
+    ) {
+      return;
+    }
+
+    setIsSubmitting(true);
+    setIsSending(true);
+
+    try {
+      let session = currentSession;
+
+      if (!session) {
+        if (onBeforeSessionCreate) {
+          onBeforeSessionCreate();
+        }
+        const defaultName =
+          chatContext.mode === 'personal'
+            ? `Personal Chat - ${new Date().toLocaleDateString()}`
+            : chatContext.agentName || `HCS-10 Chat - ${chatContext.topicId}`;
+
+        const sessionName = buildSessionName({
+          message,
+          chatContext,
+          defaultName,
+          currentSession,
+        });
+
+        const newSession = await createSession(
+          sessionName,
+          chatContext.mode,
+          chatContext.mode === 'hcs10' ? chatContext.topicId : undefined
+        );
+
+        await loadSession(newSession.id);
+        session = useAgentStore.getState().currentSession;
+
+        if (!session) {
+          throw new Error('Failed to activate session before sending message');
+        }
+
+        if (onSessionCreated) {
+          onSessionCreated(newSession.id);
+        }
+      }
+
+      if (!session) {
+        throw new Error('Unable to resolve session for assistant message');
+      }
+
+      const attachments: AttachmentPayload[] = [];
+
+      if (selectedFiles.length > 0) {
+        const failures: string[] = [];
+
+        for (const file of selectedFiles) {
+          try {
+            const base64Content = await toBase64(file);
+            attachments.push({
+              name: file.name,
+              data: base64Content,
+              type: file.type || 'application/octet-stream',
+              size: file.size,
+            });
+          } catch (error) {
+            failures.push(file.name);
+          }
+        }
+
+        if (failures.length > 0) {
+          const allFailed = failures.length === selectedFiles.length;
+          const title = allFailed
+            ? 'File Attachment Failed'
+            : 'Some Files Failed to Attach';
+          const messageText =
+            failures.length === 1
+              ? `Failed to process file: ${failures[0]}`
+              : `Failed to process ${failures.length} files: ${failures.join(', ')}`;
+
+          addNotification({
+            type: allFailed ? 'error' : 'warning',
+            title,
+            message: messageText,
+            duration: allFailed ? 8000 : 6000,
+          });
+
+          if (allFailed) {
+            return;
+          }
+        }
+      }
+
+      if (buildExtraAttachments) {
+        try {
+          const extra = await buildExtraAttachments({
+            message,
+            addNotification,
+            chatContext,
+            session,
+          });
+          if (Array.isArray(extra) && extra.length > 0) {
+            attachments.push(...extra);
+          }
+        } catch (error) {
+          addNotification({
+            type: 'warning',
+            title: 'Context Attachment Failed',
+            message:
+              error instanceof Error
+                ? error.message
+                : 'Unable to attach additional context for this message.',
+            duration: 6000,
+          });
+        }
+      }
+
+      const { currentSession: activeSession } = useAgentStore.getState();
+      const targetSession = activeSession ?? session;
+      if (!targetSession) {
+        throw new Error('Active session unavailable after loading');
+      }
+
+      if (onSessionActivated) {
+        onSessionActivated(targetSession);
+      }
+
+      const topicId =
+        targetSession.mode === 'hcs10' ? targetSession.topicId : undefined;
+
+      await sendMessage(message, attachments, topicId);
+
+      if (targetSession) {
+        let nextSessionName = targetSession.name;
+        const isPersonalDefault = nextSessionName.includes('Personal Chat -');
+        const isHcsDefault = nextSessionName.includes('HCS-10 Chat -');
+        const canUseMessageAsName = message.length > 0 && message.length <= 50;
+
+        if (isPersonalDefault && canUseMessageAsName) {
+          nextSessionName = message;
+        } else if (
+          isHcsDefault &&
+          Boolean(chatContext.agentName) &&
+          nextSessionName !== chatContext.agentName
+        ) {
+          nextSessionName = chatContext.agentName as string;
+        }
+
+        const updatedSession = {
+          ...targetSession,
+          lastMessageAt: new Date(),
+          updatedAt: new Date(),
+          name: nextSessionName,
+        } as ChatSession;
+
+        try {
+          await saveSession(updatedSession);
+        } catch (error) {
+          addNotification({
+            type: 'warning',
+            title: 'Session Update Failed',
+            message:
+              'Unable to update session metadata. Message was still sent.',
+            duration: 6000,
+          });
+        }
+      }
+
+      setInputValue('');
+    } catch (error) {
+      addNotification({
+        type: 'error',
+        title: 'Message Send Failed',
+        message:
+          error instanceof Error
+            ? error.message
+            : 'Unable to send your message. Please try again.',
+        duration: 7000,
+      });
+    } finally {
+      resetAttachments();
+      setIsSubmitting(false);
+      setIsSending(false);
+    }
+  }, [
+    inputValue,
+    selectedFiles,
+    isSubmitting,
+    isTyping,
+    isConnected,
+    currentSession,
+    chatContext,
+    createSession,
+    loadSession,
+    saveSession,
+    sendMessage,
+    toBase64,
+    buildSessionName,
+    buildExtraAttachments,
+    addNotification,
+    onBeforeSessionCreate,
+    onSessionCreated,
+    onSessionActivated,
+    resetAttachments,
+  ]);
+
+  useEffect(() => {
+    if (typeof resetTrigger === 'boolean' && !resetTrigger) {
+      setInputValue('');
+      resetAttachments();
+    }
+  }, [resetTrigger, resetAttachments]);
+
+  return {
+    inputValue,
+    setInputValue,
+    isSending,
+    isSubmitting,
+    selectedFiles,
+    fileError,
+    handleFileAdd,
+    handleFileRemove,
+    handleSendMessage,
+    resetAttachments,
+  };
+}
+
+export default useAssistantMessageController;
diff --git a/src/renderer/hooks/useChatSessions.ts b/src/renderer/hooks/useChatSessions.ts
index ac71dff..1810995 100644
--- a/src/renderer/hooks/useChatSessions.ts
+++ b/src/renderer/hooks/useChatSessions.ts
@@ -13,7 +13,11 @@ export type UseChatSessionsParams = {
     topicId?: string
   ) => Promise<ChatSession>;
   deleteSession: (id: string) => Promise<void>;
-  setChatContext: (ctx: { mode: ChatMode; topicId?: string; agentName?: string }) => void;
+  setChatContext: (ctx: {
+    mode: ChatMode;
+    topicId?: string;
+    agentName?: string;
+  }) => void;
   currentSession: ChatSession | null;
 };
 
@@ -32,13 +36,18 @@ export type UseChatSessionsResult = {
 /**
  * Encapsulates session selection, creation and deletion flows for Chat.
  */
-export function useChatSessions(params: UseChatSessionsParams): UseChatSessionsResult {
-  const { loadSession, createSession, deleteSession, setChatContext, currentSession } = params;
+export function useChatSessions(
+  params: UseChatSessionsParams
+): UseChatSessionsResult {
+  const { loadSession, deleteSession, setChatContext, currentSession } = params;
   const navigate = useNavigate();
 
   const [isLoadingSessions, setIsLoadingSessions] = useState(false);
-  const [showSessionCreationModal, setShowSessionCreationModal] = useState(false);
-  const [sessionDeleteConfirm, setSessionDeleteConfirm] = useState<string | null>(null);
+  const [showSessionCreationModal, setShowSessionCreationModal] =
+    useState(false);
+  const [sessionDeleteConfirm, setSessionDeleteConfirm] = useState<
+    string | null
+  >(null);
 
   const openCreateSession = useCallback(() => {
     setShowSessionCreationModal(true);
@@ -58,14 +67,21 @@ export function useChatSessions(params: UseChatSessionsParams): UseChatSessionsR
           setChatContext({ mode: 'personal', agentName: session.name });
           navigate('/chat');
         } else if (session.mode === 'hcs10' && session.topicId) {
-          setChatContext({ mode: 'hcs10', topicId: session.topicId, agentName: session.name });
+          setChatContext({
+            mode: 'hcs10',
+            topicId: session.topicId,
+            agentName: session.name,
+          });
           navigate(`/chat/${session.topicId}`);
         }
 
-        toast.success('Session Loaded', { description: `Switched to "${session.name}"` });
+        toast.success('Session Loaded', {
+          description: `Switched to "${session.name}"`,
+        });
       } catch (error) {
         toast.error('Failed to Load Session', {
-          description: error instanceof Error ? error.message : 'Could not load session',
+          description:
+            error instanceof Error ? error.message : 'Could not load session',
         });
       } finally {
         setIsLoadingSessions(false);
@@ -79,9 +95,13 @@ export function useChatSessions(params: UseChatSessionsParams): UseChatSessionsR
       setShowSessionCreationModal(false);
       try {
         setIsLoadingSessions(true);
-        
-        setChatContext({ mode: session.mode as ChatMode, topicId: session.topicId, agentName: session.name });
-        
+
+        setChatContext({
+          mode: session.mode as ChatMode,
+          topicId: session.topicId,
+          agentName: session.name,
+        });
+
         await loadSession(session.id);
 
         if (session.mode === 'hcs10' && session.topicId) {
@@ -90,10 +110,15 @@ export function useChatSessions(params: UseChatSessionsParams): UseChatSessionsR
           navigate('/chat');
         }
 
-        toast.success('Session Created', { description: `Created and activated session "${session.name}"` });
+        toast.success('Session Created', {
+          description: `Created and activated session "${session.name}"`,
+        });
       } catch (error) {
         toast.error('Session Creation Error', {
-          description: error instanceof Error ? error.message : 'Could not activate session',
+          description:
+            error instanceof Error
+              ? error.message
+              : 'Could not activate session',
         });
       } finally {
         setIsLoadingSessions(false);
@@ -106,11 +131,13 @@ export function useChatSessions(params: UseChatSessionsParams): UseChatSessionsR
     async (sessionId: string) => {
       try {
         const wasCurrentSession = currentSession?.id === sessionId;
-        
+
         await deleteSession(sessionId);
         setSessionDeleteConfirm(null);
 
-        toast.success('Session Deleted', { description: 'Session has been permanently deleted' });
+        toast.success('Session Deleted', {
+          description: 'Session has been permanently deleted',
+        });
 
         if (wasCurrentSession) {
           setChatContext({ mode: 'personal', agentName: 'Personal Assistant' });
@@ -118,7 +145,8 @@ export function useChatSessions(params: UseChatSessionsParams): UseChatSessionsR
         }
       } catch (error) {
         toast.error('Failed to Delete Session', {
-          description: error instanceof Error ? error.message : 'Could not delete session',
+          description:
+            error instanceof Error ? error.message : 'Could not delete session',
         });
       }
     },
diff --git a/src/renderer/hooks/useInscriptionJobs.ts b/src/renderer/hooks/useInscriptionJobs.ts
new file mode 100644
index 0000000..fabd8ac
--- /dev/null
+++ b/src/renderer/hooks/useInscriptionJobs.ts
@@ -0,0 +1,191 @@
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { Logger } from '@hashgraphonline/standards-sdk';
+import { useWalletStore } from '../stores/walletStore';
+import { useConfigStore } from '../stores/configStore';
+
+interface RawJobFileEntry {
+  topicId?: string | null;
+}
+
+interface RawJobFiles {
+  imageUploads?: RawJobFileEntry[];
+  metadataUploads?: RawJobFileEntry[];
+}
+
+interface RawInscriptionJob {
+  tx_id: string;
+  topic_id?: string | null;
+  mimeType?: string | null;
+  createdAt?: string | null;
+  type?: string | null;
+  name?: string | null;
+  files?: RawJobFiles | null;
+}
+
+export interface InscriptionJob {
+  id: string;
+  topic: string;
+  imageTopic: string;
+  mimeType: string | null;
+  type: string | null;
+  name: string | null;
+  createdAt: Date | null;
+}
+
+interface UseInscriptionJobsResult {
+  jobs: InscriptionJob[];
+  loading: boolean;
+  error: string | null;
+  hasLoaded: boolean;
+  network: 'mainnet' | 'testnet';
+  loadJobs: () => Promise<void>;
+}
+
+const logger = new Logger({ module: 'useInscriptionJobs' });
+
+/**
+ * Determines whether the provided value is a non-null record
+ */
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null;
+}
+
+/**
+ * Type guard for inscription job entries returned by the Kiloscribe jobs endpoint
+ */
+function isRawInscriptionJob(value: unknown): value is RawInscriptionJob {
+  if (!isRecord(value)) {
+    return false;
+  }
+  return typeof value.tx_id === 'string';
+}
+
+/**
+ * Removes known URL prefixes from HCS topic identifiers
+ */
+function normalizeTopic(topic: string): string {
+  return topic
+    .replace(/^hcs:\/\/(1\/)?/i, '')
+    .replace(/^1\//, '')
+    .trim();
+}
+
+/**
+ * Maps a raw job payload into a structured inscription job
+ */
+function mapJob(raw: RawInscriptionJob): InscriptionJob {
+  const primaryTopic = typeof raw.topic_id === 'string' ? raw.topic_id : '';
+  const imageTopicCandidate = raw.files?.imageUploads?.find(
+    (entry) => typeof entry?.topicId === 'string' && entry.topicId.trim().length > 0,
+  )?.topicId;
+  const metadataTopicCandidate = raw.files?.metadataUploads?.find(
+    (entry) => typeof entry?.topicId === 'string' && entry.topicId.trim().length > 0,
+  )?.topicId;
+
+  const normalizedTopic = normalizeTopic(imageTopicCandidate || primaryTopic || '');
+  const normalizedMetadataTopic = normalizeTopic(metadataTopicCandidate || primaryTopic || '');
+
+  const createdAt = raw.createdAt ? new Date(raw.createdAt) : null;
+  const validCreatedAt = createdAt && !Number.isNaN(createdAt.valueOf()) ? createdAt : null;
+
+  return {
+    id: raw.tx_id,
+    topic: normalizeTopic(primaryTopic || normalizedMetadataTopic),
+    imageTopic: normalizedTopic || normalizeTopic(primaryTopic),
+    mimeType: raw.mimeType ?? null,
+    type: raw.type ?? null,
+    name: raw.name ?? null,
+    createdAt: validCreatedAt,
+  };
+}
+
+/**
+ * Hook that retrieves a user's previous inscriptions from Kiloscribe jobs endpoint
+ */
+export function useInscriptionJobs(): UseInscriptionJobsResult {
+  const walletAccountId = useWalletStore((state) => state.accountId);
+  const walletNetwork = useWalletStore((state) => state.network);
+  const configAccountId = useConfigStore(
+    (state) => state.config?.hedera.accountId ?? ''
+  );
+  const configNetwork = useConfigStore(
+    (state) => state.config?.hedera.network ?? 'testnet'
+  );
+
+  const [jobs, setJobs] = useState<InscriptionJob[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [hasLoaded, setHasLoaded] = useState(false);
+  const busy = useRef(false);
+
+  const effectiveAccountId = useMemo(() => {
+    return walletAccountId || configAccountId || '';
+  }, [walletAccountId, configAccountId]);
+
+  const effectiveNetwork = useMemo<'mainnet' | 'testnet'>(() => {
+    if (walletNetwork === 'mainnet' || walletNetwork === 'testnet') {
+      return walletNetwork;
+    }
+    return configNetwork === 'mainnet' ? 'mainnet' : 'testnet';
+  }, [walletNetwork, configNetwork]);
+
+  const loadJobs = useCallback(async () => {
+    if (busy.current) {
+      return;
+    }
+
+    if (!effectiveAccountId) {
+      setJobs([]);
+      setError('No Hedera account configured for inscriptions');
+      setHasLoaded(true);
+      return;
+    }
+
+    busy.current = true;
+    setLoading(true);
+    setError(null);
+
+    try {
+      const response = await fetch('https://kiloscribe.com/api/jobs', {
+        method: 'GET',
+        headers: {
+          'x-account-id': effectiveAccountId,
+          'x-type': 'file',
+        },
+      });
+      if (!response.ok) {
+        throw new Error(`Request failed with status ${response.status}`);
+      }
+      const payload = await response.json();
+      const rawJobs = Array.isArray(payload)
+        ? payload.filter(isRawInscriptionJob)
+        : [];
+      const mapped = rawJobs.map(mapJob);
+      const sorted = mapped.sort((a, b) => {
+        const aTime = a.createdAt?.valueOf() ?? 0;
+        const bTime = b.createdAt?.valueOf() ?? 0;
+        return bTime - aTime;
+      });
+      setJobs(sorted);
+    } catch (err) {
+      const errorObj = err instanceof Error ? err : new Error(String(err));
+      const message = errorObj.message || 'Failed to load inscriptions';
+      setJobs([]);
+      setError(message);
+      logger.error('Failed to load inscription jobs', errorObj);
+    } finally {
+      setLoading(false);
+      setHasLoaded(true);
+      busy.current = false;
+    }
+  }, [effectiveAccountId]);
+
+  return {
+    jobs,
+    loading,
+    error,
+    hasLoaded,
+    network: effectiveNetwork,
+    loadJobs,
+  };
+}
diff --git a/src/renderer/hooks/useWalletOperationalMode.ts b/src/renderer/hooks/useWalletOperationalMode.ts
new file mode 100644
index 0000000..e998e3a
--- /dev/null
+++ b/src/renderer/hooks/useWalletOperationalMode.ts
@@ -0,0 +1,71 @@
+import { useEffect, useRef } from 'react';
+import { useAgentStore, type OperationalMode } from '../stores/agentStore';
+import { useWalletStore } from '../stores/walletStore';
+
+type AgentStatus = ReturnType<typeof useAgentStore.getState>['status'];
+
+type WalletOperationalSnapshot = {
+  walletConnected: boolean;
+  walletInitializing: boolean;
+  walletReady: boolean;
+  agentStatus: AgentStatus;
+};
+
+const DISCONNECTED_MODE: OperationalMode = 'autonomous';
+
+export function useWalletOperationalMode(): WalletOperationalSnapshot {
+  const walletConnected = useWalletStore((state) => state.isConnected);
+  const walletInitializing = useWalletStore((state) => state.isInitializing);
+  const operationalMode = useAgentStore((state) => state.operationalMode);
+  const setOperationalMode = useAgentStore((state) => state.setOperationalMode);
+  const agentStatus = useAgentStore((state) => state.status);
+  const disconnect = useAgentStore((state) => state.disconnect);
+  const connect = useAgentStore((state) => state.connect);
+
+  const previousModeRef = useRef<OperationalMode>(DISCONNECTED_MODE);
+  const previousWalletConnectedRef = useRef<boolean>(walletConnected);
+
+  useEffect(() => {
+    if (walletInitializing) {
+      return;
+    }
+
+    if (walletConnected) {
+      const isChangingMode = operationalMode !== 'provideBytes' && agentStatus !== 'connecting' && agentStatus !== 'disconnecting';
+
+      if (isChangingMode) {
+        previousModeRef.current = operationalMode;
+        previousWalletConnectedRef.current = true;
+        void setOperationalMode('provideBytes');
+        return;
+      }
+
+      if (!previousWalletConnectedRef.current) {
+        previousWalletConnectedRef.current = true;
+        if (agentStatus === 'connected') {
+          void disconnect().finally(() => {
+            void connect().catch(() => {});
+          });
+        }
+      }
+      return;
+    }
+
+    if (previousWalletConnectedRef.current) {
+      previousWalletConnectedRef.current = false;
+    }
+
+    if (operationalMode !== previousModeRef.current && agentStatus !== 'connecting' && agentStatus !== 'disconnecting') {
+      void setOperationalMode(previousModeRef.current);
+    }
+  }, [walletConnected, walletInitializing, operationalMode, setOperationalMode, agentStatus, disconnect, connect]);
+
+  return {
+    walletConnected,
+    walletInitializing,
+    walletReady: walletConnected || walletInitializing === false,
+    agentStatus,
+  };
+}
+
+export default useWalletOperationalMode;
diff --git a/src/renderer/pages/ChatPage.tsx b/src/renderer/pages/ChatPage.tsx
index 3aa8d30..464e125 100644
--- a/src/renderer/pages/ChatPage.tsx
+++ b/src/renderer/pages/ChatPage.tsx
@@ -38,11 +38,12 @@ import { useHCS10 } from '../contexts/HCS10Context';
 import type { Agent } from '../contexts/HCS10Context';
 import ClearChatDialog from '../components/chat/modals/ClearChatDialog';
 import DeleteSessionDialog from '../components/chat/modals/DeleteSessionDialog';
-import useFileAttachments from '../hooks/useFileAttachments';
+import useAssistantMessageController from '../hooks/useAssistantMessageController';
 import useAgentInit from '../hooks/useAgentInit';
 import useHcs10Polling from '../hooks/useHcs10Polling';
 import useChatSessions from '../hooks/useChatSessions';
 import useChatContextInit from '../hooks/useChatContextInit';
+import useWalletOperationalMode from '../hooks/useWalletOperationalMode';
 
 interface ChatPageProps {}
 
@@ -65,6 +66,9 @@ const logger = new Logger({ module: 'ChatPage' });
 const ChatPage: React.FC<ChatPageProps> = () => {
   const navigate = useNavigate();
   const { agentId } = useParams<{ agentId?: string }>();
+  const { walletReady } = useWalletOperationalMode();
+  const operationalMode = useAgentStore((state) => state.operationalMode);
+  const setOperationalMode = useAgentStore((state) => state.setOperationalMode);
   const {
     status,
     isConnected,
@@ -101,17 +105,6 @@ const ChatPage: React.FC<ChatPageProps> = () => {
 
   const { config, isConfigured } = useConfigStore();
   const { addNotification } = useNotificationStore();
-  const [isLoading, setIsLoading] = useState(false);
-  const [inputValue, setInputValue] = useState('');
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const {
-    files: selectedFiles,
-    fileError,
-    addFiles,
-    removeFile,
-    reset,
-    toBase64,
-  } = useFileAttachments(5, 10);
   const [userProfile, setUserProfile] = useState<UserProfile | null>(null);
   const [isLoadingProfile, setIsLoadingProfile] = useState(false);
   const [showClearDialog, setShowClearDialog] = useState(false);
@@ -144,6 +137,51 @@ const ChatPage: React.FC<ChatPageProps> = () => {
   });
   const messagesEndRef = React.useRef<HTMLDivElement>(null);
   const isManuallySelectingSession = useRef(false);
+  const manualSelectionReleaseRef = useRef<number | null>(null);
+
+  const armManualSelection = useCallback(() => {
+    isManuallySelectingSession.current = true;
+    if (manualSelectionReleaseRef.current !== null) {
+      window.clearTimeout(manualSelectionReleaseRef.current);
+      manualSelectionReleaseRef.current = null;
+    }
+  }, []);
+
+  const scheduleManualSelectionRelease = useCallback(() => {
+    if (!isManuallySelectingSession.current) {
+      return;
+    }
+    if (manualSelectionReleaseRef.current !== null) {
+      window.clearTimeout(manualSelectionReleaseRef.current);
+    }
+    manualSelectionReleaseRef.current = window.setTimeout(() => {
+      isManuallySelectingSession.current = false;
+      manualSelectionReleaseRef.current = null;
+    }, 1500);
+  }, []);
+
+  const handleControllerSessionCreated = useCallback(
+    (_: string) => {
+      scheduleManualSelectionRelease();
+    },
+    [scheduleManualSelectionRelease]
+  );
+
+  const handleControllerSessionActivated = useCallback(
+    (_: ChatSession) => {
+      scheduleManualSelectionRelease();
+    },
+    [scheduleManualSelectionRelease]
+  );
+
+  useEffect(() => {
+    return () => {
+      if (manualSelectionReleaseRef.current !== null) {
+        window.clearTimeout(manualSelectionReleaseRef.current);
+        manualSelectionReleaseRef.current = null;
+      }
+    };
+  }, []);
 
   const toggleSessionSelector = useCallback(() => {
     setShowSessionSelector((prev) => !prev);
@@ -217,9 +255,15 @@ const ChatPage: React.FC<ChatPageProps> = () => {
     };
   }, [fetchUserProfile]);
 
-  const walletReady = wallet.isConnected || wallet.isInitializing === false;
   useAgentInit({ isConfigured, config, isConnected, status, connect, ready: walletReady });
 
+  useEffect(() => {
+    if (!walletReady) {
+      return;
+    }
+    void setOperationalMode('provideBytes');
+  }, [walletReady, setOperationalMode]);
+
 
   useEffect(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
@@ -246,168 +290,34 @@ const ChatPage: React.FC<ChatPageProps> = () => {
     hasMessages: messages.length > 0,
   });
 
-  const handleAddFiles = (files: FileList) => addFiles(files);
-  const handleRemoveFile = (index: number) => removeFile(index);
-  const fileToBase64 = toBase64;
-
-  const handleSendMessage = async () => {
-    const message = inputValue.trim();
-    if (
-      (!message && selectedFiles.length === 0) ||
-      isSubmitting ||
-      isTyping ||
-      !isConnected
-    )
-      return;
-
-    setIsSubmitting(true);
-    setIsLoading(true);
-
-    try {
-      if (!currentSession) {
-        let sessionName: string;
-
-        if (chatContext.mode === 'personal') {
-          sessionName =
-            message.length > 50
-              ? `${message.substring(0, 47)}...`
-              : message || `Personal Chat - ${new Date().toLocaleDateString()}`;
-        } else {
-          sessionName =
-            chatContext.agentName || `HCS-10 Chat - ${chatContext.topicId}`;
-        }
-
-        isManuallySelectingSession.current = true;
-
-        const newSession = await createSession(
-          sessionName,
-          chatContext.mode,
-          chatContext.mode === 'hcs10' ? chatContext.topicId : undefined
-        );
-
-        await loadSession(newSession.id);
-
-        setTimeout(() => {
-          isManuallySelectingSession.current = false;
-        }, 1500);
-
-        const { currentSession: verifiedSession } = useAgentStore.getState();
-        if (!verifiedSession) {
-          throw new Error('Failed to create active session for sending message');
-        }
-      }
-
-      const { currentSession: activeSession } = useAgentStore.getState();
-      if (!activeSession) {
-        throw new Error('No active session available for sending message');
-      }
-
-      const attachments: Array<{
-        name: string;
-        data: string;
-        type: string;
-        size: number;
-      }> = [];
-
-      if (selectedFiles.length > 0) {
-        const failedFiles: string[] = [];
-        
-        for (const file of selectedFiles) {
-          try {
-            const base64Content = await fileToBase64(file);
-            attachments.push({
-              name: file.name,
-              data: base64Content,
-              type: file.type || 'application/octet-stream',
-              size: file.size,
-            });
-          } catch (error) {
-            logger.error('File conversion failed:', error);
-            failedFiles.push(file.name);
-          }
-        }
-        
-        if (failedFiles.length > 0) {
-          const allFilesFailed = failedFiles.length === selectedFiles.length;
-          const someFilesFailed = failedFiles.length > 0 && failedFiles.length < selectedFiles.length;
-          
-          if (allFilesFailed) {
-            addNotification({
-              type: 'error',
-              title: 'File Attachment Failed',
-              message: failedFiles.length === 1 
-                ? `Failed to process file: ${failedFiles[0]}` 
-                : `Failed to process ${failedFiles.length} files: ${failedFiles.join(', ')}`,
-              duration: 8000
-            });
-            return;
-          } else if (someFilesFailed) {
-            addNotification({
-              type: 'warning',
-              title: 'Some Files Failed to Attach',
-              message: failedFiles.length === 1 
-                ? `Failed to attach: ${failedFiles[0]}` 
-                : `Failed to attach ${failedFiles.length} files: ${failedFiles.join(', ')}`,
-              duration: 6000
-            });
-          }
-        }
-      }
-
-      let sendTopicId: string | undefined;
-      if (activeSession?.mode === 'hcs10') {
-        sendTopicId = activeSession.topicId;
-      } else {
-        sendTopicId = undefined;
-      }
-      await sendMessage(message, attachments, sendTopicId);
-
-      if (activeSession) {
-        let nextSessionName = activeSession.name;
-        const isPersonalDefault =
-          activeSession.name.includes('Personal Chat -');
-        const isHcsDefault = activeSession.name.includes('HCS-10 Chat -');
-        const canUseMessageAsName = message.length > 0 && message.length <= 50;
-
-        if (isPersonalDefault && canUseMessageAsName) {
-          nextSessionName = message;
-        } else if (
-          isHcsDefault &&
-          Boolean(chatContext.agentName) &&
-          activeSession.name !== chatContext.agentName
-        ) {
-          nextSessionName = chatContext.agentName as string;
-        }
-
-        const updatedSession = {
-          ...activeSession,
-          lastMessageAt: new Date(),
-          updatedAt: new Date(),
-          name: nextSessionName,
-        } as ChatSession;
-
-        try {
-          await saveSession(updatedSession);
-        } catch (error) {
-          logger.error('Failed to save session:', error);
+  const {
+    inputValue,
+    setInputValue,
+    isSending,
+    isSubmitting,
+    selectedFiles,
+    fileError,
+    handleFileAdd,
+    handleFileRemove,
+    handleSendMessage,
+  } = useAssistantMessageController({
+    buildSessionName: ({ message, chatContext, defaultName }) => {
+      if (chatContext.mode === 'personal') {
+        if (message.length > 50) {
+          return `${message.substring(0, 47)}...`;
         }
+        return message || defaultName;
       }
+      return chatContext.agentName || defaultName;
+    },
+    onBeforeSessionCreate: armManualSelection,
+    onSessionCreated: handleControllerSessionCreated,
+    onSessionActivated: handleControllerSessionActivated,
+  });
 
-      setInputValue('');
-    } catch (error) {
-      logger.error('Failed to send message:', error);
-      addNotification({
-        type: 'error',
-        title: 'Message Send Failed',
-        message: 'Unable to send your message. Please check your connection and try again.',
-        duration: 6000
-      });
-    } finally {
-      reset();
-      setIsSubmitting(false);
-      setIsLoading(false);
-    }
-  };
+  const isLoading = isSending;
+  const handleAddFiles = handleFileAdd;
+  const handleRemoveFile = handleFileRemove;
 
   const handleConnect = async () => {
     try {
diff --git a/src/renderer/pages/SettingsPage.tsx b/src/renderer/pages/SettingsPage.tsx
index 7cac55e..2d6b18a 100644
--- a/src/renderer/pages/SettingsPage.tsx
+++ b/src/renderer/pages/SettingsPage.tsx
@@ -164,9 +164,15 @@ const SettingsPage: React.FC<SettingsPageProps> = () => {
 
   if (isLoading) {
     return (
-      <div className='min-h-screen bg-background'>
-        <div className='container mx-auto px-6 py-8 max-w-6xl'>
-          <div className='flex items-center justify-center min-h-[400px]'>
+      <div
+        data-testid='settings-page-root'
+        className='h-full min-h-full overflow-y-auto bg-background'
+      >
+        <div
+          data-testid='settings-page-container'
+          className='container mx-auto max-w-6xl px-6 pt-8 pb-16 sm:pb-20'
+        >
+          <div className='flex min-h-[400px] items-center justify-center'>
             <Typography variant='body1' color='muted'>
               Loading configuration...
             </Typography>
@@ -177,8 +183,14 @@ const SettingsPage: React.FC<SettingsPageProps> = () => {
   }
 
   return (
-    <div className='min-h-screen bg-background'>
-      <div className='container mx-auto px-6 py-8 max-w-3xl'>
+    <div
+      data-testid='settings-page-root'
+      className='h-full min-h-full overflow-y-auto bg-background'
+    >
+      <div
+        data-testid='settings-page-container'
+        className='container mx-auto max-w-3xl px-6 pt-8 pb-16 sm:pb-20'
+      >
         <div className='mb-8'>
           <Typography variant='h1' className='text-3xl font-bold mb-2' noMargin>
             Settings
diff --git a/src/renderer/providers/WalletInitProvider.tsx b/src/renderer/providers/WalletInitProvider.tsx
index 5ba3e32..f728cf2 100644
--- a/src/renderer/providers/WalletInitProvider.tsx
+++ b/src/renderer/providers/WalletInitProvider.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect } from 'react';
 import { useWalletStore } from '../stores/walletStore';
 import { InscriberBuilder } from '@hashgraphonline/standards-agent-kit';
+import useWalletOperationalMode from '../hooks/useWalletOperationalMode';
 type DAppSigner = {
   getAccountId(): { toString(): string };
   [key: string]: unknown;
@@ -14,6 +15,7 @@ export const WalletInitProvider: React.FC<Props> = ({ children }) => {
   const init = useWalletStore((s) => s.init);
   const service = useWalletStore((s) => s.service);
   const initializedRef = React.useRef(false);
+  useWalletOperationalMode();
 
   useEffect(() => {
     if (initializedRef.current) {
diff --git a/src/renderer/services/wallet-bridge-renderer.ts b/src/renderer/services/wallet-bridge-renderer.ts
index ec45266..59eac46 100644
--- a/src/renderer/services/wallet-bridge-renderer.ts
+++ b/src/renderer/services/wallet-bridge-renderer.ts
@@ -1,4 +1,7 @@
-import { InscriptionSDK, type StartInscriptionRequest } from '@kiloscribe/inscription-sdk';
+import {
+  InscriptionSDK,
+  type StartInscriptionRequest,
+} from '@kiloscribe/inscription-sdk';
 import { walletService } from './walletService';
 
 function registerWalletBridgeRenderer(): void {
@@ -21,14 +24,15 @@ function registerWalletBridgeRenderer(): void {
           connectionMode: 'websocket',
         });
         const res = await sdk.startInscription(request);
-        const anyRes = res as any;
+        const anyRes = res;
         window.electron.send(`wallet:inscribe-start:reply:${requestId}`, {
           success: true,
           data: {
             transactionBytes: anyRes?.transactionBytes,
-            tx_id: anyRes?.tx_id || anyRes?.jobId || anyRes?.job_id,
-            topic_id: anyRes?.topic_id || anyRes?.jsonTopicId || anyRes?.topicId,
-            jsonTopicId: anyRes?.jsonTopicId || anyRes?.topicId || anyRes?.topic_id,
+            tx_id: anyRes?.tx_id || anyRes?.id,
+            topic_id:
+              anyRes?.topic_id || anyRes?.jsonTopicId || anyRes?.topicId,
+            jsonTopicId: anyRes?.jsonTopicId,
             status: anyRes?.status,
             completed: anyRes?.completed,
           },
@@ -44,4 +48,3 @@ function registerWalletBridgeRenderer(): void {
 }
 
 registerWalletBridgeRenderer();
-
diff --git a/src/renderer/stores/walletStore.ts b/src/renderer/stores/walletStore.ts
index e31990c..95bbfc3 100644
--- a/src/renderer/stores/walletStore.ts
+++ b/src/renderer/stores/walletStore.ts
@@ -8,7 +8,6 @@ import { telemetry } from '../services/telemetryService';
 
 const DEFAULT_WC_PROJECT_ID = '610b20415692c366e3bf97b8208cada5';
 
-
 export interface WalletState {
   isConnected: boolean;
   isInitializing: boolean;
@@ -84,8 +83,7 @@ async function buildMetadata(): Promise<SignClientTypes.Metadata> {
         icons: [wc.appIcon || DEFAULT_METADATA.icons[0]],
       };
     }
-  } catch {
-  }
+  } catch {}
   return _meta;
 }
 
@@ -113,8 +111,7 @@ async function applyInfoToState(
       accountId: info.accountId,
       network: info.network.toString() === 'mainnet' ? 'mainnet' : 'testnet',
     });
-  } catch {
-  }
+  } catch {}
 }
 
 export const useWalletStore = create<WalletState>((set, get) => ({
@@ -134,8 +131,7 @@ export const useWalletStore = create<WalletState>((set, get) => ({
         const env = await window.electron.getEnvironmentConfig?.();
         const maybe = String(env?.walletConnect?.projectId || '').trim();
         if (maybe) pid = maybe;
-      } catch {
-      }
+      } catch {}
       set({ projectId: pid });
 
       await get().initAccount();
@@ -159,8 +155,7 @@ export const useWalletStore = create<WalletState>((set, get) => ({
 
       try {
         await walletService.getSDK().init(projectId, _meta, _ledgerId);
-      } catch {
-      }
+      } catch {}
 
       const info = walletService.getAccountInfo();
       if (info?.accountId) {
@@ -228,8 +223,7 @@ export const useWalletStore = create<WalletState>((set, get) => ({
       telemetry.emit('wallet_disconnect', {});
       try {
         await window.electron.setCurrentWallet(null);
-      } catch {
-      }
+      } catch {}
     } catch (e) {
       const msg = e instanceof Error ? e.message : String(e);
       set({ error: msg });
@@ -240,8 +234,7 @@ export const useWalletStore = create<WalletState>((set, get) => ({
     try {
       const bal = await walletService.getBalance();
       set({ balance: bal });
-    } catch (_e) {
-    }
+    } catch (_e) {}
   },
 
   executeFromBytes: async (base64: string) => {
diff --git a/src/renderer/styles/index.css b/src/renderer/styles/index.css
index bdd1c47..efaed33 100644
--- a/src/renderer/styles/index.css
+++ b/src/renderer/styles/index.css
@@ -747,6 +747,70 @@ p {
     touch-action: manipulation;
   }
 
+  /* Checkered background pattern for image viewers */
+  .bg-checkered {
+    background-color: #f8f9fa;
+    background-image:
+      linear-gradient(45deg, #e9ecef 25%, transparent 25%),
+      linear-gradient(-45deg, #e9ecef 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, #e9ecef 75%),
+      linear-gradient(-45deg, transparent 75%, #e9ecef 75%);
+    background-size: 20px 20px;
+    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
+  }
+
+  .dark .bg-checkered {
+    background-color: #1a1a1a;
+    background-image:
+      linear-gradient(45deg, #2a2a2a 25%, transparent 25%),
+      linear-gradient(-45deg, #2a2a2a 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, #2a2a2a 75%),
+      linear-gradient(-45deg, transparent 75%, #2a2a2a 75%);
+  }
+
+  /* Override undefined Shell Window backgrounds to be solid */
+  .bg-hol-surface {
+    background-color: white;
+  }
+
+  .bg-hol-surface-alt {
+    background-color: white;
+  }
+
+  .dark .bg-hol-surface {
+    background-color: #1f2937;
+  }
+
+  .dark .bg-hol-surface-alt {
+    background-color: #1f2937;
+  }
+
+  /* HOL Design System Window Controls */
+  .bg-hol-primary {
+    background-color: #3b82f6 !important;
+  }
+
+  .bg-hol-primary-light {
+    background-color: #60a5fa !important;
+  }
+
+  .text-hol-text-inverse {
+    color: white !important;
+  }
+
+  .border-hol-border {
+    border-color: #e5e7eb !important;
+  }
+
+  .border-hol-highlight {
+    border-color: #3b82f6 !important;
+  }
+
+  /* Ensure window title bar is visible */
+  .bg-gradient-to-r.from-hol-primary.to-hol-primary-light {
+    background: linear-gradient(to right, #3b82f6, #60a5fa) !important;
+  }
+
   /* Animation utilities */
   .animate-fade-in {
     animation: fadeIn 0.2s ease-in forwards;
diff --git a/src/renderer/types/electron.d.ts b/src/renderer/types/electron.d.ts
index 0ca2feb..2007f4f 100644
--- a/src/renderer/types/electron.d.ts
+++ b/src/renderer/types/electron.d.ts
@@ -54,6 +54,23 @@ interface AgentResponse<T = unknown> {
   error?: string;
 }
 
+export interface BrowserState {
+  requestedUrl: string;
+  currentUrl: string;
+  title: string;
+  isLoading: boolean;
+  canGoBack: boolean;
+  canGoForward: boolean;
+  lastError: string | null;
+}
+
+export interface BrowserBounds {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
 type ElectronIPCData = string | number | boolean | null | undefined | Record<string, unknown> | unknown[];
 
 export interface CredentialAPI {
@@ -181,6 +198,21 @@ declare global {
       on: (channel: string, callback: (...args: ElectronIPCData[]) => void) => () => void
       removeListener: (channel: string, callback: (...args: ElectronIPCData[]) => void) => void
       openExternal: (url: string) => Promise<void>
+      getPaths: () => Promise<{ moonscapePreload?: string }>
+      paths?: { moonscapePreload?: string }
+      browser: {
+        navigate: (url: string) => Promise<void>
+        reload: () => Promise<void>
+        goBack: () => Promise<void>
+        goForward: () => Promise<void>
+        setBounds: (bounds: BrowserBounds) => Promise<void>
+        getState: () => Promise<BrowserState>
+        executeJavaScript: <T = unknown>(script: string) => Promise<T>
+        openDevTools: () => Promise<void>
+        attach: () => Promise<void>
+        detach: () => Promise<void>
+        onState: (listener: (state: BrowserState) => void) => () => void
+      }
     }
     
     api: {
diff --git a/src/renderer/utils/logoMapper.ts b/src/renderer/utils/logoMapper.ts
new file mode 100644
index 0000000..650bf20
--- /dev/null
+++ b/src/renderer/utils/logoMapper.ts
@@ -0,0 +1,85 @@
+import BonzoLogo from '../assets/images/logos/dao/Bonzo.png';
+import BonzoDarkLogo from '../assets/images/logos/dao/Bonzo_Dark.png';
+import BuidlerLabsLogo from '../assets/images/logos/dao/Buidler Labs.png';
+import HGraphLogo from '../assets/images/logos/dao/HGRAPH.png';
+import HGraphDarkLogo from '../assets/images/logos/dao/HGraph_Dark.png';
+import HashgateLogo from '../assets/images/logos/dao/Hashgate.png';
+import HashpackLogo from '../assets/images/logos/dao/Hashpack.png';
+import KiloscribeLogo from '../assets/images/logos/dao/Kiloscribe.png';
+import KiloscribeDarkLogo from '../assets/images/logos/dao/Kiloscribe_Dark.png';
+import LaunchbadgeLogo from '../assets/images/logos/dao/Launchbadge.png';
+import NeuronLogo from '../assets/images/logos/dao/Neuron.png';
+import NeuronDarkLogo from '../assets/images/logos/dao/Neuron_Dark.png';
+import SentXLogo from '../assets/images/logos/dao/SentX.png';
+import SentXDarkLogo from '../assets/images/logos/dao/SentX_Dark.png';
+import TurtlemoonLogo from '../assets/images/logos/dao/Turtlemoon.png';
+
+export interface BookmarkLogo {
+  light: string;
+  dark: string;
+}
+
+export const LOGO_MAP: Record<string, BookmarkLogo> = {
+  'kiloscribe': {
+    light: KiloscribeLogo,
+    dark: KiloscribeDarkLogo,
+  },
+  'saucerswap': {
+    light: '',
+    dark: '',
+  },
+  'bonzo': {
+    light: BonzoLogo,
+    dark: BonzoDarkLogo,
+  },
+  'hgraph': {
+    light: HGraphLogo,
+    dark: HGraphDarkLogo,
+  },
+  'sentx': {
+    light: SentXLogo,
+    dark: SentXDarkLogo,
+  },
+  'hashpack': {
+    light: HashpackLogo,
+    dark: HashpackLogo,
+  },
+  'hashgate': {
+    light: HashgateLogo,
+    dark: HashgateLogo,
+  },
+  'neuron': {
+    light: NeuronLogo,
+    dark: NeuronDarkLogo,
+  },
+  'launchbadge': {
+    light: LaunchbadgeLogo,
+    dark: LaunchbadgeLogo,
+  },
+  'turtlemoon': {
+    light: TurtlemoonLogo,
+    dark: TurtlemoonLogo,
+  },
+  'buidlerlabs': {
+    light: BuidlerLabsLogo,
+    dark: BuidlerLabsLogo,
+  },
+};
+
+export const getLogoForUrl = (url: string): BookmarkLogo | null => {
+  const domain = url.toLowerCase();
+
+  if (domain.includes('kiloscribe')) return LOGO_MAP.kiloscribe;
+  if (domain.includes('saucerswap')) return LOGO_MAP.saucerswap;
+  if (domain.includes('bonzo')) return LOGO_MAP.bonzo;
+  if (domain.includes('hgraph')) return LOGO_MAP.hgraph;
+  if (domain.includes('sentx')) return LOGO_MAP.sentx;
+  if (domain.includes('hashpack')) return LOGO_MAP.hashpack;
+  if (domain.includes('hashgate')) return LOGO_MAP.hashgate;
+  if (domain.includes('neuron')) return LOGO_MAP.neuron;
+  if (domain.includes('launchbadge')) return LOGO_MAP.launchbadge;
+  if (domain.includes('turtlemoon')) return LOGO_MAP.turtlemoon;
+  if (domain.includes('buidlerlabs')) return LOGO_MAP.buidlerlabs;
+
+  return null;
+};
\ No newline at end of file
diff --git a/src/renderer/utils/markdownProcessor.ts b/src/renderer/utils/markdownProcessor.ts
index 15fc27e..dd2b443 100644
--- a/src/renderer/utils/markdownProcessor.ts
+++ b/src/renderer/utils/markdownProcessor.ts
@@ -39,7 +39,7 @@ export const processMarkdown = (text: string): string => {
   });
 
   processed = processed.replace(/`([^`]+)`/g, (_, code) => {
-    return `<code class="inline-code px-1.5 py-0.5 bg-gray-100 dark:bg-gray-800 rounded font-mono text-[0.85em]">${escapeHtml(
+    return `<code class="inline-code px-1.5 py-0.5 bg-gray-100 dark:bg-gray-800 rounded font-mono text-[0.85em] text-brand-ink dark:text-white">${escapeHtml(
       code
     )}</code>`;
   });
diff --git a/src/types/electron-webview.d.ts b/src/types/electron-webview.d.ts
new file mode 100644
index 0000000..30cfd19
--- /dev/null
+++ b/src/types/electron-webview.d.ts
@@ -0,0 +1,18 @@
+import type { DetailedHTMLProps, HTMLAttributes } from 'react';
+import type { WebviewTag } from 'electron';
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      webview: DetailedHTMLProps<HTMLAttributes<WebviewTag>, WebviewTag> & {
+        allowpopups?: boolean | 'true';
+        partition?: string;
+        preload?: string;
+        src?: string;
+        useragent?: string;
+      };
+    }
+  }
+}
+
+export {};
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 6c9b41b..c03a62a 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,58 +1,91 @@
 export default {
+  darkMode: 'class',
   content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
   theme: {
     extend: {
       colors: {
-        'hgo-purple': '#a679f0',
-        'hgo-blue': '#5599fe',
-        'hgo-green': '#48df7b',
-        'hgo-dark': '#3f4174',
-        'hgo-white': '#ffffff',
-        'hgo-black': '#0a0a0a',
-
-        'hgo-blue-dark': '#4488ee',
-        'hgo-blue-darker': '#4488ed',
-        'hgo-purple-light': '#b56cff',
-        'hgo-green-light': '#5eef81',
-        'hgo-green-darker': '#48df7b',
-        'purple-variant': {
-          '50': '#f3e5f5',
-          '100': '#e1bee7',
-          '200': '#ce93d8',
-          '300': '#ba68c8',
-          '400': '#ab47bc',
-          '500': '#a679f0',
-          '600': '#8e24aa',
-          '700': '#7b1fa2',
-          '800': '#6a1b9a',
-          '900': '#4a148c',
+        // Existing HOL colors
+        'hol-wallpaper-start': '#dae5ff',
+        'hol-wallpaper-mid': '#eef2ff',
+        'hol-wallpaper-end': '#f9fbff',
+        'hol-panel': '#ffffff',
+        'hol-panel-translucent': 'rgba(255,255,255,0.82)',
+        'hol-border-light': '#ffffff',
+        'hol-border': '#dbe4ff',
+        'hol-border-strong': '#9fb4e0',
+        'hol-text-primary': '#1a2140',
+        'hol-text-secondary': '#4a5776',
+        'hol-text-muted': '#6a799a',
+        'hol-text-inverse': '#ffffff',
+        'hol-primary': '#2972ff',
+        'hol-primary-light': '#79a8ff',
+        'hol-secondary': '#3ed1bd',
+        'hol-highlight': '#ffc857',
+        'hol-glass': 'rgba(255,255,255,0.65)',
+        'hol-glass-strong': 'rgba(255,255,255,0.9)',
+        'hol-surface-light': '#f4f6ff',
+        'hol-surface-dark': '#060b1d',
+        'hol-glass-dark': 'rgba(13, 20, 40, 0.72)',
+        'hol-gold': '#ffd770',
+        'hol-magenta': '#ff6f91',
+        'brand-blue': '#5599fe',
+        'brand-purple': '#b56cff',
+        'brand-green': '#48df7b',
+        'brand-ink': '#0d1326',
+        // Shadcn design tokens for moonscape compatibility
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
         },
-
-        'blue-variant': {
-          '50': '#eff6ff',
-          '100': '#dbeafe',
-          '200': '#bfdbfe',
-          '300': '#93c5fd',
-          '400': '#60a5fa',
-          '500': '#5599fe',
-          '600': '#4488ee',
-          '700': '#1d4ed8',
-          '800': '#1e40af',
-          '900': '#1e3a8a',
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
         },
-
-        'green-variant': {
-          '50': '#e8f5e9',
-          '100': '#c8e6c9',
-          '200': '#a5d6a7',
-          '300': '#81c784',
-          '400': '#66bb6a',
-          '500': '#48df7b',
-          '600': '#43a047',
-          '700': '#388e3c',
-          '800': '#2e7d32',
-          '900': '#1b5e20',
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
         },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+      },
+      boxShadow: {
+        'desktop-window': '0 28px 60px rgba(26, 33, 64, 0.18)',
+        'desktop-icon': '0 16px 30px rgba(41, 114, 255, 0.18)',
+        'desktop-dock': '0 18px 45px rgba(20, 32, 68, 0.18)',
+        // Classic 90s raised/sunken effects using HOL colors
+        'raised': 'inset 1px 1px 0 rgba(255, 255, 255, 0.8), inset -1px -1px 0 rgba(155, 180, 224, 0.6)',
+        'sunken': 'inset -1px -1px 0 rgba(255, 255, 255, 0.8), inset 1px 1px 0 rgba(155, 180, 224, 0.6)',
+        'classic-button': '1px 1px 0 rgba(255, 255, 255, 0.8), -1px -1px 0 rgba(155, 180, 224, 0.6)',
+        'classic-pressed': 'inset 1px 1px 2px rgba(155, 180, 224, 0.4)',
+      },
+      backdropBlur: {
+        desktop: '20px',
+      },
+      borderRadius: {
+        'desktop-xl': '26px',
+        'desktop-lg': '18px',
+      },
+      fontSize: {
+        'desktop-subheading': ['15px', { lineHeight: '22px', letterSpacing: '0.26em' }],
       },
     },
   },
diff --git a/tsconfig.electron.json b/tsconfig.electron.json
index bdc4d5e..4a4c740 100644
--- a/tsconfig.electron.json
+++ b/tsconfig.electron.json
@@ -11,6 +11,7 @@
     "outDir": "dist",
     "moduleResolution": "node",
     "resolveJsonModule": true,
+    "types": ["node"]
   },
-  "include": ["src/main/**/*", "src/preload/**/*", "src/shared/**/*", "forge.config.ts", "vite.*.config.ts", "forge.env.d.ts"]
+  "include": ["src/main/**/*", "src/preload/**/*", "src/shared/**/*", "src/main/types/**/*", "forge.config.ts", "vite.*.config.ts", "forge.env.d.ts"]
 }
\ No newline at end of file
diff --git a/vite.main.config.mjs b/vite.main.config.mjs
index aa92052..b2a90f2 100644
--- a/vite.main.config.mjs
+++ b/vite.main.config.mjs
@@ -1,4 +1,7 @@
 import { defineConfig } from 'vite';
+import { builtinModules } from 'node:module';
+import wasm from 'vite-plugin-wasm';
+import topLevelAwait from 'vite-plugin-top-level-await';
 import { fileURLToPath } from 'node:url';
 import { dirname, resolve } from 'node:path';
 
@@ -6,6 +9,10 @@ const __filename = fileURLToPath(import.meta.url);
 const currentDir = dirname(__filename);
 
 export default defineConfig({
+  plugins: [
+    wasm(),
+    topLevelAwait(),
+  ],
   build: {
     lib: {
       entry: resolve(currentDir, 'src/main/index.ts'),
@@ -16,21 +23,30 @@ export default defineConfig({
       external: [
         'electron',
         'better-sqlite3',
-        'tiktoken',
-        '@hashgraph/sdk',
+        ...builtinModules,
+        ...builtinModules.map((m) => `node:${m}`),
       ],
       output: {
-        preserveModules: true,
+        preserveModules: false,
       },
     },
     outDir: '.vite/build',
   },
+  ssr: {
+    noExternal: [
+      '@hashgraph/sdk',
+      'js-tiktoken',
+    ],
+  },
   resolve: {
     conditions: ['node'],
     extensions: ['.ts', '.js', '.mjs', '.json'],
     alias: {
       pino: resolve(currentDir, './src/lib/pino-stub.ts'),
       'thread-stream': resolve(currentDir, './src/lib/thread-stream-stub.ts'),
+      tiktoken: resolve(currentDir, './src/lib/tiktoken-compat.ts'),
+      'tiktoken/lite': resolve(currentDir, './src/lib/tiktoken-compat.ts'),
+      'tiktoken/load': resolve(currentDir, './src/lib/tiktoken-compat.ts'),
     },
   },
 });
diff --git a/vite.preload.config.mjs b/vite.preload.config.mjs
index 7eff871..ae9bb1c 100644
--- a/vite.preload.config.mjs
+++ b/vite.preload.config.mjs
@@ -5,23 +5,27 @@ import { dirname, resolve } from 'node:path';
 const __filename = fileURLToPath(import.meta.url);
 const currentDir = dirname(__filename);
 
+const inputEntries = {
+  preload: resolve(currentDir, './src/preload/index.ts'),
+  'moonscape-preload': resolve(currentDir, './src/preload/moonscape-preload.ts'),
+};
+
+const inlineDynamicImports = Object.keys(inputEntries).length === 1;
+
 export default defineConfig({
   build: {
-    lib: {
-      entry: 'src/preload/index.ts',
-      formats: ['cjs'],
-      fileName: () => 'preload.cjs',
-    },
     rollupOptions: {
+      input: inputEntries,
       external: ['electron'],
       output: {
         format: 'cjs',
-        inlineDynamicImports: true,
-        entryFileNames: 'preload.cjs',
+        inlineDynamicImports,
+        entryFileNames: '[name].cjs',
         dir: '.vite/build',
       },
     },
     outDir: '.vite/build',
+    emptyOutDir: false,
   },
   resolve: {
     alias: {
diff --git a/vite.renderer.config.mjs b/vite.renderer.config.mjs
index c304d4d..b31cfce 100644
--- a/vite.renderer.config.mjs
+++ b/vite.renderer.config.mjs
@@ -49,6 +49,7 @@ export default defineConfig({
       pino: resolve(currentDir, './src/lib/pino-stub.ts'),
       'thread-stream': resolve(currentDir, './src/lib/thread-stream-stub.ts'),
       'fs/promises': resolve(currentDir, './src/lib/fs-promises-stub.ts'),
+      tiktoken: resolve(currentDir, './src/lib/tiktoken-compat.ts'),
     },
     extensions: ['.ts', '.tsx', '.js', '.jsx', '.mjs', '.json'],
   },