kcg-code 0.1.0 → 0.2.0

package/src/components/sessions/SessionView.tsx

@@ -18,9 +18,10 @@
  *   `SessionComposer` di folder yang sama.
  * - Drag & drop file: `FileDropOverlay` (portal, menutupi seluruh viewport)
  *   meneruskan file ke composer (`SessionComposerHandle.addFiles`).
- * - Kartu konteks kanan (`ContextPanel`): Environment / MCP / Task list /
- *   Reference, MENGAPUNG di margin kanan — percakapan & input tidak bergeser
- *   saat kartu dibuka/ditutup. Di mobile tampil sebagai bottom sheet.
+ * - Kartu konteks kanan (`ContextPanel`): Environment / Task list / MCP /
+ *   Reference. Desktop: kolom sendiri di kanan (berdampingan) — kolom chat
+ *   menyempit & percakapan tetap terpusat di sisa ruang, tidak tertutup
+ *   kartu. Di bawah `lg` (HP & tablet) tampil sebagai bottom sheet.
  */
 import { useMemo, useRef, useState } from "react";
 import { ConfirmSessionDeleteDialog } from "@/components/sessions/ConfirmSessionDeleteDialog";
@@ -37,7 +38,7 @@ import {
   SessionComposerSkeleton,
   SessionTimelineSkeleton,
 } from "@/components/sessions/SessionTimelineSkeleton";
-import { useIsMobile } from "@/hooks/useMediaQuery";
+import { useMediaQuery } from "@/hooks/useMediaQuery";
 import { useSessionChat } from "@/hooks/useSessionChat";
 import { useSessionContext } from "@/hooks/useSessionContext";
 import { CONVERSATION_MAX_W } from "@/lib/layout";
@@ -46,6 +47,9 @@ import { cn } from "@/lib/utils";
 import type { Session } from "@/types";
 import { PromptPanel } from "./PromptPanel";
 
+/** Lebar minimum untuk kartu konteks sebagai kolom samping (`lg`). */
+const SIDE_PANEL_QUERY = "(min-width: 1024px)";
+
 export interface SessionViewProps {
   session: Session;
   onBack: () => void;
@@ -70,8 +74,9 @@ export function SessionView({ session, onBack, onDeleted }: SessionViewProps) {
   const composerRef = useRef<SessionComposerHandle>(null);
   /** Panel konteks kanan; default tertutup agar area chat tetap lega. */
   const [contextOpen, setContextOpen] = useState(false);
-  /** Layar sempit: konteks tampil sebagai bottom sheet, bukan kartu. */
-  const isMobile = useIsMobile();
+  // Kolom konteks berdampingan butuh ruang: di bawah `lg` kolom chat jadi
+  // terlalu sempit, jadi kartu tampil sebagai bottom sheet (seperti HP).
+  const sidePanel = useMediaQuery(SIDE_PANEL_QUERY);
   const sessionCtx = useSessionContext(session.id, contextOpen, chat.generating);
   /**
    * Reference diturunkan dari parts pesan yang sudah ada di timeline
@@ -187,12 +192,11 @@ export function SessionView({ session, onBack, onDeleted }: SessionViewProps) {
           )}
         </div>
 
-        {/* Tertutup: hanya tombol hamburger. Terbuka: tombol hilang & kartu
-            mengapung di kanan. `absolute` = tidak mengambil ruang layout, jadi
-            percakapan & input tetap di posisinya. Wadah `pointer-events-none`
-            (setinggi area) agar klik di sekitar kartu tetap sampai ke chat. */}
-        {isMobile ? (
-          // Mobile: bottom sheet. Tombol hamburger tetap terlihat — sheet
+        {/* Tertutup: hanya tombol hamburger. Terbuka (desktop): tombol hilang
+            & kartu jadi kolom kanan selebar 17rem yang IKUT tata letak — kolom
+            chat (flex-1) menyempit, jadi pesan & composer tidak tertutup. */}
+        {!sidePanel ? (
+          // HP & tablet: bottom sheet. Tombol hamburger tetap terlihat — sheet
           // menutupi layar & punya penutupnya sendiri (tap luar / geser / Esc).
           <>
             <ContextPanelTrigger onOpen={() => setContextOpen(true)} />
@@ -205,7 +209,7 @@ export function SessionView({ session, onBack, onDeleted }: SessionViewProps) {
             />
           </>
         ) : contextOpen ? (
-          <div className="pointer-events-none absolute end-3 top-2 bottom-3 z-20 flex w-[min(15rem,calc(100%-1.5rem))] flex-col sm:end-4">
+          <div className="flex w-[17rem] shrink-0 flex-col pt-2 pe-3 pb-3 sm:pe-4">
             <ContextPanel
               context={sessionCtx.context}
               references={references}

package/src/components/sessions/__tests__/ContextPanel.test.tsx

@@ -97,6 +97,42 @@ test("MCP: server bermasalah ditampilkan paling atas", () => {
   expect(out.indexOf("zzz-broken")).toBeLessThan(out.indexOf("aaa-ok"));
 });
 
+test("MCP: banyak yang perlu login dilipat jadi satu baris, yang tersambung tetap tampil", () => {
+  const out = html({
+    ...base,
+    mcp: [
+      { name: "firecrawl", status: "connected", error: null },
+      { name: "claude.ai Asana", status: "needs_auth", error: null },
+      { name: "claude.ai Box", status: "needs_auth", error: null },
+      { name: "claude.ai Canva", status: "needs_client_registration", error: null },
+    ],
+  });
+  expect(out).toContain("firecrawl");
+  expect(out).toContain("3 need sign-in");
+  // Nama di dalam kelompok baru tampil saat dibuka.
+  expect(out).not.toContain("claude.ai Asana");
+  expect(out).toContain('aria-expanded="false"');
+  // Belum login itu normal — ringkasan tidak diberi warna peringatan.
+  expect(out).not.toContain("text-amber-700");
+});
+
+test("MCP: satu server perlu login tetap tampil sebagai baris biasa", () => {
+  const out = html({
+    ...base,
+    mcp: [
+      { name: "firecrawl", status: "connected", error: null },
+      { name: "github", status: "needs_auth", error: null },
+    ],
+  });
+  expect(out).toContain("github");
+  expect(out).not.toContain("need sign-in");
+});
+
+test("MCP: ada yang gagal -> ringkasan diberi warna peringatan", () => {
+  const out = html({ ...base, mcp: [{ name: "x", status: "failed", error: null }] });
+  expect(out).toContain("text-amber-700");
+});
+
 test("MCP kosong: keterangan menyesuaikan status Session", () => {
   expect(html(base)).toContain("No MCP servers configured");
   expect(html({ ...base, live: false })).toContain("Start the session to see MCP servers");

package/src/components/settings/LhrRemoteAccess.tsx

@@ -1,11 +1,11 @@
 /**
  * Panel Remote access via localhost.run — tanpa akun, lewat `ssh` bawaan OS.
  *
- * Satu grup ala AdwPreferencesGroup:
+ * Susunan sama dengan penyedia bawaan (satu hal per grup):
  * - AdwSwitchRow "Remote access" (status satu frasa di subjudul),
- * - QR + link saat online (komponen bersama penyedia bawaan),
+ * - grup "Your link" saat online (komponen bersama penyedia bawaan),
+ * - grup "Connection method" (dari pembungkus),
  * - baris expander "Connection log".
- * Catatan alamat yang berubah + tautan ke KCG Code link jadi footer grup.
  */
 import { ChevronDownIcon, GlobeIcon, LockIcon, TerminalSquareIcon } from "lucide-react";
 import { type ReactNode, useCallback, useEffect, useState } from "react";
@@ -33,8 +33,8 @@ export interface LhrRemoteAccessProps {
   LogPanel: (p: { endpoint?: string }) => ReactNode;
   /** Buka konfirmasi mematikan (halaman bisa terputus bila dibuka lewat link ini). */
   onRequestStop: (stop: () => Promise<void>, viaThisLink: boolean) => void;
-  /** Pindah ke penyedia yang direkomendasikan (KCG Code link). */
-  onUseRecommended: () => void;
+  /** Grup "Connection method" — dirender sebelum log. */
+  methodPicker: ReactNode;
 }
 
 export function LhrRemoteAccess({
@@ -42,7 +42,7 @@ export function LhrRemoteAccess({
   LiveAddress,
   LogPanel,
   onRequestStop,
-  onUseRecommended,
+  methodPicker,
 }: LhrRemoteAccessProps) {
   const { navigate } = useRouter();
   const [s, setS] = useState<LhrStatus | null>(null);
@@ -109,10 +109,10 @@ export function LhrRemoteAccess({
 
   // Subjudul: satu kalimat pendek yang menjelaskan keadaan + apa artinya.
   let tone: RowTone = "muted";
-  let subtitle: ReactNode = "Get a temporary link to open KCG Code on your phone";
+  let subtitle: ReactNode = "Off";
   if (!protectedApp) {
     tone = "warning";
-    subtitle = "Set a PIN or password first to keep others out";
+    subtitle = "Needs a PIN or password first";
   } else if (s.phase === "error") {
     tone = "warning";
     subtitle = (
@@ -124,7 +124,7 @@ export function LhrRemoteAccess({
     );
   } else if (online) {
     tone = "success";
-    subtitle = "On · anyone with the link still needs your PIN or password";
+    subtitle = "On · PIN still required";
   } else if (connecting) {
     tone = "busy";
     subtitle =
@@ -139,7 +139,7 @@ export function LhrRemoteAccess({
   };
 
   return (
-    <section aria-label="localhost.run" className="flex flex-col gap-2">
+    <>
       <PrefsGroup id="remote">
         {/* AdwSwitchRow: judul + status singkat, switch di kanan. */}
         <li>
@@ -181,9 +181,17 @@ export function LhrRemoteAccess({
             onActivate={() => navigate(settingsPath("security"))}
           />
         )}
+      </PrefsGroup>
+
+      {online && s.url && (
+        <PrefsGroup title="Your link">
+          <LiveAddress url={s.url} />
+        </PrefsGroup>
+      )}
 
-        {online && s.url && <LiveAddress url={s.url} />}
+      {methodPicker}
 
+      <PrefsGroup>
         {/* Log teknis dilipat di baris expander (AdwExpanderRow). */}
         <Collapsible asChild open={showLog} onOpenChange={setShowLog}>
           <li>
@@ -216,20 +224,7 @@ export function LhrRemoteAccess({
           </li>
         </Collapsible>
       </PrefsGroup>
-
-      {/* Footer grup: catatan singkat + aksi inline. */}
-      <p className="px-1 text-[12.5px] leading-snug text-muted-foreground">
-        Free addresses change every few hours and after reconnecting.{" "}
-        <button
-          type="button"
-          onClick={onUseRecommended}
-          className="rounded-sm font-medium text-foreground underline-offset-2 outline-none hover:underline focus-visible:underline focus-visible:ring-[3px] focus-visible:ring-ring/40"
-        >
-          Use KCG Code link
-        </button>{" "}
-        for one that stays the same.
-      </p>
-    </section>
+    </>
   );
 }