Release 1.0.13: improve prompt control tooltips

Author: 3xian

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pinkcode",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "description": "Desktop mission control for Grok agents.",
   "type": "module",
   "keywords": [

src-tauri/Cargo.lock

@@ -1,6 +1,6 @@
 [package]
 name = "pinkcode"
-version = "1.0.12"
+version = "1.0.13"
 description = "Desktop control plane for Grok Build multi-task observability"
 authors = ["PinkCode"]
 license = "Apache-2.0"

src-tauri/Cargo.toml

@@ -2,7 +2,7 @@
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "PinkCode",
   "mainBinaryName": "PinkCode",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "identifier": "com.pinkcode.app",
   "build": {
     "beforeDevCommand": "npm run dev",

src-tauri/tauri.conf.json

@@ -361,11 +361,10 @@ export function PromptBar({
               label="Mode"
               value={sessionMode}
               displayLabel={modeMeta.label}
-              title={`${modeMeta.hint} · shift+tab to cycle`}
+              tooltip={`${modeMeta.hint} · Press Shift+Tab to cycle modes`}
               accent={modeMeta.accent}
               glyph={modeGlyph(sessionMode)}
               options={SESSION_MODE_OPTIONS}
-              shortcut="shift+tab"
               disabled={busy || running || awaiting}
               onChange={onSessionModeChange}
             />
@@ -542,7 +541,7 @@ function ReasoningLevelSelector({
       label="Level"
       value={active.value}
       displayLabel={active.label}
-      title={active.description ?? `Reasoning level: ${active.label}`}
+      tooltip={active.description ?? `Reasoning level: ${active.label}`}
       accent="neutral"
       glyph="◈"
       options={options.map((option) => ({

src/components/PromptBar.tsx

@@ -18,12 +18,10 @@ interface Props<T extends string> {
   label: string;
   value: T;
   displayLabel: string;
-  title: string;
+  tooltip: string;
   accent: ChipAccent;
   glyph: string;
   options: readonly ChipOption<T>[];
-  /** Shown to the right of the control (e.g. Shift+Tab). */
-  shortcut?: string;
   disabled?: boolean;
   onChange: (value: T) => void;
 }
@@ -33,18 +31,18 @@ export function PromptChipSelect<T extends string>({
   label,
   value,
   displayLabel,
-  title,
+  tooltip,
   accent,
   glyph,
   options,
-  shortcut,
   disabled,
   onChange,
 }: Props<T>) {
   const [open, setOpen] = useState(false);
   const [active, setActive] = useState(0);
   const rootRef = useRef<HTMLDivElement>(null);
   const listId = useId();
+  const tooltipId = useId();
 
   useEffect(() => {
     if (!open) return;
@@ -108,17 +106,18 @@ export function PromptChipSelect<T extends string>({
         disabled ? " disabled" : ""
       }`}
       ref={rootRef}
-      title={title}
     >
-      <span className="prompt-chip-label">{label}</span>
+      <span id={tooltipId} className="prompt-chip-tooltip" role="tooltip">
+        {tooltip}
+      </span>
       <button
         type="button"
         className="prompt-chip-trigger"
         disabled={disabled}
         tabIndex={-1}
-        aria-haspopup="listbox"
         aria-expanded={open}
         aria-controls={listId}
+        aria-describedby={tooltipId}
         aria-label={`${label}: ${displayLabel}`}
         onClick={() => {
           if (!disabled) setOpen((o) => !o);
@@ -133,11 +132,6 @@ export function PromptChipSelect<T extends string>({
           ▾
         </span>
       </button>
-      {shortcut ? (
-        <kbd className="shortcut-hint" aria-hidden>
-          {shortcut}
-        </kbd>
-      ) : null}
       {open && (
         <div
           className="prompt-chip-menu"

src/components/PromptChipSelect.tsx

@@ -916,6 +916,50 @@ button.user-question-option:hover:not(:disabled),
   min-width: 0;
 }
 
+/* Prompt control help; hidden while its menu is open. */
+
+.prompt-chip-tooltip {
+  position: absolute;
+  left: 0;
+  bottom: calc(100% + 7px);
+  z-index: 45;
+  display: block;
+  width: max-content;
+  max-width: min(320px, 70vw);
+  padding: 5px 8px;
+  border: 1px solid color-mix(in srgb, var(--title-selected) 35%, var(--border));
+  border-radius: 6px;
+  background: color-mix(in srgb, var(--bg-elevated) 98%, transparent);
+  box-shadow: var(--shadow-md);
+  color: var(--text);
+  font-size: 10px;
+  font-weight: 500;
+  line-height: 1.35;
+  white-space: normal;
+  pointer-events: none;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(3px);
+  transition:
+    opacity 0.08s ease,
+    transform 0.08s ease,
+    visibility 0s linear 0.08s;
+}
+
+.prompt-chip.open .prompt-chip-tooltip {
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(3px);
+  transition: none;
+}
+
+.prompt-chip:not(.open):hover .prompt-chip-tooltip,
+.prompt-chip:not(.open):focus-within .prompt-chip-tooltip {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+  transition-delay: 0s;
+}
 .prompt-chip.accent-plan {
   --chip-accent: var(--kind-plan);
   --chip-border: color-mix(in srgb, var(--kind-plan) 45%, transparent);
@@ -1033,7 +1077,6 @@ button.user-question-option:hover:not(:disabled),
   transform: translateY(0.5px);
 }
 
-/* Shortcut chip styling lives on global `.shortcut-hint` (base.css). */
 
 .prompt-chip-menu {
   position: absolute;