@contractspec/bundle.library 0.0.0-canary-20260206014742

package/src/components/integrations/organisms/IntegrationSettings.tsx

@@ -0,0 +1,223 @@
+import * as React from 'react';
+import { ShieldCheck, Key, TestTube2 } from 'lucide-react';
+import { Button, Input, Textarea } from '@contractspec/lib.design-system';
+import { Checkbox } from '@contractspec/lib.ui-kit-web/ui/checkbox';
+import { Label } from '@contractspec/lib.ui-kit-web/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@contractspec/lib.ui-kit-web/ui/select';
+
+export interface IntegrationSettingsForm {
+  apiKey: string;
+  secret?: string;
+  ownershipMode?: 'managed' | 'byok';
+  secretProvider?: 'env' | 'gcp';
+  secretRef?: string;
+  config?: string;
+}
+
+export interface IntegrationSettingsProps {
+  provider: string;
+  initialValues?: IntegrationSettingsForm;
+  onTestConnection?: (values: IntegrationSettingsForm) => Promise<void> | void;
+  onSave?: (values: IntegrationSettingsForm) => Promise<void> | void;
+  isSaving?: boolean;
+  isTesting?: boolean;
+}
+
+export function IntegrationSettings({
+  provider,
+  initialValues,
+  onTestConnection,
+  onSave,
+  isSaving,
+  isTesting,
+}: IntegrationSettingsProps) {
+  const [values, setValues] = React.useState<IntegrationSettingsForm>({
+    apiKey: initialValues?.apiKey ?? '',
+    secret: initialValues?.secret ?? '',
+    ownershipMode: initialValues?.ownershipMode ?? 'managed',
+    secretProvider: initialValues?.secretProvider ?? 'env',
+    secretRef: initialValues?.secretRef ?? '',
+    config: initialValues?.config ?? '{\n  "region": "eu-west-1"\n}',
+  });
+
+  const handleChange = (
+    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
+    const target = event.target;
+    const { name, value } = target;
+    setValues((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+  };
+
+  return (
+    <div className="border-border bg-card space-y-4 rounded-2xl border p-4">
+      <header className="flex flex-wrap items-center justify-between gap-3">
+        <div>
+          <p className="text-sm font-semibold tracking-wide uppercase">
+            {provider} credentials
+          </p>
+          <p className="text-muted-foreground text-sm">
+            Store encrypted keys with BYOK and run safe connection tests.
+          </p>
+        </div>
+        <ShieldCheck className="text-muted-foreground h-5 w-5" />
+      </header>
+
+      <div className="grid gap-4 md:grid-cols-2">
+        <div className="space-y-2">
+          <Label htmlFor="ownershipMode">Ownership</Label>
+          <Select
+            value={values.ownershipMode ?? 'managed'}
+            onValueChange={(next) =>
+              setValues((prev) => ({
+                ...prev,
+                ownershipMode: next as IntegrationSettingsForm['ownershipMode'],
+              }))
+            }
+          >
+            <SelectTrigger id="ownershipMode" className="w-full">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="managed">Managed (store encrypted)</SelectItem>
+              <SelectItem value="byok">
+                BYOK (store secret reference)
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-2">
+        <div className="space-y-1 text-sm">
+          <Label htmlFor="apiKey" className="font-semibold">
+            API key
+          </Label>
+          <div className="relative">
+            <Key className="text-muted-foreground pointer-events-none absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
+            <Input
+              type="text"
+              name="apiKey"
+              id="apiKey"
+              className="w-full py-2 pr-3 pl-9"
+              value={values.apiKey}
+              onChange={handleChange}
+              required
+            />
+          </div>
+        </div>
+        <div className="space-y-1 text-sm">
+          <Label htmlFor="secret" className="font-semibold">
+            Secret
+          </Label>
+          <Input
+            type="password"
+            id="secret"
+            name="secret"
+            className="w-full px-3 py-2"
+            value={values.secret}
+            onChange={handleChange}
+          />
+        </div>
+      </div>
+
+      {values.ownershipMode === 'byok' ? (
+        <div className="space-y-4 rounded-xl border border-blue-500/20 bg-blue-500/5 p-4">
+          <p className="text-sm font-semibold">BYOK secret reference</p>
+          <div className="grid gap-4 md:grid-cols-2">
+            <div className="space-y-2">
+              <Label htmlFor="secretProvider">Secret provider</Label>
+              <Select
+                value={values.secretProvider ?? 'env'}
+                onValueChange={(next) =>
+                  setValues((prev) => ({
+                    ...prev,
+                    secretProvider:
+                      next as IntegrationSettingsForm['secretProvider'],
+                  }))
+                }
+              >
+                <SelectTrigger id="secretProvider" className="w-full">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="env">Environment</SelectItem>
+                  <SelectItem value="gcp">GCP Secret Manager</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="secretRef">Secret reference</Label>
+              <Input
+                id="secretRef"
+                name="secretRef"
+                placeholder={
+                  values.secretProvider === 'gcp'
+                    ? 'gcp://projects/.../secrets/...'
+                    : 'env://MY_TOKEN_ENV_VAR'
+                }
+                value={values.secretRef ?? ''}
+                onChange={handleChange}
+              />
+            </div>
+          </div>
+        </div>
+      ) : (
+        <div className="flex items-center gap-3 rounded-xl border border-emerald-500/20 bg-emerald-500/5 p-4 text-sm">
+          <Checkbox
+            checked
+            onCheckedChange={() => {
+              /* no-op */
+            }}
+            aria-label="Managed"
+          />
+          <div>
+            <p className="font-semibold">Managed encryption enabled</p>
+            <p className="text-muted-foreground">
+              Secrets are encrypted server-side for this tenant.
+            </p>
+          </div>
+        </div>
+      )}
+
+      <div className="space-y-1 text-sm">
+        <Label htmlFor="config" className="font-semibold">
+          Configuration (JSON)
+        </Label>
+        <Textarea
+          id="config"
+          name="config"
+          className="min-h-[140px] w-full font-mono text-sm"
+          value={values.config}
+          onChange={handleChange}
+        />
+      </div>
+
+      <div className="flex flex-wrap items-center gap-3">
+        <Button
+          variant="ghost"
+          onPress={() => onTestConnection?.(values)}
+          disabled={isTesting}
+        >
+          <TestTube2 className="h-4 w-4" />
+          Test connection
+        </Button>
+        <Button
+          variant="default"
+          onPress={() => onSave?.(values)}
+          disabled={isSaving}
+        >
+          Save settings
+        </Button>
+      </div>
+    </div>
+  );
+}

package/src/components/integrations/organisms/KnowledgeSourceList.tsx

@@ -0,0 +1,106 @@
+import * as React from 'react';
+import { BookCopy, Plus, RefreshCcw } from 'lucide-react';
+
+export interface KnowledgeSourceItem {
+  id: string;
+  name: string;
+  type: string;
+  indexed: boolean;
+  lastIndexed?: string | null;
+}
+
+export interface KnowledgeSourceListProps {
+  sources: KnowledgeSourceItem[];
+  onRefresh?: (id: string) => void;
+  onDelete?: (id: string) => void;
+  onAdd?: () => void;
+}
+
+export function KnowledgeSourceList({
+  sources,
+  onRefresh,
+  onDelete,
+  onAdd,
+}: KnowledgeSourceListProps) {
+  // const knowledgeHubEnabled = useStudioFeatureFlag(
+  //   ContractSpecFeatureFlags.STUDIO_KNOWLEDGE_HUB
+  // );
+  //
+  // if (!knowledgeHubEnabled) {
+  //   return (
+  //     <div className="border-border bg-card/40 rounded-2xl border border-dashed p-8 text-center">
+  //       <FeatureGateNotice
+  //         title="Knowledge hub is paused"
+  //         description="Turn on STUDIO_KNOWLEDGE_HUB to index docs and feed answers into the Studio canvas."
+  //       />
+  //     </div>
+  //   );
+  // }
+
+  return (
+    <div className="border-border bg-card space-y-4 rounded-2xl border p-4">
+      <header className="flex flex-wrap items-center justify-between gap-3">
+        <div>
+          <p className="text-sm font-semibold tracking-wide uppercase">
+            Knowledge sources
+          </p>
+          <p className="text-muted-foreground text-sm">
+            Manage documentation, specs, and repos powering Studio RAG flows.
+          </p>
+        </div>
+        <button
+          type="button"
+          className="btn-primary inline-flex items-center gap-2"
+          onClick={onAdd}
+        >
+          <Plus className="h-4 w-4" />
+          Add source
+        </button>
+      </header>
+      <div className="space-y-3">
+        {sources.length ? (
+          sources.map((source) => (
+            <div
+              key={source.id}
+              className="border-border bg-background flex flex-wrap items-center justify-between gap-3 rounded-xl border p-4"
+            >
+              <div className="flex items-center gap-3">
+                <BookCopy className="text-muted-foreground h-8 w-8" />
+                <div>
+                  <p className="text-base font-semibold">{source.name}</p>
+                  <p className="text-muted-foreground text-sm">{source.type}</p>
+                  <p className="text-muted-foreground text-xs">
+                    {source.indexed
+                      ? `Indexed ${source.lastIndexed ? new Date(source.lastIndexed).toLocaleString() : ''}`
+                      : 'Pending indexing'}
+                  </p>
+                </div>
+              </div>
+              <div className="flex items-center gap-2">
+                <button
+                  type="button"
+                  className="btn-ghost inline-flex items-center gap-1 text-sm"
+                  onClick={() => onRefresh?.(source.id)}
+                >
+                  <RefreshCcw className="h-3.5 w-3.5" />
+                  Reindex
+                </button>
+                <button
+                  type="button"
+                  className="btn-ghost text-destructive text-sm"
+                  onClick={() => onDelete?.(source.id)}
+                >
+                  Remove
+                </button>
+              </div>
+            </div>
+          ))
+        ) : (
+          <div className="text-muted-foreground border-border rounded-xl border border-dashed p-6 text-center text-sm">
+            No knowledge sources added yet.
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}