@puredesktop/puredesktop-ui-bridge 1.0.0-beta.1 → 2.1.0

package/src/components/credentials/CredentialsPanel.tsx

@@ -1,169 +1,236 @@
-import { useState } from 'react'
-import { Button } from '../common/buttons/Button.js'
-import { FlexCol } from '../common/containers/flex.js'
-import { InlineBanner } from '../common/feedback/InlineBanner.js'
-import { FormField } from '../common/inputs/FormField.js'
-import { TextField } from '../common/inputs/TextField.js'
-import { Text } from '../common/typography/Text.js'
-import type {
-  CredentialsEntryView,
-  CredentialsStorageStatusView,
-} from './credentialsTypes.js'
-import { styled } from 'styled-components'
-
-export interface CredentialsPanelProps {
-  entries: CredentialsEntryView[]
-  storageStatus: CredentialsStorageStatusView | null
-  loading?: boolean
-  error?: Error | null
-  onSave: (id: string, value: string) => Promise<void>
-  onDelete: (id: string) => Promise<void>
-}
-
-//#region styled-components
-
-const StyledEntry = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: var(--platform-spacing-sm);
-  padding: var(--platform-spacing-md);
-  border: 1px solid var(--platform-colors-border);
-  border-radius: 0;
-  background: var(--platform-colors-surface);
-`
-
-const StyledEntryHeader = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--platform-spacing-md);
-`
-
-const StyledActions = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--platform-spacing-sm);
-`
-
-//#endregion
-
-export function CredentialsPanel({
-  entries,
-  storageStatus,
-  loading = false,
-  error = null,
-  onSave,
-  onDelete,
-}: CredentialsPanelProps): React.ReactElement {
-  const [drafts, setDrafts] = useState<Record<string, string>>({})
-  const [busyId, setBusyId] = useState<string | null>(null)
-  const [actionError, setActionError] = useState<string | null>(null)
-
-  const storageBlocked =
-    storageStatus !== null &&
-    (!storageStatus.encryptionAvailable || !storageStatus.secure)
-
-  const run = async (
-    id: string,
-    action: () => Promise<void>,
-  ): Promise<void> => {
-    setBusyId(id)
-    setActionError(null)
-    try {
-      await action()
-      setDrafts(current => ({ ...current, [id]: '' }))
-    } catch (cause) {
-      setActionError(
-        cause instanceof Error ? cause.message : 'Could not update credential',
-      )
-    } finally {
-      setBusyId(null)
-    }
-  }
-
-  return (
-    <FlexCol $gap="md" $width="100%">
-      {storageStatus?.warning ? (
-        <InlineBanner variant="warning">{storageStatus.warning}</InlineBanner>
-      ) : null}
-      {error ? (
-        <InlineBanner variant="danger">{error.message}</InlineBanner>
-      ) : null}
-      {actionError ? (
-        <InlineBanner variant="danger">{actionError}</InlineBanner>
-      ) : null}
-      {loading ? (
-        <Text size="sm" tone="secondary">
-          Loading credential status…
-        </Text>
-      ) : null}
-
-      {entries.map(entry => {
-        const draft = drafts[entry.id] ?? ''
-        const busy = busyId === entry.id
-
-        return (
-          <StyledEntry key={entry.id}>
-            <StyledEntryHeader>
-              <FlexCol $gap="xs">
-                <Text weight="medium">{entry.label}</Text>
-                {entry.description ? (
-                  <Text size="sm" tone="secondary">
-                    {entry.description}
-                  </Text>
-                ) : null}
-              </FlexCol>
-              <Text size="sm" tone={entry.configured ? 'primary' : 'secondary'}>
-                {entry.configured ? 'Configured' : 'Not set'}
-              </Text>
-            </StyledEntryHeader>
-
-            <FormField
-              label="Secret"
-              hint="Write-only. Existing values are never shown."
-            >
-              <TextField
-                type="password"
-                autoComplete="off"
-                placeholder={
-                  entry.configured
-                    ? 'Enter a new value to replace'
-                    : 'Paste key…'
-                }
-                value={draft}
-                disabled={loading || busy || storageBlocked}
-                onChange={event =>
-                  setDrafts(current => ({
-                    ...current,
-                    [entry.id]: event.target.value,
-                  }))
-                }
-              />
-            </FormField>
-
-            <StyledActions>
-              <Button
-                variant="primary"
-                disabled={!draft.trim() || loading || busy || storageBlocked}
-                onClick={() =>
-                  void run(entry.id, () => onSave(entry.id, draft.trim()))
-                }
-              >
-                Save
-              </Button>
-              {entry.configured ? (
-                <Button
-                  variant="subtle"
-                  disabled={loading || busy}
-                  onClick={() => void run(entry.id, () => onDelete(entry.id))}
-                >
-                  Remove
-                </Button>
-              ) : null}
-            </StyledActions>
-          </StyledEntry>
-        )
-      })}
-    </FlexCol>
-  )
-}
+import { useState } from 'react'
+import { FlexCol, FlexRow } from '../common/containers/flex.js'
+import { InlineBanner } from '../common/feedback/InlineBanner.js'
+import { EditableSecretField } from '../common/inputs/EditableSecretField.js'
+import { Text } from '../common/typography/Text.js'
+import type {
+  CredentialsEntryView,
+  CredentialsStorageStatusView,
+} from './credentialsTypes.js'
+import { CredentialProviderIcon } from './credentialProviderIcon.js'
+import { styled } from 'styled-components'
+
+export interface CredentialsPanelProps {
+  entries: CredentialsEntryView[]
+  storageStatus: CredentialsStorageStatusView | null
+  loading?: boolean
+  error?: Error | null
+  onSave: (id: string, value: string) => Promise<void>
+  onDelete: (id: string) => Promise<void>
+  /** `rows` — one unified list for settings-style surfaces. */
+  layout?: 'cards' | 'rows'
+}
+
+//#region styled-components
+
+const StyledEntry = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--platform-spacing-sm);
+  padding: var(--platform-spacing-md);
+  border: 1px solid var(--platform-colors-border);
+  border-radius: 0;
+  background: var(--platform-colors-surface);
+`
+
+const StyledEntryHeader = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--platform-spacing-md);
+`
+
+const StyledList = styled(FlexCol)`
+  gap: var(--platform-spacing-sm);
+  width: 100%;
+`
+
+const StyledCredentialRow = styled(FlexRow)`
+  align-items: center;
+  gap: var(--platform-spacing-sm);
+  min-width: 0;
+  width: 100%;
+  min-height: 32px;
+`
+
+const StyledProviderIdentity = styled(FlexRow)`
+  flex: 0 0 8.5rem;
+  width: 8.5rem;
+  align-items: center;
+  gap: var(--platform-spacing-xs);
+  min-width: 0;
+`
+
+const StyledProviderLabel = styled(Text)`
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`
+
+const StyledLabel = styled(FlexRow)`
+  align-items: center;
+  gap: var(--platform-spacing-xs);
+  min-width: 0;
+`
+
+//#endregion
+
+function CredentialEntryRow({
+  entry,
+  loading,
+  busy,
+  storageBlocked,
+  onSave,
+  onDelete,
+}: {
+  entry: CredentialsEntryView
+  loading: boolean
+  busy: boolean
+  storageBlocked: boolean
+  onSave: (value: string) => Promise<void>
+  onDelete: () => Promise<void>
+}): React.ReactElement {
+  return (
+    <StyledCredentialRow $align="center" $width="100%">
+      <StyledProviderIdentity $align="center">
+        <CredentialProviderIcon credentialId={entry.id} label={entry.label} />
+        <StyledProviderLabel weight="medium" size="sm">
+          {entry.label}
+        </StyledProviderLabel>
+      </StyledProviderIdentity>
+      <EditableSecretField
+        configured={entry.configured}
+        disabled={loading || storageBlocked}
+        busy={busy}
+        aria-label={`${entry.label} API key`}
+        onSave={onSave}
+        onRemove={entry.configured ? onDelete : undefined}
+      />
+    </StyledCredentialRow>
+  )
+}
+
+export function CredentialsPanel({
+  entries,
+  storageStatus,
+  loading = false,
+  error = null,
+  onSave,
+  onDelete,
+  layout = 'cards',
+}: CredentialsPanelProps): React.ReactElement {
+  const [busyId, setBusyId] = useState<string | null>(null)
+  const [actionError, setActionError] = useState<string | null>(null)
+
+  const storageBlocked =
+    storageStatus !== null &&
+    (!storageStatus.encryptionAvailable || !storageStatus.secure)
+
+  const run = async (
+    id: string,
+    action: () => Promise<void>,
+  ): Promise<void> => {
+    setBusyId(id)
+    setActionError(null)
+    try {
+      await action()
+    } catch (cause) {
+      setActionError(
+        cause instanceof Error ? cause.message : 'Could not update credential',
+      )
+      throw cause
+    } finally {
+      setBusyId(null)
+    }
+  }
+
+  const banners = (
+    <>
+      {storageStatus?.warning ? (
+        <InlineBanner variant="warning">{storageStatus.warning}</InlineBanner>
+      ) : null}
+      {error ? (
+        <InlineBanner variant="danger">{error.message}</InlineBanner>
+      ) : null}
+      {actionError ? (
+        <InlineBanner variant="danger">{actionError}</InlineBanner>
+      ) : null}
+      {loading ? (
+        <Text size="sm" tone="secondary">
+          Loading…
+        </Text>
+      ) : null}
+    </>
+  )
+
+  if (layout === 'rows') {
+    return (
+      <FlexCol $gap="sm" $width="100%">
+        {banners}
+        <StyledList>
+          {entries.map(entry => (
+            <CredentialEntryRow
+              key={entry.id}
+              entry={entry}
+              loading={loading}
+              busy={busyId === entry.id}
+              storageBlocked={storageBlocked}
+              onSave={value =>
+                run(entry.id, () => onSave(entry.id, value))
+              }
+              onDelete={() => run(entry.id, () => onDelete(entry.id))}
+            />
+          ))}
+        </StyledList>
+      </FlexCol>
+    )
+  }
+
+  return (
+    <FlexCol $gap="md" $width="100%">
+      {banners}
+
+      {entries.map(entry => {
+        const busy = busyId === entry.id
+
+        return (
+          <StyledEntry key={entry.id}>
+            <StyledEntryHeader>
+              <FlexCol $gap="xs">
+                <StyledLabel>
+                  <CredentialProviderIcon
+                    credentialId={entry.id}
+                    label={entry.label}
+                  />
+                  <Text weight="medium">{entry.label}</Text>
+                </StyledLabel>
+                {entry.description ? (
+                  <Text size="sm" tone="secondary">
+                    {entry.description}
+                  </Text>
+                ) : null}
+              </FlexCol>
+            </StyledEntryHeader>
+
+            <EditableSecretField
+              configured={entry.configured}
+              disabled={loading || storageBlocked}
+              busy={busy}
+              aria-label={`${entry.label} API key`}
+              onSave={value =>
+                run(entry.id, () => onSave(entry.id, value))
+              }
+              onRemove={
+                entry.configured
+                  ? () => run(entry.id, () => onDelete(entry.id))
+                  : undefined
+              }
+            />
+          </StyledEntry>
+        )
+      })}
+    </FlexCol>
+  )
+}

package/src/components/credentials/credentialProviderIcon.tsx

@@ -0,0 +1,79 @@
+import type { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon'
+import anthropicSvg from '@lobehub/icons-static-svg/icons/anthropic.svg?raw'
+import deepseekSvg from '@lobehub/icons-static-svg/icons/deepseek.svg?raw'
+import googleSvg from '@lobehub/icons-static-svg/icons/google.svg?raw'
+import kimiSvg from '@lobehub/icons-static-svg/icons/kimi.svg?raw'
+import mistralSvg from '@lobehub/icons-static-svg/icons/mistral.svg?raw'
+import openaiSvg from '@lobehub/icons-static-svg/icons/openai.svg?raw'
+import opencodeSvg from '@lobehub/icons-static-svg/icons/opencode.svg?raw'
+import openrouterSvg from '@lobehub/icons-static-svg/icons/openrouter.svg?raw'
+import perplexitySvg from '@lobehub/icons-static-svg/icons/perplexity.svg?raw'
+import qwenSvg from '@lobehub/icons-static-svg/icons/qwen.svg?raw'
+import zaiSvg from '@lobehub/icons-static-svg/icons/zai.svg?raw'
+import type { ComponentType } from 'react'
+import { styled } from 'styled-components'
+
+function lobeSvgComponent(
+  raw: string,
+): ComponentType<CustomIconComponentProps> {
+  const viewBox = raw.match(/viewBox="([^"]+)"/)?.[1] ?? '0 0 24 24'
+  const innerHtml = raw
+    .replace(/<\?xml[^>]*>/g, '')
+    .replace(/<svg[^>]*>/, '')
+    .replace(/<\/svg>\s*$/, '')
+    .replace(/<title>[\s\S]*?<\/title>/g, '')
+    .trim()
+
+  return function LobeSvg(props) {
+    return (
+      <svg
+        viewBox={viewBox}
+        width={props.width}
+        height={props.height}
+        fill="currentColor"
+        xmlns="http://www.w3.org/2000/svg"
+        dangerouslySetInnerHTML={{ __html: innerHtml }}
+      />
+    )
+  }
+}
+
+const CREDENTIAL_PROVIDER_ICONS: Record<
+  string,
+  ComponentType<CustomIconComponentProps>
+> = {
+  'openai.apiKey': lobeSvgComponent(openaiSvg),
+  'deepseek.apiKey': lobeSvgComponent(deepseekSvg),
+  'mistral.apiKey': lobeSvgComponent(mistralSvg),
+  'kimi.apiKey': lobeSvgComponent(kimiSvg),
+  'qwen.apiKey': lobeSvgComponent(qwenSvg),
+  'zai.apiKey': lobeSvgComponent(zaiSvg),
+  'openrouter.apiKey': lobeSvgComponent(openrouterSvg),
+  'opencode-zen.apiKey': lobeSvgComponent(opencodeSvg),
+  'anthropic.apiKey': lobeSvgComponent(anthropicSvg),
+  'google.apiKey': lobeSvgComponent(googleSvg),
+  'perplexity.apiKey': lobeSvgComponent(perplexitySvg),
+}
+
+const StyledMark = styled.span`
+  display: inline-flex;
+  flex-shrink: 0;
+  line-height: 0;
+  color: var(--platform-colors-text-secondary);
+`
+
+export function CredentialProviderIcon({
+  credentialId,
+}: {
+  credentialId: string
+  label: string
+}): React.ReactElement | null {
+  const component = CREDENTIAL_PROVIDER_ICONS[credentialId]
+  if (!component) return null
+  const ProviderIcon = component
+  return (
+    <StyledMark aria-hidden>
+      <ProviderIcon width={16} height={16} />
+    </StyledMark>
+  )
+}

package/src/components/credentials/credentialsTypes.ts

@@ -1,14 +1,14 @@
-/** Presentational types — no secret values, shell-only consumer. */
-export interface CredentialsEntryView {
-  id: string
-  label: string
-  description?: string
-  configured: boolean
-}
-
-export interface CredentialsStorageStatusView {
-  encryptionAvailable: boolean
-  backend: string | null
-  secure: boolean
-  warning?: string
-}
+/** Presentational types — no secret values, shell-only consumer. */
+export interface CredentialsEntryView {
+  id: string
+  label: string
+  description?: string
+  configured: boolean
+}
+
+export interface CredentialsStorageStatusView {
+  encryptionAvailable: boolean
+  backend: string | null
+  secure: boolean
+  warning?: string
+}

package/src/components/credentials/lobeIcons.d.ts

@@ -0,0 +1,4 @@
+declare module '@lobehub/icons-static-svg/icons/*.svg?raw' {
+  const content: string
+  export default content
+}