AI Button UX — Where to Put It, How to Label It, What to Show While Waiting

If this is useful, a ❤️ helps others find it.

All tests run on an 8-year-old MacBook Air.

The AI feature is only as good as the UI around it. A powerful diagnosis that's hard to trigger, slow to show, or confusing to read doesn't get used.

Here's what I learned from iterating on HiyokoLogcat's AI button.

Where to put the trigger

Inline with the content, not in a toolbar.

My first version had an "AI Diagnose" button in the top toolbar. Users had to: spot the error, note the line number, click the toolbar button, somehow tell it which line.

The fix: put a small icon directly on each error line. Click the icon → diagnose that line. Zero ambiguity.

{logLines.map((line, idx) => (


    {line.message}
    {line.level === 'E' && (
       handleDiagnose(idx)}
        title="AI診断"
      >
        🐥

    )}


))}

Show the button only on error lines. No button on debug/info lines — that would be noise.

How to label it

Don't say "AI." Users don't care about the implementation.

One word. Action-oriented. No tech jargon.

What to show while waiting

Three states, three UIs:

type DiagnosisState = 'idle' | 'loading' | 'done' | 'error';

function DiagnosisOverlay({ state, result }: Props) {
  if (state === 'idle') return null;

  return (


      {state === 'loading' && (


          🐥
          診断中...


      )}
      {state === 'done' && (

{result}

      )}
      {state === 'error' && (


          もう一度お試しください
          再試行


      )}


  );
}

Loading: Show something immediately. A spinner or pulsing text. 3 seconds of silence feels like a crash.

Done: Show the result. No animation needed — the content itself is the payoff.

Error: Short message + retry button. Never a raw error code.

Dismiss behavior

Three ways to close, all feel natural:

• Press ESC
• Click outside the overlay
• Click the X button

useEffect(() => {
  const onKey = (e: KeyboardEvent) => {
    if (e.key === 'Escape') onClose();
  };
  window.addEventListener('keydown', onKey);
  return () => window.removeEventListener('keydown', onKey);
}, []);

Don't make users hunt for a close button. ESC is the universal "get out of this."

The one thing that matters most

Speed of feedback. If clicking the button produces no visible response for even half a second, users will click it again, or assume it didn't work.

Show something within 100ms of the click. The AI response can take 3 seconds. The UI response cannot.

const handleDiagnose = async (idx: number) => {
  setDiagnosisState('loading');  // ← immediate, < 1ms
  const result = await invoke('diagnose', { idx });  // ← takes 3s
  setDiagnosisState('done');
  setResult(result);
};

Hiyoko PDF Vault → https://hiyokoko.gumroad.com/l/HiyokoPDFVault
X → @hiyoyok