@clappstore/connect 0.7.6 → 0.7.8

package/clapps/settings/components/ProviderList.tsx

@@ -1,300 +0,0 @@
-import { useEffect, useMemo, useState } from "react";
-import { useClappState, useIntent } from "@clapps/renderer";
-import { cn } from "@/lib/utils";
-import { Check, Loader2, Pencil, Plus, ChevronDown } from "lucide-react";
-import { ProviderEditor, type ProviderType } from "./ProviderEditor";
-
-interface ModelOption {
-  id: string;
-  label: string;
-}
-
-interface Provider {
-  id: string;
-  name: string;
-  configured: boolean;
-  mode: string;
-  authType?: "api-key" | "subscription" | "oauth";
-  maskedCredential: string;
-  active?: boolean;
-  models?: ModelOption[];
-}
-
-function getProviderIdentifier(profileId: string): string {
-  const [, identifier] = profileId.split(":");
-  return identifier || profileId;
-}
-
-function providerOptionLabel(provider: Provider): string {
-  return `${provider.name} · ${getProviderIdentifier(provider.id)}`;
-}
-
-interface ProviderListProps {
-  data?: string;
-}
-
-export function ProviderList({ data = "configuredProviders" }: ProviderListProps) {
-  const providers = useClappState<Provider[]>(data) ?? [];
-  const activeModel = useClappState<string>("active.model") ?? "";
-  const { emit } = useIntent();
-
-  const activeProvider = providers.find((p) => p.active) ?? providers[0];
-
-  const [selectedProviderId, setSelectedProviderId] = useState<string>(activeProvider?.id ?? "");
-  const [selectedModelId, setSelectedModelId] = useState<string>(activeModel ?? "");
-  const [isSaving, setIsSaving] = useState(false);
-  const [isSlow, setIsSlow] = useState(false);
-  
-  // Editor modal state
-  const [isEditorOpen, setIsEditorOpen] = useState(false);
-  const [editingProvider, setEditingProvider] = useState<{
-    id: string;
-    name: string;
-    type: ProviderType;
-    mode: string;
-  } | null>(null);
-
-  const isDirty =
-    selectedProviderId !== (activeProvider?.id ?? "") ||
-    selectedModelId !== (activeModel ?? "");
-
-  useEffect(() => {
-    if (!activeProvider) return;
-    // Only hydrate from backend when there's no local selection yet, or right after save.
-    // This prevents polling/state refresh from clobbering in-progress user selections.
-    if (!selectedProviderId || isSaving) {
-      setSelectedProviderId(activeProvider.id);
-    }
-  }, [activeProvider, isSaving, selectedProviderId]);
-
-  useEffect(() => {
-    if (!activeModel) return;
-    // Keep local selection stable while user is editing.
-    if (!selectedModelId || isSaving || !isDirty) {
-      setSelectedModelId(activeModel);
-    }
-  }, [activeModel, isSaving, selectedModelId, isDirty]);
-
-  const availableModels = useMemo(() => {
-    const provider = providers.find((p) => p.id === selectedProviderId);
-    return provider?.models ?? [];
-  }, [providers, selectedProviderId]);
-
-  useEffect(() => {
-    if (!availableModels.length) return;
-
-    const selectedStillValid = availableModels.some((m) => m.id === selectedModelId);
-    if (!selectedStillValid) {
-      setSelectedModelId(availableModels[0].id);
-    }
-  }, [availableModels, selectedModelId]);
-
-  const hasChange = Boolean(selectedModelId && selectedModelId !== activeModel);
-
-  useEffect(() => {
-    if (!isSaving) return;
-
-    if (activeModel === selectedModelId && activeModel.length > 0) {
-      setIsSaving(false);
-      setIsSlow(false);
-    }
-  }, [activeModel, selectedModelId, isSaving]);
-
-  useEffect(() => {
-    if (!isSaving) return;
-
-    const slowTimer = setTimeout(() => setIsSlow(true), 10000);
-    return () => clearTimeout(slowTimer);
-  }, [isSaving]);
-
-  const providerForSelection = providers.find((p) => p.id === selectedProviderId);
-
-  const onProviderChange = (providerId: string) => {
-    if (isSaving) return;
-    setSelectedProviderId(providerId);
-
-    const provider = providers.find((p) => p.id === providerId);
-    const firstModel = provider?.models?.[0]?.id;
-    if (firstModel) {
-      setSelectedModelId(firstModel);
-    } else {
-      setSelectedModelId("");
-    }
-  };
-
-  const onSave = () => {
-    if (!hasChange || !selectedModelId || isSaving) return;
-    setIsSaving(true);
-    setIsSlow(false);
-    emit("settings.setActiveModel", { model: selectedModelId });
-  };
-
-  const openAddProvider = () => {
-    setEditingProvider(null);
-    setIsEditorOpen(true);
-  };
-
-  const openEditProvider = (provider: Provider) => {
-    // Extract provider type from profile ID (format: "provider:suffix")
-    const providerKey = provider.id.split(":")[0];
-    
-    // Map provider key to ProviderType
-    const typeMap: Record<string, ProviderType> = {
-      anthropic: "anthropic",
-      openai: "openai",
-      "openai-codex": "openai",
-      "kimi-coding": "kimi-coding",
-      moonshot: "kimi-coding",
-    };
-
-    setEditingProvider({
-      id: provider.id,
-      name: provider.name,
-      type: typeMap[providerKey] ?? "anthropic",
-      mode: provider.mode,
-      authType: provider.authType,
-      maskedCredential: provider.maskedCredential,
-    });
-    setIsEditorOpen(true);
-  };
-
-  const closeEditor = () => {
-    setIsEditorOpen(false);
-    setEditingProvider(null);
-  };
-
-  return (
-    <>
-      <div className="flex flex-col gap-3">
-        <div className="space-y-1">
-          <p className="text-xs uppercase tracking-wide text-muted-foreground">System Default</p>
-          <p className="text-sm font-medium">Default model for new sessions</p>
-        </div>
-
-        {/* Provider selector with edit button */}
-        <div className="grid grid-cols-1 gap-2">
-          <label className="text-xs text-muted-foreground">Provider</label>
-          <div className="relative flex gap-2">
-            <div className="relative flex-1">
-              <select
-                value={selectedProviderId}
-                onChange={(e) => onProviderChange(e.target.value)}
-                disabled={isSaving || providers.length === 0}
-                className="h-10 w-full appearance-none rounded-md border border-input bg-background pl-3 pr-10 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-primary disabled:opacity-70"
-              >
-                {providers.length === 0 ? (
-                  <option value="">No providers configured</option>
-                ) : (
-                  providers.map((provider) => (
-                    <option key={provider.id} value={provider.id}>
-                      {providerOptionLabel(provider)}
-                    </option>
-                  ))
-                )}
-              </select>
-              <ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
-            </div>
-            
-            {/* Edit button */}
-            {providerForSelection && (
-              <button
-                type="button"
-                onClick={() => openEditProvider(providerForSelection)}
-                disabled={isSaving}
-                className={cn(
-                  "flex items-center justify-center h-10 w-10 rounded-md border border-input bg-background",
-                  "hover:bg-muted transition-colors",
-                  "disabled:opacity-50 disabled:cursor-not-allowed"
-                )}
-                title={`Edit ${providerForSelection.name}`}
-              >
-                <Pencil className="h-4 w-4" />
-              </button>
-            )}
-          </div>
-        </div>
-
-        {/* Model selector */}
-        <div className="grid grid-cols-1 gap-2">
-          <label className="text-xs text-muted-foreground">Model</label>
-          <div className="relative">
-            <select
-              value={selectedModelId}
-              onChange={(e) => setSelectedModelId(e.target.value)}
-              disabled={isSaving || availableModels.length === 0}
-              className="h-10 w-full appearance-none rounded-md border border-input bg-background pl-3 pr-10 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-primary disabled:opacity-70"
-            >
-              {availableModels.length === 0 ? (
-                <option value="">No models available</option>
-              ) : (
-                availableModels.map((model) => (
-                  <option key={model.id} value={model.id}>
-                    {model.label}
-                  </option>
-                ))
-              )}
-            </select>
-            <ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
-          </div>
-        </div>
-
-        {/* Credential info */}
-        {providerForSelection && (
-          <div className="rounded-md border border-border bg-muted/30 px-3 py-2 text-xs text-muted-foreground">
-            <div>{providerOptionLabel(providerForSelection)}: {providerForSelection.maskedCredential ?? "No credential"}</div>
-            <div className="opacity-70">id: {providerForSelection.id}</div>
-          </div>
-        )}
-
-        {/* Save button */}
-        <button
-          type="button"
-          onClick={onSave}
-          disabled={!hasChange || !selectedModelId || isSaving}
-          className={cn(
-            "inline-flex h-10 items-center justify-center gap-2 rounded-md border px-4 text-sm font-medium transition-colors",
-            "border-primary bg-primary text-primary-foreground hover:bg-primary/90",
-            "disabled:cursor-not-allowed disabled:opacity-60"
-          )}
-        >
-          {isSaving ? (
-            <>
-              <Loader2 className="h-4 w-4 animate-spin" />
-              {isSlow ? "Still applying…" : "Updating model…"}
-            </>
-          ) : hasChange ? (
-            "Save changes"
-          ) : (
-            <>
-              <Check className="h-4 w-4" />
-              Up to date
-            </>
-          )}
-        </button>
-
-        {/* Add provider button */}
-        <div className="pt-2 border-t border-border">
-          <button
-            type="button"
-            onClick={openAddProvider}
-            className={cn(
-              "inline-flex h-10 w-full items-center justify-center gap-2 rounded-md border border-dashed border-border",
-              "text-sm font-medium text-muted-foreground",
-              "hover:border-primary hover:text-foreground hover:bg-muted/50 transition-colors"
-            )}
-          >
-            <Plus className="h-4 w-4" />
-            Add Provider
-          </button>
-        </div>
-      </div>
-
-      {/* Provider editor modal */}
-      <ProviderEditor
-        isOpen={isEditorOpen}
-        onClose={closeEditor}
-        editingProvider={editingProvider}
-      />
-    </>
-  );
-}

package/clapps/settings/components/SessionList.tsx

@@ -1,189 +0,0 @@
-import { useEffect, useState } from "react";
-import { useClappState, useIntent } from "@clapps/renderer";
-import { cn } from "@/lib/utils";
-import { RefreshCw, RotateCcw, Check, AlertTriangle, Loader2 } from "lucide-react";
-
-interface Session {
-  key: string;
-  label: string;
-  model: string | null;
-  modelLabel: string;
-  isOverride: boolean;
-  lastUpdated?: string;
-}
-
-interface SessionsState {
-  sessions: Session[];
-  globalModel: string | null;
-}
-
-export function SessionList() {
-  // Sessions data is now included directly in the settings state
-  const sessionsData = useClappState<SessionsState>("sessions");
-  const sessions = sessionsData?.sessions ?? [];
-  const globalModel = sessionsData?.globalModel;
-  
-  const { emit } = useIntent();
-  
-  const [isRefreshing, setIsRefreshing] = useState(false);
-  const [resettingSession, setResettingSession] = useState<string | null>(null);
-  const [applyingToAll, setApplyingToAll] = useState(false);
-
-  // Request initial session list on mount
-  useEffect(() => {
-    emit("settings.listSessions", {});
-  }, [emit]);
-
-  const handleRefresh = () => {
-    setIsRefreshing(true);
-    emit("settings.listSessions", {});
-    setTimeout(() => setIsRefreshing(false), 1500);
-  };
-
-  const handleResetSession = (sessionKey: string) => {
-    setResettingSession(sessionKey);
-    emit("settings.resetSessionModel", { sessionKey });
-    setTimeout(() => setResettingSession(null), 2000);
-  };
-
-  const handleApplyToAll = () => {
-    setApplyingToAll(true);
-    emit("settings.applyDefaultToAll", {});
-    setTimeout(() => setApplyingToAll(false), 3000);
-  };
-
-  const overrideCount = sessions.filter(s => s.isOverride).length;
-
-  if (sessions.length === 0) {
-    return (
-      <div className="flex flex-col gap-3">
-        <div className="flex items-center justify-between">
-          <div className="space-y-1">
-            <p className="text-xs uppercase tracking-wide text-muted-foreground">Active Sessions</p>
-          </div>
-          <button
-            onClick={handleRefresh}
-            disabled={isRefreshing}
-            className="p-1.5 rounded-md hover:bg-muted transition-colors disabled:opacity-50"
-            title="Refresh sessions"
-          >
-            <RefreshCw className={cn("h-4 w-4", isRefreshing && "animate-spin")} />
-          </button>
-        </div>
-        <div className="text-sm text-muted-foreground py-4 text-center border border-dashed border-border rounded-md">
-          No active sessions found
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex flex-col gap-3">
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div className="space-y-1">
-          <p className="text-xs uppercase tracking-wide text-muted-foreground">Active Sessions</p>
-          <p className="text-sm text-muted-foreground">
-            {sessions.length} session{sessions.length !== 1 ? "s" : ""}
-            {overrideCount > 0 && (
-              <span className="text-amber-500 ml-1">
-                • {overrideCount} override{overrideCount !== 1 ? "s" : ""}
-              </span>
-            )}
-          </p>
-        </div>
-        <button
-          onClick={handleRefresh}
-          disabled={isRefreshing}
-          className="p-1.5 rounded-md hover:bg-muted transition-colors disabled:opacity-50"
-          title="Refresh sessions"
-        >
-          <RefreshCw className={cn("h-4 w-4", isRefreshing && "animate-spin")} />
-        </button>
-      </div>
-
-      {/* Session list */}
-      <div className="flex flex-col gap-2">
-        {sessions.map((session) => (
-          <div
-            key={session.key}
-            className={cn(
-              "flex items-start justify-between gap-2 p-3 rounded-lg border",
-              session.isOverride
-                ? "border-amber-500/50 bg-amber-500/5"
-                : "border-border bg-muted/30"
-            )}
-          >
-            <div className="flex-1 min-w-0">
-              <div className="flex items-center gap-2">
-                {session.isOverride ? (
-                  <AlertTriangle className="h-4 w-4 text-amber-500 shrink-0" />
-                ) : (
-                  <Check className="h-4 w-4 text-green-500 shrink-0" />
-                )}
-                <span className="text-sm font-medium truncate">
-                  {session.label}
-                </span>
-              </div>
-              <div className="mt-1 ml-6">
-                <span className="text-xs text-muted-foreground">
-                  {session.modelLabel}
-                </span>
-                {session.isOverride && (
-                  <span className="text-xs text-amber-500 ml-2">
-                    (override)
-                  </span>
-                )}
-              </div>
-            </div>
-
-            {session.isOverride && (
-              <button
-                onClick={() => handleResetSession(session.key)}
-                disabled={resettingSession === session.key}
-                className={cn(
-                  "shrink-0 px-2 py-1 text-xs rounded-md border border-border",
-                  "hover:bg-muted transition-colors",
-                  "disabled:opacity-50 disabled:cursor-not-allowed"
-                )}
-                title="Reset to system default"
-              >
-                {resettingSession === session.key ? (
-                  <Loader2 className="h-3 w-3 animate-spin" />
-                ) : (
-                  <span className="flex items-center gap-1">
-                    <RotateCcw className="h-3 w-3" />
-                    Reset
-                  </span>
-                )}
-              </button>
-            )}
-          </div>
-        ))}
-      </div>
-
-      {/* Apply to all button */}
-      {overrideCount > 0 && (
-        <button
-          onClick={handleApplyToAll}
-          disabled={applyingToAll}
-          className={cn(
-            "w-full py-2 px-4 text-sm font-medium rounded-md",
-            "border border-amber-500/50 text-amber-600 dark:text-amber-400",
-            "hover:bg-amber-500/10 transition-colors",
-            "disabled:opacity-50 disabled:cursor-not-allowed"
-          )}
-        >
-          {applyingToAll ? (
-            <span className="flex items-center justify-center gap-2">
-              <Loader2 className="h-4 w-4 animate-spin" />
-              Applying to all sessions...
-            </span>
-          ) : (
-            `Apply default to all ${overrideCount} override${overrideCount !== 1 ? "s" : ""}`
-          )}
-        </button>
-      )}
-    </div>
-  );
-}