@shipfox/client-secrets 5.0.0 → 6.0.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shipfox/client-secrets",
   "license": "MIT",
-  "version": "5.0.0",
+  "version": "6.0.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ShipfoxHQ/shipfox.git",
@@ -10,10 +10,6 @@
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
-  "imports": {
-    "#*": "./dist/*",
-    "#test/*": "./test/*"
-  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -31,17 +27,20 @@
   "dependencies": {
     "@swc/helpers": "^0.5.17",
     "@tanstack/react-form": "^1.32.0",
-    "@shipfox/api-secrets-dto": "6.0.0",
-    "@shipfox/client-api": "4.0.0",
-    "@shipfox/client-shell": "5.0.0",
-    "@shipfox/client-ui": "4.0.0",
-    "@shipfox/react-ui": "0.3.5"
+    "@shipfox/api-secrets-dto": "9.0.1",
+    "@shipfox/react-ui": "0.3.6",
+    "@shipfox/client-shell": "6.0.1",
+    "@shipfox/client-ui": "6.0.1",
+    "@shipfox/client-api": "6.0.1"
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.101.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
+  "imports": {
+    "#*": "./dist/*"
+  },
   "scripts": {
     "build": "shipfox-swc",
     "check": "shipfox-biome-check",

package/src/components/form-errors.test.ts

@@ -53,10 +53,10 @@ describe('secretsErrorToFormError', () => {
     expect(result).toEqual({kind: 'form', message: 'raw server message'});
   });
 
-  test('maps a plain Error to a form-level alert with its message', () => {
+  test('does not expose a raw Error message', () => {
     const result = secretsErrorToFormError(new Error('boom'));
 
-    expect(result).toEqual({kind: 'form', message: 'boom'});
+    expect(result).toEqual({kind: 'form', message: 'Something went wrong. Try again.'});
   });
 
   test('falls back to generic copy for a non-Error throwable', () => {

package/src/components/form-errors.ts

@@ -52,8 +52,5 @@ export function secretsErrorToFormError(error: unknown): SecretsFormErrorMapping
         return {kind: 'form', message: error.message};
     }
   }
-  if (error instanceof Error) {
-    return {kind: 'form', message: error.message};
-  }
   return {kind: 'form', message: 'Something went wrong. Try again.'};
 }

package/src/components/secret-form.tsx

@@ -1,4 +1,3 @@
-import {isShortSecretValue} from '@shipfox/api-secrets-dto';
 import {Button, IconButton} from '@shipfox/react-ui/button';
 import {Callout} from '@shipfox/react-ui/callout';
 import {
@@ -10,10 +9,16 @@ import {
 import {Text} from '@shipfox/react-ui/typography';
 import {useForm} from '@tanstack/react-form';
 import {useState} from 'react';
+import {
+  normalizeStoreKey,
+  STORE_KEY_HELP,
+  shouldWarnShortSecretValue,
+  validateNewStoreKey,
+  workspaceStoreScope,
+} from '#core/store.js';
 import {usePutSecretMutation} from '#hooks/api/secrets.js';
 import {secretsErrorToFormError} from './form-errors.js';
 import {FormBody, FormFooter} from './form-shell.js';
-import {STORE_KEY_HELP, validateNewStoreKey} from './store-key.js';
 
 export const SECRET_FORM_ID = 'secret-form';
 
@@ -45,7 +50,12 @@ export function SecretForm({
     onSubmit: async ({value}) => {
       setFormError(undefined);
       try {
-        await putSecret.mutateAsync({workspaceId, key: value.key, body: {value: value.value}});
+        await putSecret.mutateAsync({
+          workspaceId,
+          key: normalizeStoreKey(value.key),
+          value: value.value,
+          scope: workspaceStoreScope,
+        });
         onSaved();
       } catch (error) {
         const mapped = secretsErrorToFormError(error);
@@ -96,7 +106,7 @@ export function SecretForm({
                   disabled={mode === 'edit'}
                   placeholder="MY_TOKEN"
                   value={field.state.value}
-                  onChange={(event) => field.handleChange(event.target.value.toUpperCase())}
+                  onChange={(event) => field.handleChange(normalizeStoreKey(event.target.value))}
                   onBlur={field.handleBlur}
                 />
               </FormField>
@@ -139,7 +149,7 @@ export function SecretForm({
                     onClick={() => setShowValue((prev) => !prev)}
                   />
                 </div>
-                {isShortSecretValue(field.state.value, SHORT_VALUE_THRESHOLD) ? (
+                {shouldWarnShortSecretValue(field.state.value, SHORT_VALUE_THRESHOLD) ? (
                   <Callout role="alert" type="warning">
                     <Text size="sm">
                       Very short secrets can match ordinary log text and redact unrelated output. If

package/src/components/variable-form.tsx

@@ -1,4 +1,3 @@
-import {isSensitiveSecretName} from '@shipfox/api-secrets-dto';
 import {Button} from '@shipfox/react-ui/button';
 import {Callout} from '@shipfox/react-ui/callout';
 import {
@@ -10,10 +9,16 @@ import {
 import {Text} from '@shipfox/react-ui/typography';
 import {useForm} from '@tanstack/react-form';
 import {useEffect, useRef, useState} from 'react';
+import {
+  normalizeStoreKey,
+  STORE_KEY_HELP,
+  shouldWarnSensitiveVariableName,
+  validateNewStoreKey,
+  workspaceStoreScope,
+} from '#core/store.js';
 import {usePutVariableMutation, useVariableQuery} from '#hooks/api/variables.js';
 import {secretsErrorToFormError} from './form-errors.js';
 import {FormBody, FormFooter} from './form-shell.js';
-import {STORE_KEY_HELP, validateNewStoreKey} from './store-key.js';
 
 export const VARIABLE_FORM_ID = 'variable-form';
 
@@ -49,7 +54,12 @@ export function VariableForm({
     onSubmit: async ({value}) => {
       setFormError(undefined);
       try {
-        await putVariable.mutateAsync({workspaceId, key: value.key, body: {value: value.value}});
+        await putVariable.mutateAsync({
+          workspaceId,
+          key: normalizeStoreKey(value.key),
+          value: value.value,
+          scope: workspaceStoreScope,
+        });
         onSaved();
       } catch (error) {
         const mapped = secretsErrorToFormError(error);
@@ -115,10 +125,10 @@ export function VariableForm({
                   disabled={mode === 'edit'}
                   placeholder="LOG_LEVEL"
                   value={field.state.value}
-                  onChange={(event) => field.handleChange(event.target.value.toUpperCase())}
+                  onChange={(event) => field.handleChange(normalizeStoreKey(event.target.value))}
                   onBlur={field.handleBlur}
                 />
-                {isSensitiveSecretName(field.state.value) ? (
+                {shouldWarnSensitiveVariableName(field.state.value) ? (
                   <Callout role="alert" type="warning">
                     <Text size="sm" aria-live="polite">
                       This looks like it may be sensitive. Variables are stored in plaintext and are

package/src/components/workspace-secrets-section.stories.tsx

@@ -1,4 +1,3 @@
-import type {SecretDto} from '@shipfox/api-secrets-dto';
 import {configureApiClient} from '@shipfox/client-api';
 import {Toaster} from '@shipfox/react-ui/toast';
 import type {Decorator, Meta, StoryObj} from '@storybook/react';
@@ -25,7 +24,7 @@ const withFrozenClock: Decorator = (Story) => {
 const WORKSPACE_ID = '11111111-1111-4111-8111-111111111111';
 const EDITOR_ID = '22222222-2222-4222-8222-222222222222';
 
-const SECRETS: SecretDto[] = [
+const SECRETS = [
   {
     key: 'API_TOKEN',
     project_id: null,

package/src/components/workspace-secrets-section.tsx

@@ -1,4 +1,3 @@
-import type {SecretDto} from '@shipfox/api-secrets-dto';
 import {QueryLoadError} from '@shipfox/client-ui';
 import {Button, IconButton} from '@shipfox/react-ui/button';
 import {
@@ -21,6 +20,7 @@ import {
 import {toast} from '@shipfox/react-ui/toast';
 import {Code, Header, Text} from '@shipfox/react-ui/typography';
 import {useMemo, useState} from 'react';
+import {type SecretMetadata, workspaceStoreScope} from '#core/store.js';
 import {useDeleteSecretMutation, useSecretsQuery} from '#hooks/api/secrets.js';
 import {copyKeyName} from './copy-key.js';
 import {DeleteEntryDialog} from './delete-entry-dialog.js';
@@ -159,7 +159,11 @@ export function WorkspaceSecretsSection({workspaceId}: {workspaceId: string}) {
           if (deleteKey === null) return;
           setDeleteError(undefined);
           try {
-            await deleteSecret.mutateAsync({workspaceId, key: deleteKey});
+            await deleteSecret.mutateAsync({
+              workspaceId,
+              key: deleteKey,
+              scope: workspaceStoreScope,
+            });
             toast.success('Secret deleted');
             closeDelete();
           } catch (error) {
@@ -176,7 +180,7 @@ function SecretRow({
   onEdit,
   onDelete,
 }: {
-  secret: SecretDto;
+  secret: SecretMetadata;
   onEdit: () => void;
   onDelete: () => void;
 }) {
@@ -204,7 +208,7 @@ function SecretRow({
         </span>
       </TableCell>
       <TableCell className="text-foreground-neutral-muted">
-        <RelativeTime value={secret.updated_at} />
+        <RelativeTime value={secret.updatedAt} />
       </TableCell>
       <TableCell className="text-right">
         <DropdownMenu>

package/src/components/workspace-variables-section.stories.tsx

@@ -1,4 +1,3 @@
-import type {VariableListItemDto} from '@shipfox/api-secrets-dto';
 import {configureApiClient} from '@shipfox/client-api';
 import {Toaster} from '@shipfox/react-ui/toast';
 import type {Decorator, Meta, StoryObj} from '@storybook/react';
@@ -25,7 +24,7 @@ const withFrozenClock: Decorator = (Story) => {
 const WORKSPACE_ID = '11111111-1111-4111-8111-111111111111';
 const EDITOR_ID = '22222222-2222-4222-8222-222222222222';
 
-const VARIABLES: VariableListItemDto[] = [
+const VARIABLES = [
   {
     key: 'LOG_LEVEL',
     value: 'debug',

package/src/components/workspace-variables-section.tsx

@@ -1,4 +1,3 @@
-import type {VariableListItemDto} from '@shipfox/api-secrets-dto';
 import {QueryLoadError} from '@shipfox/client-ui';
 import {Button, IconButton} from '@shipfox/react-ui/button';
 import {
@@ -21,6 +20,7 @@ import {
 import {toast} from '@shipfox/react-ui/toast';
 import {Code, Header, Text} from '@shipfox/react-ui/typography';
 import {useMemo, useState} from 'react';
+import {type VariablePreview, workspaceStoreScope} from '#core/store.js';
 import {useDeleteVariableMutation, useVariablesQuery} from '#hooks/api/variables.js';
 import {copyKeyName} from './copy-key.js';
 import {DeleteEntryDialog} from './delete-entry-dialog.js';
@@ -33,7 +33,7 @@ const VARIABLES_DESCRIPTION =
 const EMPTY_VARIABLES_DESCRIPTION =
   'Create a variable to store non-sensitive configuration like regions, flags, and log levels.';
 
-type FormState = {mode: 'create'} | {mode: 'edit'; variable: VariableListItemDto} | null;
+type FormState = {mode: 'create'} | {mode: 'edit'; variable: VariablePreview} | null;
 
 export function WorkspaceVariablesSection({workspaceId}: {workspaceId: string}) {
   const variablesQuery = useVariablesQuery(workspaceId);
@@ -137,7 +137,7 @@ export function WorkspaceVariablesSection({workspaceId}: {workspaceId: string})
               existingKey={formState.mode === 'edit' ? formState.variable.key : undefined}
               existingValue={formState.mode === 'edit' ? formState.variable.value : undefined}
               existingValueTruncated={
-                formState.mode === 'edit' ? formState.variable.value_truncated : undefined
+                formState.mode === 'edit' ? formState.variable.valueTruncated : undefined
               }
               reservedKeys={variables.map((variable) => variable.key)}
               onSaved={() => {
@@ -163,7 +163,11 @@ export function WorkspaceVariablesSection({workspaceId}: {workspaceId: string})
           if (deleteKey === null) return;
           setDeleteError(undefined);
           try {
-            await deleteVariable.mutateAsync({workspaceId, key: deleteKey});
+            await deleteVariable.mutateAsync({
+              workspaceId,
+              key: deleteKey,
+              scope: workspaceStoreScope,
+            });
             toast.success('Variable deleted');
             closeDelete();
           } catch (error) {
@@ -180,7 +184,7 @@ function VariableRow({
   onEdit,
   onDelete,
 }: {
-  variable: VariableListItemDto;
+  variable: VariablePreview;
   onEdit: () => void;
   onDelete: () => void;
 }) {
@@ -211,7 +215,7 @@ function VariableRow({
         </span>
       </TableCell>
       <TableCell className="text-foreground-neutral-muted">
-        <RelativeTime value={variable.updated_at} />
+        <RelativeTime value={variable.updatedAt} />
       </TableCell>
       <TableCell className="text-right">
         <DropdownMenu>

package/src/core/store.test.ts

@@ -0,0 +1,38 @@
+import {
+  normalizeStoreKey,
+  STORE_KEY_HELP,
+  shouldWarnSensitiveVariableName,
+  shouldWarnShortSecretValue,
+  validateNewStoreKey,
+  validateStoreKey,
+} from './store.js';
+
+describe('store policy', () => {
+  test('normalizes keys and enforces the store key format', () => {
+    expect(normalizeStoreKey('my_token')).toBe('MY_TOKEN');
+    expect(validateStoreKey('MY_TOKEN')).toBeUndefined();
+    expect(validateStoreKey('my token')).toBe(STORE_KEY_HELP);
+  });
+
+  test('prevents create mode from overwriting an existing write-only secret', () => {
+    expect(
+      validateNewStoreKey('API_TOKEN', {
+        mode: 'create',
+        reservedKeys: ['API_TOKEN'],
+        kind: 'secret',
+      }),
+    ).toBe('A secret with this name already exists. Edit it instead.');
+  });
+
+  test('keeps edit mode and warning interpretation explicit', () => {
+    expect(
+      validateNewStoreKey('API_TOKEN', {
+        mode: 'edit',
+        reservedKeys: ['API_TOKEN'],
+        kind: 'secret',
+      }),
+    ).toBeUndefined();
+    expect(shouldWarnShortSecretValue('short', 12)).toBe(true);
+    expect(shouldWarnSensitiveVariableName('API_TOKEN')).toBe(true);
+  });
+});

package/src/core/store.ts

@@ -0,0 +1,91 @@
+export const STORE_KEY_HELP =
+  'Uppercase letters, digits and underscores; must start with a letter or underscore.';
+
+// This policy intentionally lives here so the package core stays independent of transport DTOs.
+const STORE_KEY_PATTERN = /^[A-Z_][A-Z0-9_]*$/;
+const STORE_KEY_MAX_LENGTH = 128;
+const SENSITIVE_NAME_PATTERNS = ['TOKEN', 'SECRET', 'PASSWORD', 'KEY'];
+
+export type StoreScope = {kind: 'workspace'} | {kind: 'project'; projectId: string};
+
+export const workspaceStoreScope: StoreScope = {kind: 'workspace'};
+
+export interface StoreMetadata {
+  key: string;
+  scope: StoreScope;
+  createdAt: string;
+  updatedAt: string;
+  lastEditedBy: string | null;
+}
+
+export type SecretMetadata = StoreMetadata;
+
+export interface VariablePreview extends StoreMetadata {
+  value: string;
+  valueState: 'preview';
+  valueTruncated: boolean;
+}
+
+export interface Variable extends StoreMetadata {
+  value: string;
+  valueState: 'full';
+}
+
+export interface StoreWriteWarning {
+  code: 'short-secret-value' | 'sensitive-variable-name';
+  key: string;
+}
+
+export interface PutStoreCommand {
+  workspaceId: string;
+  key: string;
+  value: string;
+  scope: StoreScope;
+}
+
+export type PutSecretCommand = PutStoreCommand;
+export type PutVariableCommand = PutStoreCommand;
+
+export interface DeleteStoreCommand {
+  workspaceId: string;
+  key: string;
+  scope: StoreScope;
+}
+
+export function normalizeStoreKey(key: string): string {
+  return key.toUpperCase();
+}
+
+export function validateStoreKey(key: string): string | undefined {
+  return key.length > 0 && key.length <= STORE_KEY_MAX_LENGTH && STORE_KEY_PATTERN.test(key)
+    ? undefined
+    : STORE_KEY_HELP;
+}
+
+export function validateNewStoreKey(
+  key: string,
+  params: {mode: 'create' | 'edit'; reservedKeys: readonly string[]; kind: 'secret' | 'variable'},
+): string | undefined {
+  const formatError = validateStoreKey(key);
+  if (formatError) return formatError;
+  if (params.mode === 'create' && params.reservedKeys.includes(key)) {
+    return `A ${params.kind} with this name already exists. Edit it instead.`;
+  }
+  return undefined;
+}
+
+export function shouldWarnShortSecretValue(value: string, threshold: number): boolean {
+  return value.length > 0 && value.length < threshold;
+}
+
+export function shouldWarnSensitiveVariableName(key: string): boolean {
+  return SENSITIVE_NAME_PATTERNS.some((pattern) => key.includes(pattern));
+}
+
+export function projectIdFromScope(scope: StoreScope): string | undefined {
+  return scope.kind === 'project' ? scope.projectId : undefined;
+}
+
+export function scopeFromProjectId(projectId: string | null): StoreScope {
+  return projectId ? {kind: 'project', projectId} : workspaceStoreScope;
+}

package/src/feature.ts

@@ -1,4 +1,15 @@
-import {defineClientFeature} from '@shipfox/client-shell';
+import {defineClientFeature, type SettingsSectionEntry} from '@shipfox/client-shell';
+
+export const secretsSettingsSections = [
+  {id: 'settings.secrets', pathSegment: 'secrets', label: 'Secrets', icon: 'keyLine', order: 500},
+  {
+    id: 'settings.variables',
+    pathSegment: 'variables',
+    label: 'Variables',
+    icon: 'bracesLine',
+    order: 600,
+  },
+] as const satisfies readonly SettingsSectionEntry[];
 
 export const secretsFeature = defineClientFeature({
   id: 'shipfox.secrets',
@@ -14,14 +25,5 @@ export const secretsFeature = defineClientFeature({
       impl: '@shipfox/client-secrets/routes/variables-settings',
     },
   ],
-  settingsSections: [
-    {id: 'settings.secrets', pathSegment: 'secrets', label: 'Secrets', icon: 'keyLine', order: 500},
-    {
-      id: 'settings.variables',
-      pathSegment: 'variables',
-      label: 'Variables',
-      icon: 'bracesLine',
-      order: 600,
-    },
-  ],
+  settingsSections: secretsSettingsSections,
 });