feat(web): prompt for desktop updates and tidy the sidebar header

.changeset/desktop-update-toast.md

@@ -0,0 +1,5 @@
+---
+"@pymodel/pythinker-code": minor
+---
+
+Prompt for desktop updates with a toast that offers install or skip, centre the settings button in the sidebar footer, and start a new session when the sidebar brand is clicked.

apps/pythinker-web/src/App.vue

@@ -18,6 +18,7 @@ import SettingsPane from './components/settings/SettingsPane.vue';
 import SessionsDialog from './components/SessionsDialog.vue';
 import AddWorkspaceDialog from './components/AddWorkspaceDialog.vue';
 import StatusPanel from './components/StatusPanel.vue';
+import UpdateToast from './components/UpdateToast.vue';
 import WarningToasts from './components/WarningToasts.vue';
 import MobileTopBar from './components/MobileTopBar.vue';
 import MobileSwitcherSheet from './components/MobileSwitcherSheet.vue';
@@ -1090,6 +1091,7 @@ function openPr(url: string): void {
       @update-config="handleUpdateConfig($event)"
       @login="loginFromSettings"
       @open-onboarding="openOnboardingFromSettings"
+      @close="showSettings = false"
     />
 
     <ConversationPane
@@ -1335,6 +1337,9 @@ function openPr(url: string): void {
     <!-- Floating warnings / agent errors (e.g. a 403 from the model provider) -->
     <WarningToasts :warnings="client.warnings.value" @dismiss="client.dismissWarning" />
 
+    <!-- Desktop update prompt (renders nothing in the browser) -->
+    <UpdateToast />
+
     <!-- KAP/daemon debug panel (opt-in, ?debug=1) -->
     <DebugPanel v-if="debugEnabled" />
 
@@ -1411,6 +1416,11 @@ function openPr(url: string): void {
   height: env(titlebar-area-height, 44px);
   -webkit-app-region: drag;
   user-select: none;
+  /* Windows has no vibrancy, so the bar earns its own tone: a shade darker than
+     the shell with a hairline under it, which also frames the window buttons. */
+  background: color-mix(in srgb, var(--ink) 4%, var(--panel));
+  border-bottom: 1px solid var(--line);
+  box-sizing: border-box;
 }
 .auth-page {
   flex: 1;

apps/pythinker-web/src/components/Sidebar.vue

@@ -464,10 +464,15 @@ onBeforeUnmount(() => {
     <div class="col" :style="{ width: colWidth + 'px' }">
       <!-- Header: logo + collapse (no hard border — flows into workspace list) -->
       <div class="ch">
-        <div class="ch-brand">
-          <PythinkerLogo size="sm" interactive />
+        <button
+          type="button"
+          class="ch-brand"
+          :title="t('sidebar.newSession')"
+          @click.stop="emit('create')"
+        >
+          <PythinkerLogo size="sm" />
           <span class="ch-name">Pythinker Code</span>
-        </div>
+        </button>
         <button
           type="button"
           class="collapse-btn"
@@ -805,6 +810,17 @@ onBeforeUnmount(() => {
   min-width: 0;
   /* Take the row's slack so the action buttons group together on the right. */
   flex: 1;
+  padding: 0;
+  border: none;
+  background: none;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.ch-brand:focus-visible {
+  outline: 2px solid var(--blue);
+  outline-offset: 2px;
+  border-radius: 6px;
 }
 .ch-name {
   font-size: var(--ui-font-size);
@@ -1198,11 +1214,35 @@ onBeforeUnmount(() => {
   text-align: left;
   cursor: pointer;
 }
-/* The sessions-mode gear sits on the trailing edge; the settings-mode back
-   arrow keeps the leading edge, where a back control belongs. */
+/* The sessions-mode gear centres in the sidebar and carries the New Session
+   card style; the settings-mode back arrow keeps the leading edge, where a
+   back control belongs. */
 .settings-row.end {
-  justify-content: flex-end;
-  text-align: right;
+  width: calc(100% - 24px);
+  margin: 0 12px 10px;
+  justify-content: center;
+  gap: 10px;
+  padding: 9px 10px;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: var(--soft);
+  color: var(--ink);
+  font-family: var(--mono);
+  line-height: 1;
+  text-align: center;
+  white-space: nowrap;
+}
+.settings-row.end:hover {
+  background: color-mix(in srgb, var(--ink) 6%, var(--soft));
+}
+.settings-row.end:focus-visible {
+  outline-offset: 1px;
+}
+/* The back control is secondary next to the settings nav above it, so it sits
+   a step dimmer than the muted default until hovered. */
+.settings-row:not(.end) {
+  color: color-mix(in srgb, var(--muted) 65%, transparent);
+  font-weight: 400;
 }
 .settings-row:hover { color: var(--ink); background: var(--soft); }
 .settings-row:focus-visible {

apps/pythinker-web/src/components/UpdateToast.vue

@@ -0,0 +1,150 @@
+<!-- apps/pythinker-web/src/components/UpdateToast.vue -->
+<!-- Desktop-only prompt: a new version is ready (or waiting to download).
+     Unlike WarningToasts this never auto-dismisses — it asks a question. -->
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
+const bridge = typeof window !== 'undefined' ? window.pythinkerDesktop : undefined;
+const state = ref<DesktopUpdateState>();
+const busy = ref(false);
+/** Versions the user skipped. Persisted per version so the prompt does not
+    return for the same build; an unnamed version is skipped for the session. */
+const skipped = ref<string[]>(readSkipped());
+const SKIP_KEY = 'pythinker.update.skipped';
+
+let removeListener: (() => void) | undefined;
+
+function readSkipped(): string[] {
+  try {
+    const raw: unknown = JSON.parse(localStorage.getItem(SKIP_KEY) ?? '[]');
+    return Array.isArray(raw) ? raw.filter((v): v is string => typeof v === 'string') : [];
+  } catch {
+    return [];
+  }
+}
+
+const visible = computed(() => {
+  const current = state.value;
+  if (current === undefined) return false;
+  if (current.status !== 'downloaded' && !(current.status === 'available' && !current.autoUpdate)) {
+    return false;
+  }
+  return !skipped.value.includes(current.version ?? '');
+});
+
+const title = computed(() =>
+  state.value?.version
+    ? t('update.availableVersion', { version: state.value.version })
+    : t('update.available'),
+);
+
+const primaryLabel = computed(() =>
+  state.value?.status === 'downloaded' ? t('settings.desktop.restartToUpdate') : t('update.download'),
+);
+
+async function primary(): Promise<void> {
+  if (bridge === undefined || busy.value) return;
+  busy.value = true;
+  try {
+    state.value =
+      state.value?.status === 'downloaded' ? await bridge.quitAndInstall() : await bridge.checkForUpdates();
+  } finally {
+    busy.value = false;
+  }
+}
+
+function skip(): void {
+  const next = [...skipped.value, state.value?.version ?? ''];
+  skipped.value = next;
+  try {
+    localStorage.setItem(SKIP_KEY, JSON.stringify(next.filter((v) => v !== '')));
+  } catch {
+    // A blocked localStorage still skips for this session.
+  }
+}
+
+onMounted(() => {
+  // Dev-only preview: the real updater stays disabled outside packaged builds,
+  // so `?updateDemo=1` on the Vite dev server is the only way to see this.
+  if (import.meta.env.DEV && new URLSearchParams(window.location.search).has('updateDemo')) {
+    state.value = { status: 'downloaded', version: '0.0.0-dev', autoUpdate: true };
+    return;
+  }
+  if (bridge === undefined) return;
+  removeListener = bridge.onUpdateState((next) => {
+    state.value = next;
+  });
+  void bridge.getUpdateState().then((next) => {
+    state.value = next;
+  }, () => {
+    // A failed initial read leaves the prompt hidden until the next event.
+  });
+});
+
+onUnmounted(() => {
+  removeListener?.();
+});
+</script>
+
+<template>
+  <div v-if="visible" class="update-toast" role="status" aria-live="polite">
+    <div class="body">
+      <div class="title">{{ title }}</div>
+      <div class="msg">{{ t('update.prompt') }}</div>
+    </div>
+    <div class="acts">
+      <button type="button" class="skip" @click="skip">{{ t('update.skip') }}</button>
+      <button type="button" class="go" :disabled="busy" @click="void primary()">{{ primaryLabel }}</button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.update-toast {
+  position: fixed;
+  right: 16px;
+  /* Sits above the WarningToasts stack (bottom: 84px) so the two never overlap. */
+  bottom: 152px;
+  z-index: 61;
+  width: min(360px, calc(100vw - 32px));
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 12px 13px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--panel);
+  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.12);
+  font-size: var(--ui-font-size);
+  line-height: 1.45;
+}
+.title { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
+.msg { margin-top: 2px; color: var(--muted); }
+.acts { display: flex; justify-content: flex-end; gap: 8px; }
+.skip,
+.go {
+  padding: 5px 12px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--bg);
+  color: var(--muted);
+  font: inherit;
+  font-size: var(--ui-font-size-xs);
+  cursor: pointer;
+}
+.skip:hover { color: var(--ink); }
+.go { border-color: transparent; background: var(--blue); color: #fff; font-weight: 600; }
+.go:disabled { opacity: 0.6; cursor: default; }
+
+@media (max-width: 640px) {
+  .update-toast {
+    left: 12px;
+    right: 12px;
+    bottom: calc(150px + env(safe-area-inset-bottom));
+    width: auto;
+  }
+}
+</style>

apps/pythinker-web/src/components/settings/SettingsPane.vue

@@ -10,6 +10,7 @@ import type {
 } from '../../api/types';
 import type { ColorScheme, Theme } from '../../composables/usePythinkerWebClient';
 import type { SettingsTab } from '../../composables/useSettingsNav';
+import { useI18n } from 'vue-i18n';
 import AdvancedPage from './pages/AdvancedPage.vue';
 import AgentPage from './pages/AgentPage.vue';
 import ConnectorsPage from './pages/ConnectorsPage.vue';
@@ -53,11 +54,23 @@ const emit = defineEmits<{
   updateConfig: [patch: Partial<AppConfig>];
   restartConnector: [connectorId: string];
   setPluginEnabled: [payload: { pluginId: string; enabled: boolean }];
+  close: [];
 }>();
+
+const { t } = useI18n();
 </script>
 
 <template>
   <main class="settings-pane con">
+    <!-- Zero-height sticky strip: the close button rides the top-right corner
+         without pushing the pages down or scrolling away with them. -->
+    <div class="pane-top">
+      <button type="button" class="close-btn" :title="t('settings.close')" :aria-label="t('settings.close')" @click="emit('close')">
+        <svg viewBox="0 0 16 16" width="12" height="12" aria-hidden="true">
+          <path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" />
+        </svg>
+      </button>
+    </div>
     <GeneralPage
       v-show="activeTab === 'general'"
       :theme="theme"
@@ -116,4 +129,39 @@ const emit = defineEmits<{
   background: var(--bg);
   color: var(--ink);
 }
+.pane-top {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  display: flex;
+  justify-content: flex-end;
+  height: 0;
+}
+.close-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: 1px solid color-mix(in srgb, var(--err) 35%, transparent);
+  border-radius: 50%;
+  background: color-mix(in srgb, var(--err) 10%, transparent);
+  color: var(--err);
+  cursor: pointer;
+}
+.close-btn:hover {
+  color: #fff;
+  background: var(--err);
+  border-color: var(--err);
+}
+/* Windows draws its own min/max/close cluster in the top-right titlebar, so the
+   pane control drops clear of it instead of stacking under the window buttons. */
+:global(html[data-desktop-platform='win32']) .pane-top {
+  top: 8px;
+  padding-right: 4px;
+}
+.close-btn:focus-visible {
+  outline: 2px solid var(--blue);
+  outline-offset: 1px;
+}
 </style>

apps/pythinker-web/src/i18n/locales/en/settings.ts

@@ -2,6 +2,8 @@ export default {
   title: 'Settings',
   /** Sidebar control that leaves the settings route and restores the session list. */
   backToSessions: 'Back to sessions',
+  /** Round close control in the top-right corner of the settings pane. */
+  close: 'Close settings',
   groups: {
     basics: 'Basics',
     capabilities: 'Agent capabilities',

apps/pythinker-web/src/i18n/locales/en/update.ts

@@ -0,0 +1,7 @@
+export default {
+  available: 'A new version is available',
+  availableVersion: 'Version {version} is available',
+  prompt: 'Install it now, or skip this version.',
+  download: 'Download update',
+  skip: 'Skip',
+} as const;

apps/pythinker-web/src/i18n/locales/index.ts

@@ -28,6 +28,7 @@ import en_onboarding from './en/onboarding';
 import en_settings from './en/settings';
 import en_header from './en/header';
 import en_sideChat from './en/sideChat';
+import en_update from './en/update';
 
 export const messages = {
   en: {
@@ -61,6 +62,7 @@ export const messages = {
     settings: en_settings,
     header: en_header,
     sideChat: en_sideChat,
+    update: en_update,
   },
 } as const;
 

apps/pythinker-web/test/sidebar.test.ts

@@ -168,6 +168,12 @@ describe('Sidebar reference layout', () => {
     expect(wrapper.emitted('openSettings')).toHaveLength(1);
   });
 
+  it('starts a new session when the brand is clicked', async () => {
+    const wrapper = mountSidebar();
+    await wrapper.get('.ch .ch-brand').trigger('click');
+    expect(wrapper.emitted('create')).toHaveLength(1);
+  });
+
   it('renders the New Session label without a workspace path row', () => {
     const wrapper = mountSidebar();