A Closer Look At Fix: Dock/Flagship 片方の Thinking

fix: Dock/Flagship 状態の認知漏れを止める

When one ship’s command panel - Dock or Flagship - is deep in thinking, switching tabs should not trigger the other to flash with “thinking” status. Yet a simple bug in the MainPanel.tsx causes exactly that: the Bridge component reuses the same React instance, so its isLoading state lingers and incorrectly signals both tabs as active.

Here’s the issue: React optimizes by reusing components on state changes, but useCommander’s isLoading resets only partially - leaving a ghost state on the other tab.

• This hidden persistence breaks user trust, especially during high-stakes fleet coordination.
• Example: Dock’s crew waits for updates, then switches tabs
• Flagship mistakenly shows persistent loading, delaying focus.
• The fix hinges on a subtle but powerful tool: keys.

Key-driven re-renders solve the leak

Adding a unique key per tab forces React to fully replace components, resetting state cleanly. Using key={activeCommanderTab} on the Bridge ensures no ghost states bleed between tabs.

Beyond keys: showing vs hiding, not just switching

A safer, cleaner approach: render both tabs but hide the inactive one via dynamic CSS (hidden class), preserving state and avoiding re-renders. This maintains continuity without forcing reload.

The real challenge: tabbed interfaces demand clarity - users need both views active or both inactive. Silent state leaks erode that trust.

So ask yourself: when Dock locks in thinking, does Flagship vanish into a false glow - or stay calm, ready?

The bottom line: fix the key, or hide the gap. Your fleets deserve clarity, not confusion.