kcg-code 0.0.0-stage → 0.2.0

package/src/components/projects/ProjectSidePanel.tsx

@@ -0,0 +1,514 @@
+/**
+ * Panel samping halaman Project — Instructions, MCP server, dan Skills dalam
+ * satu kolom di kanan daftar Session.
+ *
+ * Gaya libadwaita (GNOME Settings), memakai primitif `settings/prefs`:
+ * tiap seksi = AdwPreferencesGroup (judul + deskripsi di luar kotak, aksi
+ * datar di kanan judul) berisi "boxed list". Baris = AdwActionRow /
+ * AdwExpanderRow; kolom cari & filter (GtkSearchEntry, AdwToggleGroup) ada di
+ * antara judul dan kotak.
+ *
+ * MCP & Skills dibaca dari KEDUA agent (OpenCode & Claude Code) lalu
+ * digabung per nama, sama seperti halaman Skills:
+ * - MCP: `GET /api/projects/:id/mcp?agent=` — status per agent (logo +
+ *   label) di subjudul; yang bermasalah paling atas, error tampil inline.
+ *   Server Claude Code dibaca dari config (`.mcp.json`, `~/.claude.json`);
+ *   statusnya "Not checked" sampai ada Session Claude Code yang berjalan.
+ * - Skills: `GET /api/projects/:id/skills?agent=` — cari (bila banyak) +
+ *   filter asal; logo agent yang memuat skill; baris dibuka untuk deskripsi
+ *   lengkap & path. Tombol "+" membuka halaman Skills untuk Project ini.
+ * Satu agent gagal dibaca tidak menggagalkan yang lain (baris catatan).
+ * Tiap seksi memuat datanya sendiri; tombol reload memuat ulang keduanya.
+ */
+import { PlugIcon, PlusIcon, RefreshCwIcon, SparklesIcon, TriangleAlertIcon } from "lucide-react";
+import { type ReactNode, useCallback, useEffect, useMemo, useState } from "react";
+import { ProjectInstructions } from "@/components/projects/ProjectInstructions";
+import { AgentLogo } from "@/components/sessions/AgentLogo";
+import { ActionRow, ExpanderRow, PrefsGroup, RowBadge } from "@/components/settings/prefs";
+import { AgentBadges } from "@/components/skills/SkillCards";
+import { AdwToggleGroup } from "@/components/ui/adw-toggle-group";
+import { Button } from "@/components/ui/button";
+import { SearchEntry } from "@/components/ui/search-entry";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useRouter } from "@/hooks/useRouter";
+import { AGENT_TYPE_LABELS, AGENT_TYPES, agentQuery } from "@/lib/agent-types";
+import { ApiError, apiFetch } from "@/lib/api";
+import {
+  describeMcpEntries,
+  filterSkills,
+  groupSkills,
+  MCP_STATUS_LABEL,
+  type McpServerEntry,
+  mergeMcpServers,
+} from "@/lib/project-extensions";
+import { skillsPath } from "@/lib/routes";
+import { type InstalledSkill, mergeInstalledSkills } from "@/lib/skills-catalog";
+import { cn } from "@/lib/utils";
+import type { McpServerInfo, SkillInfo, SkillSource } from "@/server/services/opencode-client";
+import type { AgentType, McpServerState, Project } from "@/types";
+
+/** Skill ditampilkan terbatas dulu; sisanya lewat "Show more". */
+const SKILL_PREVIEW = 5;
+/** Kolom cari muncul hanya bila skill cukup banyak. */
+const SKILL_SEARCH_THRESHOLD = 8;
+
+/** Hasil per agent; `failed` = agent yang gagal dibaca (yang lain tetap tampil). */
+interface AgentLists<T> {
+  byAgent: Partial<Record<AgentType, T[]>>;
+  failed: { agent: AgentType; message: string }[];
+}
+
+type Load<T> =
+  | { phase: "loading" }
+  | { phase: "error"; message: string }
+  | { phase: "ready"; data: T };
+
+/**
+ * Muat satu endpoint list untuk setiap agent (`?agent=`) bersamaan.
+ * Error hanya bila SEMUA agent gagal. `reloadKey` berubah -> muat ulang.
+ */
+function useAgentLists<T>(path: string, key: string, reloadKey: number): Load<AgentLists<T>> {
+  const [state, setState] = useState<Load<AgentLists<T>>>({ phase: "loading" });
+  useEffect(() => {
+    // `reloadKey` hanya pemicu muat ulang.
+    void reloadKey;
+    let cancelled = false;
+    setState({ phase: "loading" });
+    void Promise.allSettled(
+      AGENT_TYPES.map((a) =>
+        apiFetch(`${path}${agentQuery(a)}`).then(async (res) => {
+          const body = (await res.json()) as Record<string, T[]>;
+          return body[key] ?? [];
+        }),
+      ),
+    ).then((results) => {
+      if (cancelled) return;
+      const data: AgentLists<T> = { byAgent: {}, failed: [] };
+      results.forEach((r, i) => {
+        const agent = AGENT_TYPES[i] as AgentType;
+        if (r.status === "fulfilled") data.byAgent[agent] = r.value;
+        else {
+          const message = r.reason instanceof ApiError ? r.reason.message : "Failed to load";
+          data.failed.push({ agent, message });
+        }
+      });
+      if (data.failed.length === AGENT_TYPES.length) {
+        setState({ phase: "error", message: data.failed[0]?.message ?? "Failed to load" });
+      } else {
+        setState({ phase: "ready", data });
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [path, key, reloadKey]);
+  return state;
+}
+
+export interface ProjectSidePanelProps {
+  project: Project;
+  onProjectChange: (project: Project) => void;
+}
+
+export function ProjectSidePanel({ project, onProjectChange }: ProjectSidePanelProps) {
+  const [reloadKey, setReloadKey] = useState(0);
+  const reload = useCallback(() => setReloadKey((k) => k + 1), []);
+  const mcp = useAgentLists<McpServerInfo>(`/api/projects/${project.id}/mcp`, "mcp", reloadKey);
+  const skills = useAgentLists<SkillInfo>(
+    `/api/projects/${project.id}/skills`,
+    "skills",
+    reloadKey,
+  );
+
+  return (
+    <div className="flex flex-col gap-6">
+      <ProjectInstructions project={project} onSaved={onProjectChange} />
+      <McpGroup state={mcp} onReload={reload} />
+      <SkillsGroup state={skills} projectId={project.id} />
+    </div>
+  );
+}
+
+// ------------------------------------------------------------- shared ----
+
+/** Tombol datar bundar di kanan judul grup (aksi header AdwPreferencesGroup). */
+function FlatIconButton({
+  label,
+  onClick,
+  disabled,
+  children,
+}: {
+  label: string;
+  onClick: () => void;
+  disabled?: boolean;
+  children: ReactNode;
+}) {
+  return (
+    <Button
+      type="button"
+      variant="ghost"
+      size="icon"
+      onClick={onClick}
+      disabled={disabled}
+      aria-label={label}
+      title={label}
+      className="size-8 rounded-full text-foreground/80"
+    >
+      {children}
+    </Button>
+  );
+}
+
+/** Baris placeholder saat memuat — tinggi sama dengan ActionRow. */
+function SkeletonRows({ rows }: { rows: number }) {
+  return Array.from({ length: rows }, (_, i) => (
+    // biome-ignore lint/suspicious/noArrayIndexKey: placeholder statis
+    <li key={i} className="flex min-h-14 flex-col justify-center gap-1.5 px-4 py-2.5" aria-hidden>
+      <Skeleton className="h-4" style={{ width: `${60 - i * 12}%` }} />
+      <Skeleton className="h-3 w-1/3" />
+    </li>
+  ));
+}
+
+/** Baris error dengan tombol coba lagi. */
+function ErrorRow({ message, onRetry }: { message: string; onRetry?: () => void }) {
+  return (
+    <ActionRow
+      prefix={<TriangleAlertIcon className="size-[18px] text-destructive" aria-hidden />}
+      title="Couldn't load"
+      subtitle={message}
+      suffix={
+        onRetry && (
+          <Button type="button" variant="outline" size="sm" onClick={onRetry}>
+            Retry
+          </Button>
+        )
+      }
+    />
+  );
+}
+
+/** Baris catatan bila sebagian agent gagal dibaca. */
+function PartialFailureRow({ failed }: { failed: AgentLists<unknown>["failed"] }) {
+  if (failed.length === 0) return null;
+  return (
+    <ActionRow
+      prefix={
+        <TriangleAlertIcon className="size-[18px] text-amber-600 dark:text-amber-400" aria-hidden />
+      }
+      title={`Couldn't read ${failed.map((f) => AGENT_TYPE_LABELS[f.agent]).join(", ")}`}
+      subtitle={failed[0]?.message}
+    />
+  );
+}
+
+// ---------------------------------------------------------------- MCP ----
+
+/** Warna teks status MCP per agent. */
+const MCP_TEXT: Record<McpServerState["status"], string> = {
+  connected: "text-emerald-700 dark:text-emerald-400",
+  failed: "text-destructive",
+  needs_auth: "text-amber-700 dark:text-amber-400",
+  needs_client_registration: "text-amber-700 dark:text-amber-400",
+  disabled: "text-muted-foreground",
+  unknown: "text-muted-foreground",
+};
+
+/** Warna ikon baris = status paling bermasalah. */
+const MCP_ICON: Record<McpServerState["status"], string> = {
+  connected: "text-emerald-600 dark:text-emerald-400",
+  failed: "text-destructive",
+  needs_auth: "text-amber-600 dark:text-amber-400",
+  needs_client_registration: "text-amber-600 dark:text-amber-400",
+  disabled: "text-muted-foreground/60",
+  unknown: "text-muted-foreground",
+};
+
+/**
+ * Label status per agent. `unknown` di Claude Code berarti status belum
+ * pernah dilaporkan proses `claude` (server dibaca dari config).
+ */
+function mcpAgentLabel(agent: AgentType, status: McpServerState["status"]): string {
+  if (agent === "claude-code" && status === "unknown") return "Not checked";
+  return MCP_STATUS_LABEL[status];
+}
+
+function McpGroup({
+  state,
+  onReload,
+}: {
+  state: Load<AgentLists<McpServerInfo>>;
+  onReload: () => void;
+}) {
+  const entries = useMemo(
+    () => (state.phase === "ready" ? mergeMcpServers(state.data.byAgent) : []),
+    [state],
+  );
+
+  return (
+    <PrefsGroup
+      title="MCP servers"
+      description={state.phase === "ready" ? describeMcpEntries(entries) : "Loading…"}
+      suffix={
+        <FlatIconButton
+          label="Reload MCP servers and skills"
+          onClick={onReload}
+          disabled={state.phase === "loading"}
+        >
+          <RefreshCwIcon className={cn(state.phase === "loading" && "animate-spin")} />
+        </FlatIconButton>
+      }
+    >
+      {state.phase === "loading" ? (
+        <SkeletonRows rows={2} />
+      ) : state.phase === "error" ? (
+        <ErrorRow message={state.message} onRetry={onReload} />
+      ) : (
+        <>
+          {entries.length === 0 ? (
+            <ActionRow
+              title="No MCP servers"
+              subtitle={
+                <>
+                  Add them under <code className="font-mono">mcp</code> in opencode.json, or in{" "}
+                  <code className="font-mono">.mcp.json</code> for Claude Code, then reload.
+                </>
+              }
+            />
+          ) : (
+            entries.map((entry) => <McpRow key={entry.name} entry={entry} />)
+          )}
+          <PartialFailureRow failed={state.data.failed} />
+        </>
+      )}
+    </PrefsGroup>
+  );
+}
+
+/**
+ * Satu MCP server (AdwActionRow): ikon simbolik berwarna status, nama, lalu
+ * status per agent di subjudul — "logo Label" untuk tiap agent pemakai.
+ * Error tampil di bawahnya per agent.
+ */
+function McpRow({ entry }: { entry: McpServerEntry }) {
+  const errors = entry.agents
+    .map((a) => ({ agent: a, error: entry.byAgent[a]?.error ?? null }))
+    .filter((e): e is { agent: AgentType; error: string } => e.error !== null);
+  return (
+    <ActionRow
+      prefix={<PlugIcon className={cn("size-[18px]", MCP_ICON[entry.status])} aria-hidden />}
+      title={<span className="block truncate">{entry.name}</span>}
+      subtitle={
+        <span className="flex flex-col gap-1">
+          <span className="flex flex-wrap items-center gap-x-3 gap-y-0.5">
+            {entry.agents.map((a) => {
+              const status = entry.byAgent[a]?.status ?? "unknown";
+              const label = mcpAgentLabel(a, status);
+              return (
+                <span
+                  key={a}
+                  className={cn("inline-flex items-center gap-1.5", MCP_TEXT[status])}
+                  title={
+                    a === "claude-code" && status === "unknown"
+                      ? "Configured for Claude Code. Status appears once a Claude Code session runs in this project."
+                      : `${AGENT_TYPE_LABELS[a]}: ${label}`
+                  }
+                >
+                  <AgentLogo agentType={a} className="size-3" />
+                  <span className="sr-only">{AGENT_TYPE_LABELS[a]}:</span>
+                  {label}
+                </span>
+              );
+            })}
+          </span>
+          {errors.map((e) => (
+            <span
+              key={e.agent}
+              className="line-clamp-2 font-mono text-[11.5px] leading-relaxed break-all text-destructive/90"
+              title={e.error}
+            >
+              {entry.agents.length > 1 && `${AGENT_TYPE_LABELS[e.agent]}: `}
+              {e.error}
+            </span>
+          ))}
+        </span>
+      }
+    />
+  );
+}
+
+// ------------------------------------------------------------- Skills ----
+
+type SkillFilter = "all" | SkillSource;
+
+const SKILL_FILTER_LABEL: Record<SkillFilter, string> = {
+  all: "All",
+  project: "Project",
+  global: "Global",
+  builtin: "Built-in",
+};
+
+function SkillsGroup({
+  state,
+  projectId,
+}: {
+  state: Load<AgentLists<SkillInfo>>;
+  projectId: string;
+}) {
+  const { navigate } = useRouter();
+  const [query, setQuery] = useState("");
+  const [filter, setFilter] = useState<SkillFilter>("all");
+  const [expanded, setExpanded] = useState(false);
+
+  // Skill yang sama di kedua agent jadi satu baris dengan dua logo.
+  const all = useMemo(
+    () => (state.phase === "ready" ? mergeInstalledSkills(state.data.byAgent) : []),
+    [state],
+  );
+  // Urutan tampil: Project -> global -> bawaan (paling relevan dulu).
+  const groups = useMemo(() => groupSkills(all), [all]);
+  const ordered = useMemo(() => groups.flatMap((g) => g.skills), [groups]);
+  const sources = useMemo(() => groups.map((g) => g.source), [groups]);
+  const bySource = useMemo(
+    () => (filter === "all" ? ordered : ordered.filter((s) => s.source === filter)),
+    [ordered, filter],
+  );
+  const filtered = useMemo(() => filterSkills(bySource, query), [bySource, query]);
+  const searching = query.trim() !== "";
+  // Saat mencari, tampilkan semua hasil; selain itu batasi hingga "Show more".
+  const visible = searching || expanded ? filtered : filtered.slice(0, SKILL_PREVIEW);
+  const hidden = filtered.length - visible.length;
+  const browse = () => navigate(skillsPath(projectId));
+
+  const showSearch = all.length >= SKILL_SEARCH_THRESHOLD;
+  const showFilter = sources.length > 1;
+  const toolbar =
+    state.phase === "ready" && (showSearch || showFilter) ? (
+      <div className="flex flex-col gap-2">
+        {showSearch && (
+          <SearchEntry
+            value={query}
+            onValueChange={setQuery}
+            placeholder={`Search ${all.length} skills`}
+            aria-label="Search skills"
+          />
+        )}
+        {showFilter && (
+          <AdwToggleGroup
+            label="Filter skills by source"
+            value={filter}
+            onChange={(f) => {
+              setFilter(f);
+              setExpanded(false);
+            }}
+            options={(["all", ...sources] as SkillFilter[]).map((f) => {
+              const count = f === "all" ? all.length : all.filter((s) => s.source === f).length;
+              return {
+                value: f,
+                label: SKILL_FILTER_LABEL[f],
+                title: `${SKILL_FILTER_LABEL[f]}: ${count}`,
+                ariaLabel: `${SKILL_FILTER_LABEL[f]}, ${count} skills`,
+              };
+            })}
+            className="[&_button]:text-[13px]"
+          />
+        )}
+      </div>
+    ) : undefined;
+
+  return (
+    <PrefsGroup
+      title="Skills"
+      description={
+        state.phase === "ready"
+          ? all.length === 0
+            ? "None installed"
+            : `${all.length} available${filter !== "all" || searching ? ` · ${filtered.length} shown` : ""}`
+          : "Loading…"
+      }
+      suffix={
+        <FlatIconButton label="Browse and install skills" onClick={browse}>
+          <PlusIcon />
+        </FlatIconButton>
+      }
+      toolbar={toolbar}
+    >
+      {state.phase === "loading" ? (
+        <SkeletonRows rows={3} />
+      ) : state.phase === "error" ? (
+        <ErrorRow message={state.message} />
+      ) : (
+        <>
+          {all.length === 0 ? (
+            <ActionRow
+              prefix={<SparklesIcon className="size-[18px] text-muted-foreground" aria-hidden />}
+              title="Browse skills"
+              subtitle="Install one from skills.sh for OpenCode, Claude Code, or both"
+              onActivate={browse}
+            />
+          ) : visible.length === 0 ? (
+            <li className="px-4 py-4 text-center text-[13px] text-muted-foreground">
+              No skills match “{query.trim()}”.
+            </li>
+          ) : (
+            visible.map((s) => (
+              <SkillRow key={`${s.source}:${s.name}`} skill={s} showSource={filter === "all"} />
+            ))
+          )}
+          {!searching && filtered.length > SKILL_PREVIEW && (
+            <li>
+              <button
+                type="button"
+                onClick={() => setExpanded((v) => !v)}
+                aria-expanded={expanded}
+                className="flex min-h-12 w-full items-center justify-center px-4 text-[15px] transition-colors outline-none hover:bg-muted/60 focus-visible:bg-muted/60 focus-visible:ring-[3px] focus-visible:ring-ring/40 focus-visible:ring-inset active:bg-muted"
+              >
+                {expanded ? "Show less" : `Show ${hidden} more`}
+              </button>
+            </li>
+          )}
+          <PartialFailureRow failed={state.data.failed} />
+        </>
+      )}
+    </PrefsGroup>
+  );
+}
+
+/**
+ * Satu skill (AdwExpanderRow): nama (+ label asal), deskripsi 1 baris, logo
+ * agent pemakai. Dibuka -> deskripsi lengkap & path SKILL.md.
+ */
+function SkillRow({ skill, showSource }: { skill: InstalledSkill; showSource: boolean }) {
+  const details =
+    skill.description || skill.location ? (
+      <div className="flex flex-col gap-2">
+        {skill.description && (
+          <p className="text-[13px] leading-relaxed whitespace-pre-line">{skill.description}</p>
+        )}
+        {skill.location && (
+          <p
+            className="truncate font-mono text-[11.5px] text-muted-foreground"
+            title={skill.location}
+          >
+            {skill.location}
+          </p>
+        )}
+      </div>
+    ) : undefined;
+  return (
+    <ExpanderRow
+      title={
+        <>
+          <span className="truncate">{skill.name}</span>
+          {showSource && skill.source !== "global" && (
+            <RowBadge>{skill.source === "project" ? "Project" : "Built-in"}</RowBadge>
+          )}
+        </>
+      }
+      subtitle={skill.description ?? undefined}
+      suffix={<AgentBadges agents={skill.agents} size="sm" />}
+    >
+      {details}
+    </ExpanderRow>
+  );
+}

package/src/components/sessions/AgentLogo.tsx

@@ -0,0 +1,42 @@
+/**
+ * Logo backend Session (OpenCode / Claude Code) untuk pemilih agent.
+ *
+ * - OpenCode : tanda "frame" dari favicon resmi opencode.ai, digambar ulang
+ *   dengan `currentColor` agar mengikuti tema terang/gelap.
+ * - Claude   : tanda Claude (simple-icons) dengan warna brand #D97757.
+ */
+import { cn } from "@/lib/utils";
+import type { AgentType } from "@/types";
+
+const CLAUDE_PATH =
+  "m4.7144 15.9555 4.7174-2.6471.079-.2307-.079-.1275h-.2307l-.7893-.0486-2.6956-.0729-2.3375-.0971-2.2646-.1214-.5707-.1215-.5343-.7042.0546-.3522.4797-.3218.686.0608 1.5179.1032 2.2767.1578 1.6514.0972 2.4468.255h.3886l.0546-.1579-.1336-.0971-.1032-.0972L6.973 9.8356l-2.55-1.6879-1.3356-.9714-.7225-.4918-.3643-.4614-.1578-1.0078.6557-.7225.8803.0607.2246.0607.8925.686 1.9064 1.4754 2.4893 1.8336.3643.3035.1457-.1032.0182-.0728-.164-.2733-1.3539-2.4467-1.445-2.4893-.6435-1.032-.17-.6194c-.0607-.255-.1032-.4674-.1032-.7285L6.287.1335 6.6997 0l.9957.1336.419.3642.6192 1.4147 1.0018 2.2282 1.5543 3.0296.4553.8985.2429.8318.091.255h.1579v-.1457l.1275-1.706.2368-2.0947.2307-2.6957.0789-.7589.3764-.9107.7468-.4918.5828.2793.4797.686-.0668.4433-.2853 1.8517-.5586 2.9021-.3643 1.9429h.2125l.2429-.2429.9835-1.3053 1.6514-2.0643.7286-.8196.85-.9046.5464-.4311h1.0321l.759 1.1293-.34 1.1657-1.0625 1.3478-.8804 1.1414-1.2628 1.7-.7893 1.36.0729.1093.1882-.0183 2.8535-.607 1.5421-.2794 1.8396-.3157.8318.3886.091.3946-.3278.8075-1.967.4857-2.3072.4614-3.4364.8136-.0425.0304.0486.0607 1.5482.1457.6618.0364h1.621l3.0175.2247.7892.522.4736.6376-.079.4857-1.2142.6193-1.6393-.3886-3.825-.9107-1.3113-.3279h-.1822v.1093l1.0929 1.0686 2.0035 1.8092 2.5075 2.3314.1275.5768-.3218.4554-.34-.0486-2.2039-1.6575-.85-.7468-1.9246-1.621h-.1275v.17l.4432.6496 2.3436 3.5214.1214 1.0807-.17.3521-.6071.2125-.6679-.1214-1.3721-1.9246L14.38 17.959l-1.1414-1.9428-.1397.079-.674 7.2552-.3156.3703-.7286.2793-.6071-.4614-.3218-.7468.3218-1.4753.3886-1.9246.3157-1.53.2853-1.9004.17-.6314-.0121-.0425-.1397.0182-1.4328 1.9672-2.1796 2.9446-1.7243 1.8456-.4128.164-.7164-.3704.0667-.6618.4008-.5889 2.386-3.0357 1.4389-1.882.929-1.0868-.0062-.1579h-.0546l-6.3385 4.1164-1.1293.1457-.4857-.4554.0608-.7467.2307-.2429 1.9064-1.3114Z";
+
+export function AgentLogo({ agentType, className }: { agentType: AgentType; className?: string }) {
+  if (agentType === "claude-code") {
+    return (
+      <svg
+        viewBox="0 0 24 24"
+        aria-hidden="true"
+        className={cn("size-4 shrink-0", className)}
+        fill="#D97757"
+      >
+        <path d={CLAUDE_PATH} />
+      </svg>
+    );
+  }
+  return (
+    <svg
+      viewBox="96 96 320 320"
+      aria-hidden="true"
+      className={cn("size-4 shrink-0", className)}
+      fill="currentColor"
+    >
+      <path d="M320 224V352H192V224H320Z" opacity={0.4} />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M384 416H128V96H384V416ZM320 160H192V352H320V160Z"
+      />
+    </svg>
+  );
+}