fix(web): make the account section state and action obvious

Show the sign-in state with a status dot, split the provider and the model
into separate labelled fields, and label the primary button for what it opens
instead of borrowing the provider dialog title.

Author: elkaix

.changeset/web-account-section.md

@@ -0,0 +1,5 @@
+---
+"@pymodel/pythinker-code": patch
+---
+
+Show the sign-in state, the provider, and the model as separate fields in the web settings account section, and label the button for what it opens.

apps/pythinker-web/src/components/settings/pages/GeneralPage.vue

@@ -3,7 +3,7 @@ import { computed, onMounted, onUnmounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import type { ColorScheme, Theme } from '../../../composables/usePythinkerWebClient';
 
-defineProps<{
+const props = defineProps<{
   theme: Theme;
   colorScheme: ColorScheme;
   uiFontSize: number;
@@ -28,6 +28,17 @@ const desktopAutoUpdate = ref(true);
 const desktopUpdateState = ref<DesktopUpdateState>();
 let removeDesktopUpdateListener: (() => void) | undefined;
 
+const accountDetails = computed(() => {
+  const value = props.accountModel;
+  if (!value) return null;
+  const separator = value.indexOf('/');
+  return {
+    raw: value,
+    provider: separator === -1 ? value : value.slice(0, separator),
+    model: separator === -1 ? value : value.slice(separator + 1),
+  };
+});
+
 const desktopStatusText = computed(() => {
   const state = desktopUpdateState.value;
   if (state === undefined) return '';
@@ -184,15 +195,28 @@ onUnmounted(() => {
       </div>
     </section>
 
-    <section class="sec">
+    <section class="sec account-section">
       <h3 class="sec-title">{{ t('settings.account') }}</h3>
-      <div class="row">
-        <span class="rlabel">{{ authReady ? t('sidebar.signedIn') : t('sidebar.notSignedIn') }}</span>
-        <span v-if="authReady && accountModel" class="rvalue" :title="accountModel">{{ accountModel }}</span>
+      <div class="account-status">
+        <span class="dot" :class="authReady ? 's-connected' : 's-unconfigured'" aria-hidden="true" />
+        <span>{{ authReady ? t('sidebar.signedIn') : t('sidebar.notSignedIn') }}</span>
       </div>
+      <div v-if="authReady && accountDetails" class="account-details">
+        <div class="account-detail">
+          <span class="account-label">{{ t('providers.provider') }}</span>
+          <span class="account-value account-provider" :title="accountDetails.raw">{{ accountDetails.provider }}</span>
+        </div>
+        <div class="account-detail">
+          <span class="account-label">{{ t('providers.model') }}</span>
+          <span class="account-value account-model" :title="accountDetails.raw">{{ accountDetails.model }}</span>
+        </div>
+      </div>
+      <p id="account-action-description" class="account-action-note">
+        {{ t(authReady ? 'providers.manageDescription' : 'providers.signInDescription') }}
+      </p>
       <div class="actions">
+        <button type="button" class="act signin" aria-describedby="account-action-description" @click="emit('login')">{{ t('providers.manage') }}</button>
         <button type="button" class="act" @click="emit('openOnboarding')">{{ t('onboarding.reopen') }}</button>
-        <button type="button" class="act signin" @click="emit('login')">{{ t('providers.title') }}</button>
       </div>
     </section>
   </section>
@@ -238,4 +262,52 @@ onUnmounted(() => {
 .opt:hover { color: var(--ink); }
 .opt.on { background: var(--soft); color: var(--blue2); font-weight: 600; }
 .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
+.account-status {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--ink);
+  font-family: var(--sans);
+  font-size: calc(var(--ui-font-size) - 1px);
+}
+.account-details {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+  margin-top: 10px;
+}
+.account-detail {
+  min-width: 0;
+  padding: 8px 10px;
+  border: 1px solid var(--line);
+  border-radius: var(--r-sm);
+  background: var(--panel);
+}
+.account-label {
+  display: block;
+  margin-bottom: 3px;
+  color: var(--muted);
+  font-family: var(--mono);
+  font-size: var(--ui-font-size-xs);
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+.account-value {
+  display: block;
+  overflow: hidden;
+  color: var(--ink);
+  font-family: var(--mono);
+  font-size: calc(var(--ui-font-size) - 1px);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.account-action-note {
+  margin: 10px 0 0;
+  color: var(--muted);
+  font-size: calc(var(--ui-font-size) - 1px);
+}
+
+@media (max-width: 640px) {
+  .account-details { grid-template-columns: 1fr; }
+}
 </style>

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

@@ -1,5 +1,10 @@
 export default {
   dialogLabel: 'Manage providers',
+  manage: 'Manage providers',
+  manageDescription: 'Open provider setup to add or change providers.',
+  signInDescription: 'Open provider setup to sign in.',
+  provider: 'Provider',
+  model: 'Model',
   title: 'Provider management',
   close: 'Close (Esc)',
   loading: 'Loading providers…',

apps/pythinker-web/test/settings-pane.test.ts

@@ -352,6 +352,49 @@ describe('SettingsPane desktop updates', () => {
   });
 });
 
+describe('SettingsPane general account section', () => {
+  it('shows signed-in status and separates the provider from the model', () => {
+    const rawModel = 'openai-codex/gpt-5.6-luna';
+    const panel = mountPane('general', { accountModel: rawModel }).get('#settings-panel-general');
+
+    expect(panel.get('.account-status').text()).toContain('Signed in');
+    expect(panel.get('.account-status .dot').classes()).toContain('s-connected');
+    expect(panel.get('.account-provider').text()).toBe('openai-codex');
+    expect(panel.get('.account-model').text()).toBe('gpt-5.6-luna');
+    expect(panel.get('.account-provider').attributes('title')).toBe(rawModel);
+    expect(panel.get('.account-model').attributes('title')).toBe(rawModel);
+  });
+
+  it('shows the full value when the account model has no provider separator', () => {
+    const rawModel = 'legacy-model';
+    const panel = mountPane('general', { accountModel: rawModel }).get('#settings-panel-general');
+
+    expect(panel.get('.account-provider').text()).toBe(rawModel);
+    expect(panel.get('.account-model').text()).toBe(rawModel);
+  });
+
+  it('shows the sign-in affordance when the account is not ready', () => {
+    const panel = mountPane('general', { authReady: false, accountModel: null }).get('#settings-panel-general');
+
+    expect(panel.get('.account-status').text()).toContain('Not signed in');
+    expect(panel.get('.account-status .dot').classes()).toContain('s-unconfigured');
+    expect(panel.get('.account-action-note').text()).toBe('Open provider setup to sign in.');
+    expect(panel.get('button.signin').text()).toBe('Manage providers');
+  });
+
+  it('emits login from the primary action and onboarding from the secondary action', async () => {
+    const wrapper = mountPane('general', { authReady: false, accountModel: null });
+    const panel = wrapper.get('#settings-panel-general');
+    const buttons = panel.findAll('button.act');
+
+    await buttons[0]!.trigger('click');
+    await buttons[1]!.trigger('click');
+
+    expect(wrapper.emitted('login')).toEqual([[]]);
+    expect(wrapper.emitted('openOnboarding')).toEqual([[]]);
+  });
+});
+
 describe('SettingsPane agent page', () => {
   it('keeps a configured default the catalog no longer offers', () => {
     // Without a matching option the browser shows its first one, which reads