KimiCodeSwitch/docs/superpowers/plans/2026-07-08-kimicode-reload-hint.md

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:

  switchReloadHint: "切换供应商后，请在 Kimi Code 中执行 /reload 以生效。",

• Step 2: Add English translation

Insert the matching key into src/i18n/en.ts:

  switchReloadHint: "After switching providers, run /reload in Kimi Code to apply the change.",

• Step 3: Commit

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:

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

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":

                    <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

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}:

          <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

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

npm run build

Expected: tsc completes without errors and Vite builds successfully.

• Step 2: Run the app

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.