diff --git a/extensions/levelcode-ai/media/chat.html b/extensions/levelcode-ai/media/chat.html index ed6a948..3dd321a 100644 --- a/extensions/levelcode-ai/media/chat.html +++ b/extensions/levelcode-ai/media/chat.html @@ -555,6 +555,13 @@ .plancard .phtitle { flex: 1 1 auto; min-width: 0; } .plancard .pcount { flex: 0 0 auto; opacity: .75; font-weight: 500; font-variant-numeric: tabular-nums; font-family: var(--vscode-editor-font-family, ui-monospace, monospace); font-size: 11px; padding: 1px 8px; border-radius: 999px; background: rgba(127,127,127,.14); } .plancard.alldone .pcount { opacity: 1; color: var(--vscode-gitDecoration-addedResourceForeground, #4ec97a); background: color-mix(in srgb, var(--vscode-gitDecoration-addedResourceForeground, #4ec97a) 16%, transparent); } + /* Dismiss (×): reveals on header hover, and stays visible once the plan is done (its primary use). */ + .plancard .pdismiss { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; color: var(--muted); font-size: 14px; line-height: 1; opacity: 0; cursor: pointer; border-radius: 6px; transition: opacity .12s, background .12s; } + .plancard .phead:hover .pdismiss, .plancard.alldone .pdismiss { opacity: .55; } + /* :focus-visible so a keyboard-only user can see AND ring the control even on a not-yet-done plan + — it is opacity:0 by default (revealed on hover/done), so focus must reveal it too. */ + .plancard .pdismiss:hover, .plancard .pdismiss:focus-visible { opacity: 1; background: rgba(127,127,127,.16); } + .plancard .pdismiss:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; } .plancard .pprog { height: 3px; margin: 0 12px 2px; border-radius: 3px; background: rgba(127,127,127,.16); overflow: hidden; } .plancard .pprog .pfill { height: 100%; border-radius: 3px; background: var(--accent); transition: width .4s cubic-bezier(.4,0,.2,1); } .plancard.alldone .pprog .pfill { background: var(--vscode-gitDecoration-addedResourceForeground, #4ec97a); } @@ -700,7 +707,7 @@ /* Group the plan/mode chip (st-key, e.g. "Gateway · Pro+") beside the account avatar on the RIGHT — a Claude-Code-style cluster. Pure flex order, so no DOM move of the big inline SVGs: - st-local + context ring stay left; grow pushes; st-key then the avatar sit together right. */ + the context ring stays left; grow pushes; st-key then the avatar sit together right. */ #status .grow { order: 1; } #status #st-key { order: 2; } #status .acct { order: 3; } @@ -737,7 +744,7 @@ .lc-spin .c1 { opacity: .5; } .lc-spin .c2 { opacity: .78; } .lc-spin .c3 { opacity: 1; } } #status .item { display: inline-flex; align-items: center; gap: 4px; } - /* Approvals dropdown, seated in the status bar between LevelCode Cloud (st-local) and the context ring. + /* Approvals dropdown, seated in the status bar just before the context ring. Its menu reuses .modemenu and opens UPWARD (the status bar is at the very bottom). */ #status .st-approvals { position: relative; display: inline-flex; } #status .st-approvals[hidden] { display: none; } @@ -1005,7 +1012,6 @@ - Local Direct · BYO key