forked from molecule-ai/molecule-core
fix: workspace parent combobox, WCAG button text minimum 11px
Replace raw Parent Workspace ID text input with a <select> populated
from GET /workspaces (T{tier} · {name} format, graceful fallback on
fetch error). Raise all interactive button text from text-[8px]/[9px]
to text-[11px] across SkillsTab, ScheduleTab, secrets-section,
ActivityTab, SidePanel, ChatTab; non-interactive labels/badges to
text-[10px]. Adds 7 CreateWorkspaceDialog unit tests (372/372 passing).
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Dev Lead Agent
parent
b6a73d8679
commit
7cdbd0d2a8
@ -1,8 +1,14 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useState, useEffect } from "react";
|
||||
import { api } from "@/lib/api";
|
||||
|
||||
interface WorkspaceOption {
|
||||
id: string;
|
||||
name: string;
|
||||
tier: number;
|
||||
}
|
||||
|
||||
export function CreateWorkspaceButton() {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
@ -31,6 +37,13 @@ function CreateDialog({ onClose }: { onClose: () => void }) {
|
||||
const [parentId, setParentId] = useState("");
|
||||
const [creating, setCreating] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [workspaces, setWorkspaces] = useState<WorkspaceOption[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
api.get<WorkspaceOption[]>("/workspaces")
|
||||
.then((ws) => setWorkspaces(ws))
|
||||
.catch(() => {});
|
||||
}, []);
|
||||
|
||||
const handleCreate = async () => {
|
||||
if (!name.trim()) {
|
||||
@ -47,7 +60,7 @@ function CreateDialog({ onClose }: { onClose: () => void }) {
|
||||
role: role.trim() || undefined,
|
||||
template: template.trim() || undefined,
|
||||
tier,
|
||||
parent_id: parentId.trim() || undefined,
|
||||
parent_id: parentId || undefined,
|
||||
canvas: { x: Math.random() * 400 + 100, y: Math.random() * 300 + 100 },
|
||||
});
|
||||
onClose();
|
||||
@ -87,13 +100,27 @@ function CreateDialog({ onClose }: { onClose: () => void }) {
|
||||
}`}
|
||||
>
|
||||
<div className="text-xs font-mono font-semibold">{t.label}</div>
|
||||
<div className="text-[9px] mt-0.5 opacity-70">{t.desc}</div>
|
||||
<div className="text-[10px] mt-0.5 opacity-70">{t.desc}</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<InputField label="Parent Workspace ID" value={parentId} onChange={setParentId} placeholder="Leave empty for root-level" mono />
|
||||
<div>
|
||||
<label className="text-[11px] text-zinc-400 block mb-1">Parent Workspace</label>
|
||||
<select
|
||||
value={parentId}
|
||||
onChange={(e) => setParentId(e.target.value)}
|
||||
className="w-full bg-zinc-800/60 border border-zinc-700/50 rounded-lg px-3 py-2 text-sm text-zinc-100 focus:outline-none focus:border-blue-500/60 focus:ring-1 focus:ring-blue-500/20 transition-colors"
|
||||
>
|
||||
<option value="">None (root level)</option>
|
||||
{workspaces.map((ws) => (
|
||||
<option key={ws.id} value={ws.id}>
|
||||
T{ws.tier} · {ws.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
|
||||
@ -163,7 +163,7 @@ export function SidePanel() {
|
||||
onClick={() => {
|
||||
useCanvasStore.getState().restartWorkspace(selectedNodeId).catch(() => showToast("Restart failed", "error"));
|
||||
}}
|
||||
className="text-[9px] px-2 py-1 bg-sky-800/40 hover:bg-sky-700/50 text-sky-200 rounded transition-colors"
|
||||
className="text-[11px] px-2 py-1 bg-sky-800/40 hover:bg-sky-700/50 text-sky-200 rounded transition-colors"
|
||||
>
|
||||
Restart Now
|
||||
</button>
|
||||
|
||||
130
canvas/src/components/__tests__/CreateWorkspaceDialog.test.tsx
Normal file
130
canvas/src/components/__tests__/CreateWorkspaceDialog.test.tsx
Normal file
@ -0,0 +1,130 @@
|
||||
// @vitest-environment jsdom
|
||||
import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
|
||||
import { render, screen, fireEvent, waitFor, cleanup } from "@testing-library/react";
|
||||
import { CreateWorkspaceButton } from "../CreateWorkspaceDialog";
|
||||
|
||||
vi.mock("@/lib/api", () => ({
|
||||
api: {
|
||||
get: vi.fn(),
|
||||
post: vi.fn(),
|
||||
},
|
||||
}));
|
||||
|
||||
import { api } from "@/lib/api";
|
||||
|
||||
const mockGet = vi.mocked(api.get);
|
||||
const mockPost = vi.mocked(api.post);
|
||||
|
||||
const SAMPLE_WORKSPACES = [
|
||||
{ id: "ws-1", name: "Platform Team", tier: 1 },
|
||||
{ id: "ws-2", name: "Research Agent", tier: 2 },
|
||||
];
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
mockGet.mockResolvedValue(SAMPLE_WORKSPACES as any);
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
mockPost.mockResolvedValue({} as any);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
cleanup();
|
||||
});
|
||||
|
||||
async function openDialog() {
|
||||
render(<CreateWorkspaceButton />);
|
||||
const btn = screen.getAllByRole("button").find((b) => b.textContent?.includes("New Workspace"));
|
||||
expect(btn).toBeTruthy();
|
||||
fireEvent.click(btn!);
|
||||
await waitFor(() => expect(screen.getByText("Create Workspace")).toBeTruthy());
|
||||
}
|
||||
|
||||
describe("CreateWorkspaceDialog", () => {
|
||||
it("opens the dialog when New Workspace button is clicked", async () => {
|
||||
await openDialog();
|
||||
expect(screen.getByText("Create Workspace")).toBeTruthy();
|
||||
});
|
||||
|
||||
it("renders a <select> for parent workspace — not a text input", async () => {
|
||||
await openDialog();
|
||||
const selects = document.querySelectorAll("select");
|
||||
expect(selects.length).toBeGreaterThanOrEqual(1);
|
||||
// The old raw UUID text input is gone
|
||||
expect(screen.queryByPlaceholderText("Leave empty for root-level")).toBeNull();
|
||||
});
|
||||
|
||||
it('first option is "None (root level)" with empty value', async () => {
|
||||
await openDialog();
|
||||
const select = document.querySelector("select") as HTMLSelectElement;
|
||||
expect(select).toBeTruthy();
|
||||
const firstOption = select.options[0];
|
||||
expect(firstOption.value).toBe("");
|
||||
expect(firstOption.text.trim()).toBe("None (root level)");
|
||||
});
|
||||
|
||||
it("populates select with workspace names from GET /workspaces", async () => {
|
||||
await openDialog();
|
||||
await waitFor(() => {
|
||||
const select = document.querySelector("select") as HTMLSelectElement;
|
||||
const optionValues = Array.from(select.options).map((o) => o.value);
|
||||
expect(optionValues).toContain("ws-1");
|
||||
expect(optionValues).toContain("ws-2");
|
||||
});
|
||||
const select = document.querySelector("select") as HTMLSelectElement;
|
||||
const optionTexts = Array.from(select.options).map((o) => o.text.trim());
|
||||
expect(optionTexts.some((t) => t.includes("Platform Team"))).toBe(true);
|
||||
expect(optionTexts.some((t) => t.includes("Research Agent"))).toBe(true);
|
||||
});
|
||||
|
||||
it("sends parent_id in POST body when a workspace is selected", async () => {
|
||||
await openDialog();
|
||||
await waitFor(() => {
|
||||
const select = document.querySelector("select") as HTMLSelectElement;
|
||||
expect(select.options.length).toBeGreaterThan(1);
|
||||
});
|
||||
|
||||
fireEvent.change(screen.getByPlaceholderText("e.g. SEO Agent"), {
|
||||
target: { value: "My Agent" },
|
||||
});
|
||||
|
||||
const select = document.querySelector("select") as HTMLSelectElement;
|
||||
fireEvent.change(select, { target: { value: "ws-1" } });
|
||||
|
||||
const createBtn = screen.getAllByRole("button").find((b) => b.textContent === "Create");
|
||||
fireEvent.click(createBtn!);
|
||||
|
||||
await waitFor(() => expect(mockPost).toHaveBeenCalled());
|
||||
const body = mockPost.mock.calls[0][1] as Record<string, unknown>;
|
||||
expect(body.parent_id).toBe("ws-1");
|
||||
});
|
||||
|
||||
it("sends parent_id as undefined when None (root level) is selected", async () => {
|
||||
await openDialog();
|
||||
fireEvent.change(screen.getByPlaceholderText("e.g. SEO Agent"), {
|
||||
target: { value: "Root Agent" },
|
||||
});
|
||||
|
||||
const select = document.querySelector("select") as HTMLSelectElement;
|
||||
fireEvent.change(select, { target: { value: "" } });
|
||||
|
||||
const createBtn = screen.getAllByRole("button").find((b) => b.textContent === "Create");
|
||||
fireEvent.click(createBtn!);
|
||||
|
||||
await waitFor(() => expect(mockPost).toHaveBeenCalled());
|
||||
const body = mockPost.mock.calls[0][1] as Record<string, unknown>;
|
||||
expect(body.parent_id).toBeUndefined();
|
||||
});
|
||||
|
||||
it("renders gracefully when GET /workspaces fails", async () => {
|
||||
mockGet.mockRejectedValueOnce(new Error("Network error"));
|
||||
await openDialog();
|
||||
|
||||
// Dialog still renders; select exists with only the root option
|
||||
await waitFor(() => {
|
||||
const select = document.querySelector("select") as HTMLSelectElement;
|
||||
expect(select.options.length).toBe(1);
|
||||
expect(select.options[0].value).toBe("");
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -80,7 +80,7 @@ export function ActivityTab({ workspaceId }: Props) {
|
||||
<button
|
||||
key={f.id}
|
||||
onClick={() => setFilter(f.id)}
|
||||
className={`px-2 py-1 text-[9px] rounded-md font-medium transition-all ${
|
||||
className={`px-2 py-1 text-[11px] rounded-md font-medium transition-all ${
|
||||
filter === f.id
|
||||
? "bg-zinc-700 text-zinc-100 ring-1 ring-zinc-600"
|
||||
: "text-zinc-500 hover:text-zinc-300 hover:bg-zinc-800/60"
|
||||
@ -92,7 +92,7 @@ export function ActivityTab({ workspaceId }: Props) {
|
||||
<div className="ml-auto flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => setAutoRefresh(!autoRefresh)}
|
||||
className={`text-[9px] px-1.5 py-0.5 rounded ${
|
||||
className={`text-[11px] px-1.5 py-0.5 rounded ${
|
||||
autoRefresh ? "text-emerald-400 bg-emerald-950/30" : "text-zinc-500"
|
||||
}`}
|
||||
title={autoRefresh ? "Auto-refresh ON" : "Auto-refresh OFF"}
|
||||
@ -101,20 +101,20 @@ export function ActivityTab({ workspaceId }: Props) {
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setTraceOpen(true)}
|
||||
className="px-2 py-1 bg-blue-900/40 hover:bg-blue-800/50 text-[9px] rounded text-blue-300 border border-blue-800/30"
|
||||
className="px-2 py-1 bg-blue-900/40 hover:bg-blue-800/50 text-[11px] rounded text-blue-300 border border-blue-800/30"
|
||||
title="View full conversation trace across all workspaces"
|
||||
>
|
||||
Full Trace
|
||||
</button>
|
||||
<button
|
||||
onClick={loadActivities}
|
||||
className="px-2 py-1 bg-zinc-700 hover:bg-zinc-600 text-[9px] rounded text-zinc-300"
|
||||
className="px-2 py-1 bg-zinc-700 hover:bg-zinc-600 text-[11px] rounded text-zinc-300"
|
||||
>
|
||||
Refresh
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-1.5 text-[9px] text-zinc-500">
|
||||
<div className="mt-1.5 text-[10px] text-zinc-500">
|
||||
{activities.length} {filter === "all" ? "activities" : filter.replace("_", " ") + " entries"}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -395,7 +395,7 @@ function MyChatPanel({ workspaceId, data }: Props) {
|
||||
{!isOnline && (
|
||||
<button
|
||||
onClick={() => setConfirmRestart(true)}
|
||||
className="text-[9px] px-2 py-0.5 bg-red-800/40 text-red-300 rounded hover:bg-red-700/50"
|
||||
className="text-[11px] px-2 py-0.5 bg-red-800/40 text-red-300 rounded hover:bg-red-700/50"
|
||||
>
|
||||
Restart
|
||||
</button>
|
||||
|
||||
@ -179,7 +179,7 @@ export function ScheduleTab({ workspaceId }: Props) {
|
||||
</span>
|
||||
<button
|
||||
onClick={() => { resetForm(); setShowForm(true); }}
|
||||
className="text-[9px] px-2 py-0.5 bg-blue-600/20 text-blue-400 rounded hover:bg-blue-600/30 transition-colors"
|
||||
className="text-[11px] px-2 py-0.5 bg-blue-600/20 text-blue-400 rounded hover:bg-blue-600/30 transition-colors"
|
||||
>
|
||||
+ Add Schedule
|
||||
</button>
|
||||
@ -197,23 +197,23 @@ export function ScheduleTab({ workspaceId }: Props) {
|
||||
/>
|
||||
<div className="flex gap-2">
|
||||
<div className="flex-1">
|
||||
<label className="text-[8px] text-zinc-500 block mb-0.5">Cron Expression</label>
|
||||
<label className="text-[10px] text-zinc-500 block mb-0.5">Cron Expression</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formCron}
|
||||
onChange={(e) => setFormCron(e.target.value)}
|
||||
className="w-full text-[10px] bg-zinc-800 border border-zinc-700 rounded px-2 py-1 text-zinc-200 font-mono"
|
||||
/>
|
||||
<div className="text-[8px] text-zinc-600 mt-0.5">
|
||||
<div className="text-[10px] text-zinc-600 mt-0.5">
|
||||
{cronToHuman(formCron)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-24">
|
||||
<label className="text-[8px] text-zinc-500 block mb-0.5">Timezone</label>
|
||||
<label className="text-[10px] text-zinc-500 block mb-0.5">Timezone</label>
|
||||
<select
|
||||
value={formTimezone}
|
||||
onChange={(e) => setFormTimezone(e.target.value)}
|
||||
className="w-full text-[9px] bg-zinc-800 border border-zinc-700 rounded px-1 py-1 text-zinc-200"
|
||||
className="w-full text-[10px] bg-zinc-800 border border-zinc-700 rounded px-1 py-1 text-zinc-200"
|
||||
>
|
||||
<option value="UTC">UTC</option>
|
||||
<option value="America/New_York">US Eastern</option>
|
||||
@ -229,7 +229,7 @@ export function ScheduleTab({ workspaceId }: Props) {
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-[8px] text-zinc-500 block mb-0.5">Prompt / Task</label>
|
||||
<label className="text-[10px] text-zinc-500 block mb-0.5">Prompt / Task</label>
|
||||
<textarea
|
||||
value={formPrompt}
|
||||
onChange={(e) => setFormPrompt(e.target.value)}
|
||||
@ -239,7 +239,7 @@ export function ScheduleTab({ workspaceId }: Props) {
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<label className="flex items-center gap-1.5 text-[9px] text-zinc-400 cursor-pointer">
|
||||
<label className="flex items-center gap-1.5 text-[10px] text-zinc-400 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={formEnabled}
|
||||
@ -249,23 +249,23 @@ export function ScheduleTab({ workspaceId }: Props) {
|
||||
Enabled
|
||||
</label>
|
||||
</div>
|
||||
{error && <div className="text-[9px] text-red-400">{error}</div>}
|
||||
{error && <div className="text-[10px] text-red-400">{error}</div>}
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
disabled={!formCron || !formPrompt}
|
||||
className="text-[9px] px-3 py-1 bg-blue-600 text-white rounded hover:bg-blue-500 disabled:opacity-40 transition-colors"
|
||||
className="text-[11px] px-3 py-1 bg-blue-600 text-white rounded hover:bg-blue-500 disabled:opacity-40 transition-colors"
|
||||
>
|
||||
{editId ? "Update" : "Create"}
|
||||
</button>
|
||||
<button
|
||||
onClick={resetForm}
|
||||
className="text-[9px] px-3 py-1 bg-zinc-800 text-zinc-400 rounded hover:bg-zinc-700 transition-colors"
|
||||
className="text-[11px] px-3 py-1 bg-zinc-800 text-zinc-400 rounded hover:bg-zinc-700 transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
<div className="text-[8px] text-zinc-600 space-y-0.5">
|
||||
<div className="text-[10px] text-zinc-600 space-y-0.5">
|
||||
<div>Common patterns:</div>
|
||||
<div className="font-mono">{"0 9 * * *"} — Daily at 9:00 AM</div>
|
||||
<div className="font-mono">{"*/30 * * * *"} — Every 30 minutes</div>
|
||||
@ -334,21 +334,21 @@ export function ScheduleTab({ workspaceId }: Props) {
|
||||
<div className="flex items-center gap-1 flex-shrink-0">
|
||||
<button
|
||||
onClick={() => handleRunNow(sched)}
|
||||
className="text-[8px] px-1.5 py-0.5 text-blue-400 hover:bg-blue-600/20 rounded transition-colors"
|
||||
className="text-[11px] px-1.5 py-0.5 text-blue-400 hover:bg-blue-600/20 rounded transition-colors"
|
||||
title="Run now"
|
||||
>
|
||||
▶
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleEdit(sched)}
|
||||
className="text-[8px] px-1.5 py-0.5 text-zinc-400 hover:bg-zinc-700 rounded transition-colors"
|
||||
className="text-[11px] px-1.5 py-0.5 text-zinc-400 hover:bg-zinc-700 rounded transition-colors"
|
||||
title="Edit"
|
||||
>
|
||||
✎
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setPendingDelete({ id: sched.id, name: sched.name })}
|
||||
className="text-[8px] px-1.5 py-0.5 text-red-400 hover:bg-red-600/20 rounded transition-colors"
|
||||
className="text-[11px] px-1.5 py-0.5 text-red-400 hover:bg-red-600/20 rounded transition-colors"
|
||||
title="Delete"
|
||||
>
|
||||
✕
|
||||
|
||||
@ -175,9 +175,9 @@ export function SkillsTab({ data }: Props) {
|
||||
<div className="min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-[11px] font-medium text-zinc-200">{p.name}</span>
|
||||
{p.version && <span className="text-[9px] text-zinc-600">v{p.version}</span>}
|
||||
{p.version && <span className="text-[10px] text-zinc-600">v{p.version}</span>}
|
||||
{inert && (
|
||||
<span className="rounded-full border border-amber-700/50 bg-amber-950/30 px-1.5 py-0.5 text-[8px] text-amber-300">
|
||||
<span className="rounded-full border border-amber-700/50 bg-amber-950/30 px-1.5 py-0.5 text-[10px] text-amber-300">
|
||||
inert on this runtime
|
||||
</span>
|
||||
)}
|
||||
@ -186,10 +186,10 @@ export function SkillsTab({ data }: Props) {
|
||||
{p.skills && p.skills.length > 0 && (
|
||||
<div className="mt-1 flex flex-wrap gap-1">
|
||||
{p.skills.slice(0, 4).map((s) => (
|
||||
<span key={s} className="rounded-full bg-zinc-800/60 px-1.5 py-0.5 text-[8px] text-zinc-400">{s}</span>
|
||||
<span key={s} className="rounded-full bg-zinc-800/60 px-1.5 py-0.5 text-[10px] text-zinc-400">{s}</span>
|
||||
))}
|
||||
{p.skills.length > 4 && (
|
||||
<span className="text-[8px] text-zinc-600">+{p.skills.length - 4}</span>
|
||||
<span className="text-[10px] text-zinc-600">+{p.skills.length - 4}</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
@ -197,7 +197,7 @@ export function SkillsTab({ data }: Props) {
|
||||
<button
|
||||
onClick={() => handleUninstall(p.name)}
|
||||
disabled={uninstalling === p.name}
|
||||
className="shrink-0 rounded-full border border-red-800/40 bg-red-950/20 px-2 py-0.5 text-[9px] text-red-400 hover:bg-red-900/30 disabled:opacity-30"
|
||||
className="shrink-0 rounded-full border border-red-800/40 bg-red-950/20 px-2 py-0.5 text-[11px] text-red-400 hover:bg-red-900/30 disabled:opacity-30"
|
||||
>
|
||||
{uninstalling === p.name ? "..." : "Remove"}
|
||||
</button>
|
||||
@ -213,7 +213,7 @@ export function SkillsTab({ data }: Props) {
|
||||
{/* Install from any source (github://, clawhub://, …) */}
|
||||
<div className="mb-3 rounded-lg border border-zinc-800/60 bg-zinc-950/40 p-2.5">
|
||||
<div className="flex items-center justify-between gap-2 mb-1.5">
|
||||
<div className="text-[9px] uppercase tracking-[0.2em] text-zinc-600">
|
||||
<div className="text-[10px] uppercase tracking-[0.2em] text-zinc-600">
|
||||
Install from source
|
||||
</div>
|
||||
{sourceSchemes.length > 0 && (
|
||||
@ -221,7 +221,7 @@ export function SkillsTab({ data }: Props) {
|
||||
{sourceSchemes.map((s) => (
|
||||
<span
|
||||
key={s}
|
||||
className="rounded-full border border-zinc-700/50 bg-zinc-900/50 px-1.5 py-0.5 text-[8px] text-zinc-500"
|
||||
className="rounded-full border border-zinc-700/50 bg-zinc-900/50 px-1.5 py-0.5 text-[10px] text-zinc-500"
|
||||
>
|
||||
{s}://
|
||||
</span>
|
||||
@ -244,16 +244,16 @@ export function SkillsTab({ data }: Props) {
|
||||
<button
|
||||
onClick={handleInstallCustom}
|
||||
disabled={!customSource.trim() || installing !== null}
|
||||
className="shrink-0 rounded-full border border-violet-700/50 bg-violet-950/30 px-2.5 py-1 text-[9px] text-violet-300 hover:bg-violet-900/40 disabled:opacity-30"
|
||||
className="shrink-0 rounded-full border border-violet-700/50 bg-violet-950/30 px-2.5 py-1 text-[11px] text-violet-300 hover:bg-violet-900/40 disabled:opacity-30"
|
||||
>
|
||||
{installing === customSource.trim() ? "Installing..." : "Install"}
|
||||
</button>
|
||||
</div>
|
||||
<div className="mt-1 text-[9px] text-zinc-600">
|
||||
<div className="mt-1 text-[10px] text-zinc-600">
|
||||
Local registry plugins below; paste any scheme URL above for GitHub or other sources.
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-[9px] uppercase tracking-[0.2em] text-zinc-600 mb-2">Available plugins</div>
|
||||
<div className="text-[10px] uppercase tracking-[0.2em] text-zinc-600 mb-2">Available plugins</div>
|
||||
{registry.length === 0 ? (
|
||||
<div className="text-[10px] text-zinc-600">No plugins in registry</div>
|
||||
) : (
|
||||
@ -265,31 +265,31 @@ export function SkillsTab({ data }: Props) {
|
||||
<div className="min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-[11px] text-zinc-300">{p.name}</span>
|
||||
{p.version && <span className="text-[9px] text-zinc-600">v{p.version}</span>}
|
||||
{p.version && <span className="text-[10px] text-zinc-600">v{p.version}</span>}
|
||||
</div>
|
||||
{p.description && <div className="text-[10px] text-zinc-500 truncate">{p.description}</div>}
|
||||
{p.tags && p.tags.length > 0 && (
|
||||
<div className="mt-1 flex flex-wrap gap-1">
|
||||
{p.tags.map((t) => (
|
||||
<span key={t} className="rounded-full border border-zinc-700/40 px-1.5 py-0.5 text-[8px] text-zinc-500">{t}</span>
|
||||
<span key={t} className="rounded-full border border-zinc-700/40 px-1.5 py-0.5 text-[10px] text-zinc-500">{t}</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{p.runtimes && p.runtimes.length > 0 && (
|
||||
<div className="mt-1 flex flex-wrap gap-1">
|
||||
{p.runtimes.map((r) => (
|
||||
<span key={r} className="rounded-full border border-blue-800/40 bg-blue-950/20 px-1.5 py-0.5 text-[8px] text-blue-300">{r}</span>
|
||||
<span key={r} className="rounded-full border border-blue-800/40 bg-blue-950/20 px-1.5 py-0.5 text-[10px] text-blue-300">{r}</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{isInstalled ? (
|
||||
<span className="shrink-0 text-[9px] text-emerald-500">Installed</span>
|
||||
<span className="shrink-0 text-[10px] text-emerald-500">Installed</span>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => handleInstall(p.name)}
|
||||
disabled={installing === p.name}
|
||||
className="shrink-0 rounded-full border border-violet-700/50 bg-violet-950/30 px-2.5 py-0.5 text-[9px] text-violet-300 hover:bg-violet-900/40 disabled:opacity-30"
|
||||
className="shrink-0 rounded-full border border-violet-700/50 bg-violet-950/30 px-2.5 py-0.5 text-[11px] text-violet-300 hover:bg-violet-900/40 disabled:opacity-30"
|
||||
>
|
||||
{installing === p.name ? "Installing..." : "Install"}
|
||||
</button>
|
||||
|
||||
@ -65,12 +65,12 @@ function SecretRow({ label, secretKey, isSet, scope, globalMode, onSave, onDelet
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
{isSet && <span className="text-[8px] text-green-500 bg-green-900/30 px-1.5 py-0.5 rounded">Set</span>}
|
||||
{isSet && <span className="text-[10px] text-green-500 bg-green-900/30 px-1.5 py-0.5 rounded">Set</span>}
|
||||
{scope && <ScopeBadge scope={scope} />}
|
||||
{!editing && isSet && (globalMode || scope !== "global") && (
|
||||
<button onClick={onDelete} className="text-[9px] text-red-400 hover:text-red-300">Remove</button>
|
||||
<button onClick={onDelete} className="text-[11px] text-red-400 hover:text-red-300">Remove</button>
|
||||
)}
|
||||
<button onClick={() => setEditing(!editing)} className="text-[9px] text-blue-400 hover:text-blue-300">
|
||||
<button onClick={() => setEditing(!editing)} className="text-[11px] text-blue-400 hover:text-blue-300">
|
||||
{actionLabel()}
|
||||
</button>
|
||||
</div>
|
||||
@ -117,13 +117,13 @@ function CustomSecretRow({ secretKey, scope, globalMode, onSave, onDelete }: {
|
||||
<span className="text-[9px] font-mono text-zinc-500 tracking-widest ml-2">•••••</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
<span className="text-[8px] text-green-500">Set</span>
|
||||
<span className="text-[10px] text-green-500">Set</span>
|
||||
{!globalMode && <ScopeBadge scope={scope} />}
|
||||
{canDelete && !editing && (
|
||||
<button onClick={onDelete} className="text-[9px] text-red-400 hover:text-red-300">Remove</button>
|
||||
<button onClick={onDelete} className="text-[11px] text-red-400 hover:text-red-300">Remove</button>
|
||||
)}
|
||||
{(canDelete || showOverride) && (
|
||||
<button onClick={() => setEditing(!editing)} className="text-[9px] text-blue-400 hover:text-blue-300">
|
||||
<button onClick={() => setEditing(!editing)} className="text-[11px] text-blue-400 hover:text-blue-300">
|
||||
{editing ? "Cancel" : showOverride ? "Override" : "Update"}
|
||||
</button>
|
||||
)}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user