docs: add design specs and implementation plans for reload hint and global settings panel

2026-07-09 08:41:28 +08:00
parent 675e8ba24d
commit 3b12844342
4 changed files with 1429 additions and 0 deletions
@@ -0,0 +1,192 @@
+# Kimi Code /reload Hint Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Add an info icon tooltip next to the "switch provider" button, visible only in the Kimi Code tab, reminding users to run `/reload` after switching providers.
+
+**Architecture:** Extend `ProviderList` to receive the current `agent` and conditionally render a hint icon beside the switch button. Keep changes minimal and UI-only; no state or backend changes.
+
+**Tech Stack:** React 18, TypeScript, Tailwind CSS, custom i18n module (`src/i18n`).
+
+---
+
+### Task 1: Add i18n translation keys
+
+**Files:**
+- Modify: `src/i18n/zh.ts`
+- Modify: `src/i18n/en.ts`
+
+- [ ] **Step 1: Add Chinese translation**
+
+Insert `switchReloadHint` into the "Provider list" section of `src/i18n/zh.ts`, e.g. after `switchTo`:
+
+```ts
+  switchReloadHint: "切换供应商后，请在 Kimi Code 中执行 /reload 以生效。",
+```
+
+- [ ] **Step 2: Add English translation**
+
+Insert the matching key into `src/i18n/en.ts`:
+
+```ts
+  switchReloadHint: "After switching providers, run /reload in Kimi Code to apply the change.",
+```
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add src/i18n/zh.ts src/i18n/en.ts
+git commit -m "i18n: add switchReloadHint for Kimi Code reload reminder"
+```
+
+---
+
+### Task 2: Update ProviderList to accept agent and render hint
+
+**Files:**
+- Modify: `src/components/ProviderList.tsx`
+
+- [ ] **Step 1: Import Agent type and update props**
+
+Add `Agent` to the import from `../types` and add `agent` to `ProviderListProps`:
+
+```tsx
+import { useTranslation } from "../i18n";
+import type { Agent, Model, Provider } from "../types";
+
+interface ProviderListProps {
+  providers: Provider[];
+  defaultModel: string | null;
+  models: Record<string, Model>;
+  onEdit: (name: string) => void;
+  onDelete: (name: string) => void;
+  onAdd: () => void;
+  onSwitchProvider: (name: string) => void;
+  agent: Agent;
+}
+```
+
+- [ ] **Step 2: Destructure agent in component signature**
+
+```tsx
+export function ProviderList({
+  providers,
+  defaultModel,
+  models,
+  onEdit,
+  onDelete,
+  onAdd,
+  onSwitchProvider,
+  agent,
+}: ProviderListProps) {
+```
+
+- [ ] **Step 3: Render hint icon next to the switch button**
+
+In the supplier card actions area, place an info icon immediately after the "切换使用" / "Switch to" button, rendered only when `agent === "kimi_code"`:
+
+```tsx
+                    <button
+                      type="button"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        onSwitchProvider(provider.name);
+                      }}
+                      className={`px-3 py-1.5 text-sm rounded focus:ring-2 focus:outline-none ${
+                        isActive
+                          ? "bg-green-600 hover:bg-green-700 text-white focus:ring-green-500"
+                          : "bg-blue-600 hover:bg-blue-700 text-white focus:ring-blue-500"
+                      }`}
+                    >
+                      {isActive ? t("inUse") : t("switchTo")}
+                    </button>
+                    {agent === "kimi_code" && (
+                      <span
+                        className="text-sm text-gray-500 hover:text-gray-300 cursor-help select-none"
+                        title={t("switchReloadHint")}
+                        aria-label={t("switchReloadHint")}
+                      >
+                        ⓘ
+                      </span>
+                    )}
+```
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add src/components/ProviderList.tsx
+git commit -m "feat: show /reload hint next to switch provider button in Kimi Code tab"
+```
+
+---
+
+### Task 3: Pass agent from App to ProviderList
+
+**Files:**
+- Modify: `src/App.tsx`
+
+- [ ] **Step 1: Add agent prop to ProviderList usage**
+
+Locate the `<ProviderList ... />` call in `src/App.tsx` and add `agent={agent}`:
+
+```tsx
+          <ProviderList
+            providers={providers}
+            defaultModel={config.default_model}
+            models={config.models}
+            onEdit={(name) => {
+              setEditingProvider(name);
+              setView("edit");
+            }}
+            onDelete={handleDeleteProvider}
+            onAdd={handleAddProvider}
+            onSwitchProvider={handleSwitchProvider}
+            agent={agent}
+          />
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add src/App.tsx
+git commit -m "chore: pass current agent to ProviderList"
+```
+
+---
+
+### Task 4: Verify with type check and manual test
+
+- [ ] **Step 1: Run TypeScript compilation**
+
+```bash
+npm run build
+```
+
+Expected: `tsc` completes without errors and Vite builds successfully.
+
+- [ ] **Step 2: Run the app**
+
+```bash
+npm run tauri-dev
+```
+
+- [ ] **Step 3: Manual verification**
+
+1. Select the **Kimi Code** tab.
+2. Hover over the `ⓘ` icon next to any provider's "切换使用" / "Switch to" button.
+3. Confirm the tooltip reads:  
+   - 中文：`切换供应商后，请在 Kimi Code 中执行 /reload 以生效。`  
+   - English: `After switching providers, run /reload in Kimi Code to apply the change.`
+4. Switch to the **Pi** tab and confirm the `ⓘ` icon is **not** present.
+
+- [ ] **Step 4: Commit verification notes (optional)**
+
+If any fixes were needed, commit them; otherwise no additional commit is required.
+
+---
+
+## Self-Review
+
+- **Spec coverage:** Every design requirement (icon next to switch button, Kimi Code only, i18n, no new dependencies) maps to a task above.
+- **Placeholder scan:** No TBD/TODO/fill-in-details present.
+- **Type consistency:** `Agent` type is imported from `../types` and used consistently in props and conditional rendering.