feat: unified message architecture with provider adapters and session store

- Add provider adapter layer (server/providers/) with registry pattern
    - Claude, Cursor, Codex, Gemini adapters normalize native formats to NormalizedMessage
    - Shared types.js defines ProviderAdapter interface and message kinds
    - Registry enables polymorphic provider lookup

  - Add unified REST endpoint: GET /api/sessions/:id/messages?provider=...
    - Replaces four provider-specific message endpoints with one
    - Delegates to provider adapters via registry

  - Add frontend session-keyed store (useSessionStore)
    - Per-session Map with serverMessages/realtimeMessages/merged
    - Dedup by ID, stale threshold for re-fetch, background session accumulation
    - No localStorage for messages — backend JSONL is source of truth

  - Add normalizedToChatMessages converter (useChatMessages)
    - Converts NormalizedMessage[] to existing ChatMessage[] UI format

  - Wire unified store into ChatInterface, useChatSessionState, useChatRealtimeHandlers
    - Session switch uses store cache for instant render
    - Background WebSocket messages routed to correct session slot

CHANGELOG.md

@@ -3,38 +3,6 @@
 All notable changes to CloudCLI UI will be documented in this file.
 
 
-## [1.26.3](https://github.com/siteboon/claudecodeui/compare/v1.26.2...v1.26.3) (2026-03-22)
-
-## [1.26.2](https://github.com/siteboon/claudecodeui/compare/v1.26.0...v1.26.2) (2026-03-21)
-
-### Bug Fixes
-
-* change SW cache mechanism ([17d6ec5](https://github.com/siteboon/claudecodeui/commit/17d6ec54af18d333c8b04d2ffc64793e688d996e))
-* claude auth changes and adding copy on mobile ([a41d2c7](https://github.com/siteboon/claudecodeui/commit/a41d2c713e87d56f23d5884585b4bb43c43a250a))
-
-## [1.26.0](https://github.com/siteboon/claudecodeui/compare/v1.25.2...v1.26.0) (2026-03-20)
-
-### New Features
-
-* add German (Deutsch) language support ([#525](https://github.com/siteboon/claudecodeui/issues/525)) ([a7299c6](https://github.com/siteboon/claudecodeui/commit/a7299c68237908c752d504c2e8eea91570a30203))
-* add WebSocket proxy for plugin backends ([#553](https://github.com/siteboon/claudecodeui/issues/553)) ([88c60b7](https://github.com/siteboon/claudecodeui/commit/88c60b70b031798d51ce26c8f080a0f64d824b05))
-* Browser autofill support for login form ([#521](https://github.com/siteboon/claudecodeui/issues/521)) ([72ff134](https://github.com/siteboon/claudecodeui/commit/72ff134b315b7a1d602f3cc7dd60d47c1c1c34af))
-* git panel redesign ([#535](https://github.com/siteboon/claudecodeui/issues/535)) ([adb3a06](https://github.com/siteboon/claudecodeui/commit/adb3a06d7e66a6d2dbcdfb501615e617178314af))
-* introduce notification system and claude notifications ([#450](https://github.com/siteboon/claudecodeui/issues/450)) ([45e71a0](https://github.com/siteboon/claudecodeui/commit/45e71a0e73b368309544165e4dcf8b7fd014e8dd))
-* **refactor:** move plugins to typescript ([#557](https://github.com/siteboon/claudecodeui/issues/557)) ([612390d](https://github.com/siteboon/claudecodeui/commit/612390db536417e2f68c501329bfccf5c6795e45))
-* unified message architecture with provider adapters and session store ([#558](https://github.com/siteboon/claudecodeui/issues/558)) ([a4632dc](https://github.com/siteboon/claudecodeui/commit/a4632dc4cec228a8febb7c5bae4807c358963678))
-
-### Bug Fixes
-
-* detect Claude auth from settings env ([#527](https://github.com/siteboon/claudecodeui/issues/527)) ([95bcee0](https://github.com/siteboon/claudecodeui/commit/95bcee0ec459f186d52aeffe100ac1a024e92909))
-* remove /exit command from claude login flow during onboarding ([#552](https://github.com/siteboon/claudecodeui/issues/552)) ([4de8b78](https://github.com/siteboon/claudecodeui/commit/4de8b78c6db5d8c2c402afce0f0b4cc16d5b6496))
-
-### Documentation
-
-* add German language link to all README files ([#534](https://github.com/siteboon/claudecodeui/issues/534)) ([1d31c3e](https://github.com/siteboon/claudecodeui/commit/1d31c3ec8309b433a041f3099955addc8c136c35))
-* **readme:** hotfix and improve for README.jp.md ([#550](https://github.com/siteboon/claudecodeui/issues/550)) ([7413c2c](https://github.com/siteboon/claudecodeui/commit/7413c2c78422c308ac949e6a83c3e9216b24b649))
-* **README:** update translations with CloudCLI branding and feature restructuring ([#544](https://github.com/siteboon/claudecodeui/issues/544)) ([14aef73](https://github.com/siteboon/claudecodeui/commit/14aef73cc6085fbb519fe64aea7cac80b7d51285))
-
 ## [1.25.2](https://github.com/siteboon/claudecodeui/compare/v1.25.0...v1.25.2) (2026-03-11)
 
 ### New Features

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@siteboon/claude-code-ui",
-  "version": "1.26.3",
+  "version": "1.25.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@siteboon/claude-code-ui",
-      "version": "1.26.3",
+      "version": "1.25.2",
       "hasInstallScript": true,
       "license": "GPL-3.0",
       "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@siteboon/claude-code-ui",
-  "version": "1.26.3",
+  "version": "1.25.2",
   "description": "A web-based UI for Claude Code CLI",
   "type": "module",
   "main": "server/index.js",

public/sw.js

@@ -1,8 +1,8 @@
 // Service Worker for Claude Code UI PWA
-// Cache only manifest (needed for PWA install). HTML and JS are never pre-cached
+const CACHE_NAME = 'claude-ui-v1';
-// so a rebuild + refresh always picks up the latest assets.
-const CACHE_NAME = 'claude-ui-v2';
 const urlsToCache = [
+  '/',
+  '/index.html',
   '/manifest.json'
 ];
 
@@ -10,63 +10,44 @@ const urlsToCache = [
 self.addEventListener('install', event => {
   event.waitUntil(
     caches.open(CACHE_NAME)
-      .then(cache => cache.addAll(urlsToCache))
+      .then(cache => {
+        return cache.addAll(urlsToCache);
+      })
   );
   self.skipWaiting();
 });
 
-// Fetch event — network-first for everything except hashed assets
+// Fetch event
 self.addEventListener('fetch', event => {
-  const url = event.request.url;
+  // Never cache API requests or WebSocket upgrades
-
+  if (event.request.url.includes('/api/') || event.request.url.includes('/ws')) {
-  // Never intercept API requests or WebSocket upgrades
-  if (url.includes('/api/') || url.includes('/ws')) {
     return;
   }
 
-  // Navigation requests (HTML) — always go to network, no caching
-  if (event.request.mode === 'navigate') {
-    event.respondWith(
-      fetch(event.request).catch(() => caches.match('/manifest.json').then(() =>
-        new Response('<h1>Offline</h1><p>Please check your connection.</p>', {
-          headers: { 'Content-Type': 'text/html' }
-        })
-      ))
-    );
-    return;
-  }
-
-  // Hashed assets (JS/CSS in /assets/) — cache-first since filenames change per build
-  if (url.includes('/assets/')) {
-    event.respondWith(
-      caches.match(event.request).then(cached => {
-        if (cached) return cached;
-        return fetch(event.request).then(response => {
-          const clone = response.clone();
-          caches.open(CACHE_NAME).then(cache => cache.put(event.request, clone));
-          return response;
-        });
-      })
-    );
-    return;
-  }
-
-  // Everything else — network-first
   event.respondWith(
-    fetch(event.request).catch(() => caches.match(event.request))
+    caches.match(event.request)
+      .then(response => {
+        if (response) {
+          return response;
+        }
+        return fetch(event.request);
+      }
+    )
   );
 });
 
-// Activate event — purge old caches
+// Activate event
 self.addEventListener('activate', event => {
   event.waitUntil(
-    caches.keys().then(cacheNames =>
+    caches.keys().then(cacheNames => {
-      Promise.all(
+      return Promise.all(
-        cacheNames
+        cacheNames.map(cacheName => {
-          .filter(name => name !== CACHE_NAME)
+          if (cacheName !== CACHE_NAME) {
-          .map(name => caches.delete(name))
+            return caches.delete(cacheName);
-      )
+          }
-    )
+        })
+      );
+    })
   );
   self.clients.claim();
 });

src/components/provider-auth/view/ProviderLoginModal.tsx

@@ -24,7 +24,7 @@ type ProviderLoginModalProps = {
 const getProviderCommand = ({
   provider,
   customCommand,
-  isAuthenticated: _isAuthenticated,
+  isAuthenticated,
 }: {
   provider: CliProvider;
   customCommand?: string;
@@ -35,7 +35,10 @@ const getProviderCommand = ({
   }
 
   if (provider === 'claude') {
-    return 'claude --dangerously-skip-permissions /login';
+    if (isAuthenticated) {
+      return 'claude setup-token --dangerously-skip-permissions';
+    }
+    return 'claude /login --dangerously-skip-permissions';
   }
 
   if (provider === 'cursor') {

src/components/shell/view/Shell.tsx

@@ -207,23 +207,15 @@ export default function Shell({
 
   if (minimal) {
     return (
-      <>
+      <ShellMinimalView
-        <ShellMinimalView
+        terminalContainerRef={terminalContainerRef}
-          terminalContainerRef={terminalContainerRef}
+        authUrl={authUrl}
-          authUrl={authUrl}
+        authUrlVersion={authUrlVersion}
-          authUrlVersion={authUrlVersion}
+        initialCommand={initialCommand}
-          initialCommand={initialCommand}
+        isConnected={isConnected}
-          isConnected={isConnected}
+        openAuthUrlInBrowser={openAuthUrlInBrowser}
-          openAuthUrlInBrowser={openAuthUrlInBrowser}
+        copyAuthUrlToClipboard={copyAuthUrlToClipboard}
-          copyAuthUrlToClipboard={copyAuthUrlToClipboard}
+      />
-        />
-        <TerminalShortcutsPanel
-          wsRef={wsRef}
-          terminalRef={terminalRef}
-          isConnected={isConnected}
-          bottomOffset="bottom-0"
-        />
-      </>
     );
   }
 

src/components/shell/view/subcomponents/TerminalShortcutsPanel.tsx

@@ -1,65 +1,61 @@
-import { type MutableRefObject, useCallback, useState } from 'react';
+import { type MutableRefObject, useState, useCallback, useEffect, useRef } from 'react';
 import {
-  Clipboard,
+  ChevronLeft,
+  ChevronRight,
+  Keyboard,
   ArrowDownToLine,
-  ArrowUp,
-  ArrowDown,
-  ArrowLeft,
-  ArrowRight,
 } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import type { Terminal } from '@xterm/xterm';
 import { sendSocketMessage } from '../../utils/socket';
 
-type Shortcut =
+const SHORTCUTS = [
-  | { type: 'key'; id: string; label: string; sequence: string }
+  { id: 'escape', labelKey: 'escape', sequence: '\x1b', hint: 'Esc' },
-  | { type: 'modifier'; id: string; label: string; modifier: 'ctrl' | 'alt' }
+  { id: 'tab', labelKey: 'tab', sequence: '\t', hint: 'Tab' },
-  | { type: 'arrow'; id: string; sequence: string; icon: 'up' | 'down' | 'left' | 'right' };
+  { id: 'shift-tab', labelKey: 'shiftTab', sequence: '\x1b[Z', hint: '\u21e7Tab' },
-
+  { id: 'arrow-up', labelKey: 'arrowUp', sequence: '\x1b[A', hint: '\u2191' },
-const MOBILE_KEYS: Shortcut[] = [
+  { id: 'arrow-down', labelKey: 'arrowDown', sequence: '\x1b[B', hint: '\u2193' },
-  { type: 'key', id: 'esc', label: 'Esc', sequence: '\x1b' },
+] as const;
-  { type: 'key', id: 'tab', label: 'Tab', sequence: '\t' },
-  { type: 'key', id: 'shift-tab', label: '\u21e7Tab', sequence: '\x1b[Z' },
-  { type: 'modifier', id: 'ctrl', label: 'CTRL', modifier: 'ctrl' },
-  { type: 'modifier', id: 'alt', label: 'ALT', modifier: 'alt' },
-  { type: 'arrow', id: 'arrow-up', sequence: '\x1b[A', icon: 'up' },
-  { type: 'arrow', id: 'arrow-down', sequence: '\x1b[B', icon: 'down' },
-  { type: 'arrow', id: 'arrow-left', sequence: '\x1b[D', icon: 'left' },
-  { type: 'arrow', id: 'arrow-right', sequence: '\x1b[C', icon: 'right' },
-];
-
-const ARROW_ICONS = {
-  up: ArrowUp,
-  down: ArrowDown,
-  left: ArrowLeft,
-  right: ArrowRight,
-} as const;
 
 type TerminalShortcutsPanelProps = {
   wsRef: MutableRefObject<WebSocket | null>;
   terminalRef: MutableRefObject<Terminal | null>;
   isConnected: boolean;
-  bottomOffset?: string;
 };
 
 const preventFocusSteal = (e: React.PointerEvent) => e.preventDefault();
 
-const KEY_BTN =
-  'shrink-0 rounded-md border border-gray-600 bg-gray-700 px-2.5 py-1.5 text-xs font-medium text-gray-100 transition-colors select-none active:bg-blue-600 active:text-white active:border-blue-600 disabled:cursor-not-allowed disabled:opacity-40';
-const KEY_BTN_ACTIVE =
-  'shrink-0 rounded-md border border-blue-500 bg-blue-600 px-2.5 py-1.5 text-xs font-medium text-white transition-colors select-none disabled:cursor-not-allowed disabled:opacity-40';
-const ICON_BTN =
-  'shrink-0 rounded-md border border-gray-600 bg-gray-700 p-1.5 text-gray-100 transition-colors select-none active:bg-blue-600 active:text-white active:border-blue-600 disabled:cursor-not-allowed disabled:opacity-40';
-
 export default function TerminalShortcutsPanel({
   wsRef,
   terminalRef,
   isConnected,
-  bottomOffset = 'bottom-14',
 }: TerminalShortcutsPanelProps) {
   const { t } = useTranslation('settings');
-  const [ctrlActive, setCtrlActive] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
-  const [altActive, setAltActive] = useState(false);
+  const closeTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (closeTimeoutRef.current) {
+        clearTimeout(closeTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  const handleToggle = useCallback(() => {
+    setIsOpen((prev) => !prev);
+  }, []);
+
+  const handleShortcutAction = useCallback((action: () => void) => {
+    action();
+    if (document.activeElement instanceof HTMLElement) {
+      document.activeElement.blur();
+    }
+    if (closeTimeoutRef.current) {
+      clearTimeout(closeTimeoutRef.current);
+    }
+    closeTimeoutRef.current = setTimeout(() => setIsOpen(false), 50);
+  }, []);
 
   const sendInput = useCallback(
     (data: string) => {
@@ -72,120 +68,103 @@ export default function TerminalShortcutsPanel({
     terminalRef.current?.scrollToBottom();
   }, [terminalRef]);
 
-  const pasteFromClipboard = useCallback(async () => {
-    if (typeof navigator === 'undefined' || !navigator.clipboard?.readText) {
-      return;
-    }
-
-    try {
-      const text = await navigator.clipboard.readText();
-      if (text.length > 0) {
-        sendInput(text);
-      }
-    } catch {
-      // Ignore clipboard permission errors.
-    }
-  }, [sendInput]);
-
-  const handleKeyPress = useCallback(
-    (seq: string) => {
-      let finalSeq = seq;
-      if (ctrlActive && seq.length === 1) {
-        const code = seq.toLowerCase().charCodeAt(0);
-        if (code >= 97 && code <= 122) {
-          finalSeq = String.fromCharCode(code - 96);
-        }
-        setCtrlActive(false);
-      }
-      if (altActive && seq.length === 1) {
-        finalSeq = '\x1b' + finalSeq;
-        setAltActive(false);
-      }
-      sendInput(finalSeq);
-    },
-    [ctrlActive, altActive, sendInput],
-  );
-
   return (
-    <div className={`pointer-events-none fixed inset-x-0 ${bottomOffset} z-20 px-2 md:hidden`}>
+    <>
-      <div className="pointer-events-auto flex items-center gap-1 overflow-x-auto rounded-lg border border-gray-700/80 bg-gray-900/95 px-1.5 py-1.5 shadow-lg backdrop-blur-sm [-webkit-overflow-scrolling:touch] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+      {/* Pull Tab */}
-        <button
+      <button
-          type="button"
+        type="button"
-          onPointerDown={preventFocusSteal}
+        onPointerDown={preventFocusSteal}
-          onClick={() => {
+        onClick={handleToggle}
-            void pasteFromClipboard();
+        className={`fixed ${
-          }}
+          isOpen ? 'right-64' : 'right-0'
-          disabled={!isConnected}
+        } z-50 cursor-pointer rounded-l-md border border-gray-200 bg-white p-2 shadow-lg transition-all duration-150 ease-out hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700`}
-          className={ICON_BTN}
+        style={{ top: '50%', transform: 'translateY(-50%)' }}
-          title={t('terminalShortcuts.paste', { defaultValue: 'Paste' })}
+        aria-label={
-          aria-label={t('terminalShortcuts.paste', { defaultValue: 'Paste' })}
+          isOpen
-        >
+            ? t('terminalShortcuts.handle.closePanel')
-          <Clipboard className="h-4 w-4" />
+            : t('terminalShortcuts.handle.openPanel')
-        </button>
+        }
+      >
+        {isOpen ? (
+          <ChevronRight className="h-5 w-5 text-gray-600 dark:text-gray-400" />
+        ) : (
+          <ChevronLeft className="h-5 w-5 text-gray-600 dark:text-gray-400" />
+        )}
+      </button>
 
-        {MOBILE_KEYS.map((key) => {
+      {/* Panel */}
-          if (key.type === 'modifier') {
+      <div
-            const isActive = key.modifier === 'ctrl' ? ctrlActive : altActive;
+        className={`fixed right-0 top-0 z-40 h-full w-64 transform border-l border-border bg-background shadow-xl transition-transform duration-150 ease-out ${
-            const toggle =
+          isOpen ? 'translate-x-0' : 'translate-x-full'
-              key.modifier === 'ctrl'
+        }`}
-                ? () => setCtrlActive((v) => !v)
+      >
-                : () => setAltActive((v) => !v);
+        <div className="flex h-full flex-col">
-            return (
+          {/* Header */}
-              <button
+          <div className="border-b border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-900">
-                type="button"
+            <h3 className="flex items-center gap-2 text-lg font-semibold text-gray-900 dark:text-white">
-                key={key.id}
+              <Keyboard className="h-5 w-5 text-gray-600 dark:text-gray-400" />
-                onPointerDown={preventFocusSteal}
+              {t('terminalShortcuts.title')}
-                onClick={toggle}
+            </h3>
-                disabled={!isConnected}
+          </div>
-                className={isActive ? KEY_BTN_ACTIVE : KEY_BTN}
-              >
-                {key.label}
-              </button>
-            );
-          }
 
-          if (key.type === 'arrow') {
+          {/* Content — conditionally rendered so buttons remount with clean CSS states */}
-            const Icon = ARROW_ICONS[key.icon];
+          {isOpen && (
-            return (
+            <div className="flex-1 space-y-6 overflow-y-auto overflow-x-hidden bg-background p-4">
-              <button
+              {/* Shortcut Keys */}
-                type="button"
+              <div className="space-y-2">
-                key={key.id}
+                <h4 className="mb-2 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
-                onPointerDown={preventFocusSteal}
+                  {t('terminalShortcuts.sectionKeys')}
-                onClick={() => sendInput(key.sequence)}
+                </h4>
-                disabled={!isConnected}
+                {SHORTCUTS.map((shortcut) => (
-                className={ICON_BTN}
+                  <button
-              >
+                    type="button"
-                <Icon className="h-4 w-4" />
+                    key={shortcut.id}
-              </button>
+                    onPointerDown={preventFocusSteal}
-            );
+                    onClick={() => handleShortcutAction(() => sendInput(shortcut.sequence))}
-          }
+                    disabled={!isConnected}
+                    className="flex w-full items-center justify-between rounded-lg border border-transparent bg-gray-50 p-3 transition-colors hover:border-gray-300 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-40 dark:bg-gray-800 dark:hover:border-gray-600 dark:hover:bg-gray-700"
+                  >
+                    <span className="text-sm text-gray-900 dark:text-white">
+                      {t(`terminalShortcuts.${shortcut.labelKey}`)}
+                    </span>
+                    <kbd className="rounded border border-gray-300 bg-gray-200 px-2 py-0.5 font-mono text-xs text-gray-600 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300">
+                      {shortcut.hint}
+                    </kbd>
+                  </button>
+                ))}
+              </div>
 
-          return (
+              {/* Navigation */}
-            <button
+              <div className="space-y-2">
-              type="button"
+                <h4 className="mb-2 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
-              key={key.id}
+                  {t('terminalShortcuts.sectionNavigation')}
-              onPointerDown={preventFocusSteal}
+                </h4>
-              onClick={() => handleKeyPress(key.sequence)}
+                <button
-              disabled={!isConnected}
+                  type="button"
-              className={KEY_BTN}
+                  onPointerDown={preventFocusSteal}
-            >
+                  onClick={() => handleShortcutAction(scrollToBottom)}
-              {key.label}
+                  disabled={!isConnected}
-            </button>
+                  className="flex w-full items-center justify-between rounded-lg border border-transparent bg-gray-50 p-3 transition-colors hover:border-gray-300 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-40 dark:bg-gray-800 dark:hover:border-gray-600 dark:hover:bg-gray-700"
-          );
+                >
-        })}
+                  <span className="text-sm text-gray-900 dark:text-white">
-
+                    {t('terminalShortcuts.scrollDown')}
-        <button
+                  </span>
-          type="button"
+                  <ArrowDownToLine className="h-4 w-4 text-gray-600 dark:text-gray-400" />
-          onPointerDown={preventFocusSteal}
+                </button>
-          onClick={scrollToBottom}
+              </div>
-          disabled={!isConnected}
+            </div>
-          className={ICON_BTN}
+          )}
-          title={t('terminalShortcuts.scrollDown')}
+        </div>
-          aria-label={t('terminalShortcuts.scrollDown')}
-        >
-          <ArrowDownToLine className="h-4 w-4" />
-        </button>
       </div>
-    </div>
+
+      {/* Backdrop */}
+      {isOpen && (
+        <div
+          className="fixed inset-0 z-30 bg-background/80 backdrop-blur-sm transition-opacity duration-150 ease-out"
+          onPointerDown={preventFocusSteal}
+          onClick={handleToggle}
+        />
+      )}
+    </>
   );
 }