193 lines
5.6 KiB
Markdown
193 lines
5.6 KiB
Markdown
# 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.
|