ヘッダーの設定・中継・接続を、ほかの画面の言葉と線のアイコンにそろえる

README.md

@@ -73,7 +73,7 @@ make dev
 
 ### キューブをつなぐ
 
-1. 画面右上の「Connect」を押し、表示された一覧からキューブを選びます
+1. 画面右上の「接続」を押し、表示された一覧からキューブを選びます
 2. GAN のキューブは、通信の暗号化に MAC アドレスを使います。自動で取れなかったときは入力欄が出るので、`chrome://bluetooth-internals` や OS の Bluetooth 設定で確認して入力します（ブラウザに保存され、次回からは聞かれません）
 
 Chrome で `chrome://flags/#enable-experimental-web-platform-features` を有効にすると、MAC アドレスを自動で取れることがあります。

cubalyst-spec.md

@@ -51,7 +51,7 @@ ssh -L 5173:localhost:5173 nuc
 ## 5. 機能仕様
 
 ### 5.1 キューブ接続
-- 「Connect」ボタンからキューブに接続し、接続状態とバッテリー残量を常時表示する
+- 「接続」ボタンからキューブに接続し、接続状態とバッテリー残量を常時表示する
 - 回転イベント（move）と面の状態（facelets）をリアルタイムに受信する
 - 画面上に3Dキューブを表示し、実機の状態に同期させる
 - 「状態リセット」ボタン（実機が完成状態のときに押して同期を取り直す）を用意する

docs/lan.md

@@ -105,7 +105,7 @@ VLAN を分けている場合は、ルーター側でも、ほかの VLAN から
 端末のブラウザで `https://<サーバーのIP>` を開きます。
 
 - アドレスバーに警告が出なければ、証明書は信頼されています。
-- ヘッダー右上の「Connect」が押せる状態なら、Web Bluetooth が使えます（使えないときは押せない状態になり、理由がツールチップに出ます）。
+- ヘッダー右上の「接続」が押せる状態なら、Web Bluetooth が使えます（使えないときは押せない状態になり、理由がツールチップに出ます）。
 
 ## 同じサーバーでほかのアプリも公開するとき
 

web/src/App.tsx

@@ -16,7 +16,7 @@ import { setNavCollapsed, useNavCollapsed } from './ui/prefs'
 
 /**
  * 左のメニュー。match に当てはまるパスでも選択中にする（解析は履歴・統計・AI解析の3つのタブをまとめ、履歴から開く）。
- * 中継はヘッダーの LIVE から開く。
+ * 中継はヘッダーの「中継」から開く。
  */
 const NAV: { to: string; label: string; icon: ReactNode; end?: boolean; match?: RegExp }[] = [
   {
@@ -118,7 +118,7 @@ export default function App() {
                 aria-label="中継"
               >
                 <span className="live-dot" aria-hidden="true" />
-                LIVE
+                中継
               </NavLink>
               <CubeConnectionControl />
               <SystemMenu />

web/src/HealthStatus.tsx

@@ -46,7 +46,18 @@ export function SystemMenu() {
         </span>
       )}
       <Popover
-        trigger={<span className="system-icon">⚙</span>}
+        trigger={
+          <svg className="system-icon" viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
+            <path
+              d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1Z"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        }
         title="設定・システムの状態"
         buttonClassName="icon-button"
       >

web/src/components/ConnectionPanel.tsx

@@ -10,7 +10,7 @@ import { Dialog } from '../ui/Dialog'
 import { Popover } from '../ui/Popover'
 
 /**
- * ヘッダー右上のキューブ接続。未接続なら「Connect」、接続中はデバイス名とバッテリーを出し、
+ * ヘッダー右上のキューブ接続。未接続なら「接続」、接続中はデバイス名とバッテリーを出し、
  * 押すと詳細（状態リセット・切断など）を開く。
  */
 export function CubeConnectionControl() {
@@ -43,7 +43,7 @@ export function CubeConnectionControl() {
           disabled={!isWebBluetoothAvailable()}
           title={isWebBluetoothAvailable() ? 'キューブに接続' : 'Web Bluetoothが使えません（http://localhost から開いてください）'}
         >
-          Connect
+          接続
         </button>
       </div>
     )

web/src/components/PracticeRunner.tsx

@@ -58,7 +58,7 @@ export function PracticeRunner({
               {overlay?.(state)}
             </>
           )}
-          {status === 'disconnected' && <p className="muted center small">右上の「Connect」でキューブを接続すると練習できます</p>}
+          {status === 'disconnected' && <p className="muted center small">右上の「接続」でキューブを接続すると練習できます</p>}
           {error && <p className="error">{error}</p>}
         </>
       }

web/src/index.css

@@ -1459,26 +1459,28 @@ a.kind-badge:hover {
   display: inline-flex;
   align-items: center;
   gap: 5px;
-  padding: 2px 8px;
-  border: 1px solid color-mix(in srgb, var(--error) 55%, transparent);
-  border-radius: 4px;
-  color: var(--error);
-  font-size: 0.75rem;
-  font-weight: 700;
-  letter-spacing: 0.08em;
+  padding: 4px 10px;
+  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
+  border-radius: 8px;
+  color: var(--mute);
+  font-size: 0.85rem;
   line-height: 1.4;
   text-decoration: none;
   white-space: nowrap;
 }
 
 .live-link:hover {
-  background: color-mix(in srgb, var(--error) 10%, transparent);
+  color: var(--ink);
+  background: color-mix(in srgb, var(--ink) 6%, transparent);
 }
 
 .live-link.active {
+  color: var(--ink);
+  border-color: color-mix(in srgb, var(--ink) 30%, transparent);
+}
+
+.live-link.active .live-dot {
   background: var(--error);
-  border-color: var(--error);
-  color: #fff;
 }
 
 .live-dot {
@@ -1521,7 +1523,7 @@ a.kind-badge:hover {
 }
 
 .system-icon {
-  font-size: 1rem;
+  display: block;
   color: var(--mute);
 }
 

web/src/pages/AlgDrillPage.tsx

@@ -316,7 +316,7 @@ function DrillView({ c, alg, onBack, onSaved }: { c: CaseInfo; alg: string; onBa
             )}
           </section>
 
-          {status === 'disconnected' && <p className="muted center small">右上の「Connect」でキューブを接続すると練習できます</p>}
+          {status === 'disconnected' && <p className="muted center small">右上の「接続」でキューブを接続すると練習できます</p>}
 
           {settingUp && setup && setupState ? (
             <SetupPanel setup={setup} state={setupState} />
@@ -330,7 +330,7 @@ function DrillView({ c, alg, onBack, onSaved }: { c: CaseInfo; alg: string; onBa
                   ? `${state.moveCount}手`
                   : last != null
                     ? last <= targetMs
-                      ? `目標（${target}秒）以内！`
+                      ? `目標（${target}秒）以内`
                       : `目標まで ${((last - targetMs) / 1000).toFixed(2)}秒`
                     : '手順を回すと計測します'}
               </div>

web/src/pages/LivePage.tsx

@@ -12,7 +12,7 @@ import { useLiveFeed } from '../live/hooks'
 
 /**
  * 中継：キューブをつないだブラウザ（メイン）のタイマー画面を映す。見るだけで、記録も操作もしない。
- * この端末のキューブ（右上の Connect）とは別のストアに映すので、ここでキューブをつないでも混ざらない。
+ * この端末のキューブ（右上の「接続」）とは別のストアに映すので、ここでキューブをつないでも混ざらない。
  */
 export function LivePage() {
   const { kpuzzle } = useCubeStore()

web/src/pages/TimerPage.tsx

@@ -67,7 +67,7 @@ export function TimerPage() {
             </>
           )}
           {status === 'disconnected' && (
-            <p className="muted center small">右上の「Connect」でキューブを接続すると、回転を記録して保存できます</p>
+            <p className="muted center small">右上の「接続」でキューブを接続すると、回転を記録して保存できます</p>
           )}
           {saveError && <p className="error">{saveError}</p>}
         </>