@shipfox/client-projects 17.0.0 → 22.0.0

package/.turbo/turbo-build.log

@@ -1,2 +1,2 @@
 $ shipfox-swc
-Successfully compiled: 27 files with swc (631.23ms)
+Successfully compiled: 28 files with swc (277.09ms)

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # @shipfox/client-projects
 
+## 22.0.0
+
+### Patch Changes
+
+- 7693eb3: Render empty and load-error states inside bordered panel bodies and keep loading placeholders aligned with their data regions.
+- 00c1cb8: Panels across these surfaces share one hover, focus, and elevation treatment. Grids of openable things, including the integration gallery, the available providers grid, and the harness picker, render as cells inside a single panel divided by hairlines instead of separate bordered tiles.
+- 00c1cb8: Rework the projects index into one Panel with header controls, two-column hairline cells, and preserved loading, empty, error, integration connection, and pagination states.
+- 56f4526: Project settings and project creation now use shared panels, with source integrations presented as button-style radio choices.
+- Updated dependencies [50b3867]
+- Updated dependencies [00c1cb8]
+- Updated dependencies [7693eb3]
+- Updated dependencies [00c1cb8]
+- Updated dependencies [00c1cb8]
+- Updated dependencies [56f4526]
+  - @shipfox/client-agent@22.0.0
+  - @shipfox/client-auth@22.0.0
+  - @shipfox/client-integrations@22.0.0
+  - @shipfox/client-shell@22.0.0
+  - @shipfox/react-ui@2.1.0
+  - @shipfox/client-ui@22.0.0
+
+## 21.0.0
+
+### Patch Changes
+
+- Updated dependencies [0f4abe4]
+- Updated dependencies [71d0c44]
+- Updated dependencies [9c21429]
+- Updated dependencies [30beb8f]
+- Updated dependencies [16733a7]
+- Updated dependencies [163c40a]
+- Updated dependencies [c4376a1]
+- Updated dependencies [6703982]
+- Updated dependencies [f1d127e]
+- Updated dependencies [0e860d7]
+  - @shipfox/react-ui@2.0.0
+  - @shipfox/client-shell@21.0.0
+  - @shipfox/client-agent@21.0.0
+  - @shipfox/client-auth@21.0.0
+  - @shipfox/client-integrations@21.0.0
+  - @shipfox/client-ui@21.0.0
+
 ## 17.0.0
 
 ### Patch Changes

package/dist/components/source-strip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"source-strip.d.ts","sourceRoot":"","sources":["../../src/components/source-strip.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAC,qBAAqB,EAAC,MAAM,qBAAqB,CAAC;AAE/D;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAC1B,YAAY,EACZ,oBAAoB,EACpB,IAAI,EACJ,SAAS,GACV,EAAE;IACD,YAAY,EAAE,MAAM,CAAC;IACrB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,IAAI,EAAE,qBAAqB,GAAG,IAAI,GAAG,SAAS,CAAC;IAC/C,SAAS,EAAE,OAAO,CAAC;CACpB,+BAmCA"}
+{"version":3,"file":"source-strip.d.ts","sourceRoot":"","sources":["../../src/components/source-strip.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAC,qBAAqB,EAAC,MAAM,qBAAqB,CAAC;AAE/D;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAC1B,YAAY,EACZ,oBAAoB,EACpB,IAAI,EACJ,SAAS,GACV,EAAE;IACD,YAAY,EAAE,MAAM,CAAC;IACrB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,IAAI,EAAE,qBAAqB,GAAG,IAAI,GAAG,SAAS,CAAC;IAC/C,SAAS,EAAE,OAAO,CAAC;CACpB,+BAqCA"}

package/dist/components/source-strip.js

@@ -3,6 +3,7 @@ import { useActiveWorkspace } from '@shipfox/client-auth';
 import { useSourceConnectionsQuery } from '@shipfox/client-integrations';
 import { StatusBadge } from '@shipfox/react-ui/badge';
 import { Icon } from '@shipfox/react-ui/icon';
+import { Panel } from '@shipfox/react-ui/panel';
 import { Skeleton } from '@shipfox/react-ui/skeleton';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@shipfox/react-ui/tooltip';
 import { Code, Text } from '@shipfox/react-ui/typography';
@@ -15,55 +16,58 @@ import { Code, Text } from '@shipfox/react-ui/typography';
     const workspace = useActiveWorkspace();
     const connectionsQuery = useSourceConnectionsQuery(workspace.id);
     const connection = connectionsQuery.data?.find((c)=>c.id === connectionId);
-    return /*#__PURE__*/ _jsxs("section", {
-        className: "flex flex-col gap-inline rounded-8 border border-border-neutral-base bg-background-neutral-base px-row py-row sm:flex-row sm:items-center sm:justify-between",
-        "aria-label": "Project source",
-        children: [
-            /*#__PURE__*/ _jsxs("div", {
-                className: "flex min-w-0 items-center gap-inline",
-                children: [
-                    /*#__PURE__*/ _jsx(Icon, {
-                        name: providerIconName(connection?.provider),
-                        className: "size-20 shrink-0"
-                    }),
-                    /*#__PURE__*/ _jsxs("div", {
-                        className: "flex min-w-0 flex-col gap-tight sm:flex-row sm:items-center sm:gap-inline",
-                        children: [
-                            connectionsQuery.isPending ? /*#__PURE__*/ _jsx(Skeleton, {
-                                className: "h-16 w-160"
-                            }) : /*#__PURE__*/ _jsx(Text, {
-                                size: "sm",
-                                bold: true,
-                                className: "truncate",
-                                children: connection?.displayName ?? 'Connected source'
-                            }),
-                            /*#__PURE__*/ _jsxs(Tooltip, {
-                                children: [
-                                    /*#__PURE__*/ _jsx(TooltipTrigger, {
-                                        asChild: true,
-                                        children: /*#__PURE__*/ _jsx(Code, {
-                                            variant: "label",
-                                            className: "truncate text-foreground-neutral-muted",
+    return /*#__PURE__*/ _jsx(Panel, {
+        asChild: true,
+        className: "gap-inline px-row py-row sm:flex-row sm:items-center sm:justify-between",
+        children: /*#__PURE__*/ _jsxs("section", {
+            "aria-label": "Project source",
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex min-w-0 items-center gap-inline",
+                    children: [
+                        /*#__PURE__*/ _jsx(Icon, {
+                            name: providerIconName(connection?.provider),
+                            className: "size-20 shrink-0"
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "flex min-w-0 flex-col gap-tight sm:flex-row sm:items-center sm:gap-inline",
+                            children: [
+                                connectionsQuery.isPending ? /*#__PURE__*/ _jsx(Skeleton, {
+                                    className: "h-16 w-160"
+                                }) : /*#__PURE__*/ _jsx(Text, {
+                                    size: "sm",
+                                    bold: true,
+                                    className: "truncate",
+                                    children: connection?.displayName ?? 'Connected source'
+                                }),
+                                /*#__PURE__*/ _jsxs(Tooltip, {
+                                    children: [
+                                        /*#__PURE__*/ _jsx(TooltipTrigger, {
+                                            asChild: true,
+                                            children: /*#__PURE__*/ _jsx(Code, {
+                                                variant: "label",
+                                                className: "truncate text-foreground-neutral-muted",
+                                                children: externalRepositoryId
+                                            })
+                                        }),
+                                        /*#__PURE__*/ _jsx(TooltipContent, {
                                             children: externalRepositoryId
                                         })
-                                    }),
-                                    /*#__PURE__*/ _jsx(TooltipContent, {
-                                        children: externalRepositoryId
-                                    })
-                                ]
-                            })
-                        ]
+                                    ]
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    className: "shrink-0",
+                    children: /*#__PURE__*/ _jsx(SyncBadge, {
+                        sync: sync,
+                        isPending: isPending
                     })
-                ]
-            }),
-            /*#__PURE__*/ _jsx("div", {
-                className: "shrink-0",
-                children: /*#__PURE__*/ _jsx(SyncBadge, {
-                    sync: sync,
-                    isPending: isPending
                 })
-            })
-        ]
+            ]
+        })
     });
 }
 function providerIconName(provider) {

package/dist/components/source-strip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/source-strip.tsx"],"sourcesContent":["import {useActiveWorkspace} from '@shipfox/client-auth';\nimport {useSourceConnectionsQuery} from '@shipfox/client-integrations';\nimport {StatusBadge} from '@shipfox/react-ui/badge';\nimport {Icon, type IconName} from '@shipfox/react-ui/icon';\nimport {Skeleton} from '@shipfox/react-ui/skeleton';\nimport {Tooltip, TooltipContent, TooltipTrigger} from '@shipfox/react-ui/tooltip';\nimport {Code, Text} from '@shipfox/react-ui/typography';\nimport type {DefinitionSyncSummary} from '#core/definition.js';\n\n/**\n * We cannot cheaply resolve `external_repository_id` → `owner/repo`\n * (no by-id endpoint; `listRepositories` is paginated by connection).\n * The strip surfaces the raw id as a `<Code>` chip with a tooltip carrying the\n * full string.\n */\nexport function SourceStrip({\n  connectionId,\n  externalRepositoryId,\n  sync,\n  isPending,\n}: {\n  connectionId: string;\n  externalRepositoryId: string;\n  sync: DefinitionSyncSummary | null | undefined;\n  isPending: boolean;\n}) {\n  const workspace = useActiveWorkspace();\n  const connectionsQuery = useSourceConnectionsQuery(workspace.id);\n  const connection = connectionsQuery.data?.find((c) => c.id === connectionId);\n\n  return (\n    <section\n      className=\"flex flex-col gap-inline rounded-8 border border-border-neutral-base bg-background-neutral-base px-row py-row sm:flex-row sm:items-center sm:justify-between\"\n      aria-label=\"Project source\"\n    >\n      <div className=\"flex min-w-0 items-center gap-inline\">\n        <Icon name={providerIconName(connection?.provider)} className=\"size-20 shrink-0\" />\n        <div className=\"flex min-w-0 flex-col gap-tight sm:flex-row sm:items-center sm:gap-inline\">\n          {connectionsQuery.isPending ? (\n            <Skeleton className=\"h-16 w-160\" />\n          ) : (\n            <Text size=\"sm\" bold className=\"truncate\">\n              {connection?.displayName ?? 'Connected source'}\n            </Text>\n          )}\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Code variant=\"label\" className=\"truncate text-foreground-neutral-muted\">\n                {externalRepositoryId}\n              </Code>\n            </TooltipTrigger>\n            <TooltipContent>{externalRepositoryId}</TooltipContent>\n          </Tooltip>\n        </div>\n      </div>\n      <div className=\"shrink-0\">\n        <SyncBadge sync={sync} isPending={isPending} />\n      </div>\n    </section>\n  );\n}\n\nfunction providerIconName(provider: string | undefined): IconName {\n  if (provider === 'github') return 'github' as IconName;\n  return 'componentLine' as IconName;\n}\n\nfunction SyncBadge({\n  sync,\n  isPending,\n}: {\n  sync: DefinitionSyncSummary | null | undefined;\n  isPending: boolean;\n}) {\n  if (isPending) return <StatusBadge variant=\"neutral\">Loading</StatusBadge>;\n  if (sync === undefined) return <StatusBadge variant=\"neutral\">Unavailable</StatusBadge>;\n  if (sync === null) return <StatusBadge variant=\"neutral\">No sync</StatusBadge>;\n\n  const variantByStatus = {\n    pending: 'neutral',\n    syncing: 'info',\n    succeeded: 'success',\n    failed: 'error',\n  } as const;\n\n  return (\n    <StatusBadge variant={variantByStatus[sync.status as keyof typeof variantByStatus]}>\n      {sync.status}\n    </StatusBadge>\n  );\n}\n"],"names":["useActiveWorkspace","useSourceConnectionsQuery","StatusBadge","Icon","Skeleton","Tooltip","TooltipContent","TooltipTrigger","Code","Text","SourceStrip","connectionId","externalRepositoryId","sync","isPending","workspace","connectionsQuery","id","connection","data","find","c","section","className","aria-label","div","name","providerIconName","provider","size","bold","displayName","asChild","variant","SyncBadge","undefined","variantByStatus","pending","syncing","succeeded","failed","status"],"mappings":";AAAA,SAAQA,kBAAkB,QAAO,uBAAuB;AACxD,SAAQC,yBAAyB,QAAO,+BAA+B;AACvE,SAAQC,WAAW,QAAO,0BAA0B;AACpD,SAAQC,IAAI,QAAsB,yBAAyB;AAC3D,SAAQC,QAAQ,QAAO,6BAA6B;AACpD,SAAQC,OAAO,EAAEC,cAAc,EAAEC,cAAc,QAAO,4BAA4B;AAClF,SAAQC,IAAI,EAAEC,IAAI,QAAO,+BAA+B;AAGxD;;;;;CAKC,GACD,OAAO,SAASC,YAAY,EAC1BC,YAAY,EACZC,oBAAoB,EACpBC,IAAI,EACJC,SAAS,EAMV;IACC,MAAMC,YAAYf;IAClB,MAAMgB,mBAAmBf,0BAA0Bc,UAAUE,EAAE;IAC/D,MAAMC,aAAaF,iBAAiBG,IAAI,EAAEC,KAAK,CAACC,IAAMA,EAAEJ,EAAE,KAAKN;IAE/D,qBACE,MAACW;QACCC,WAAU;QACVC,cAAW;;0BAEX,MAACC;gBAAIF,WAAU;;kCACb,KAACpB;wBAAKuB,MAAMC,iBAAiBT,YAAYU;wBAAWL,WAAU;;kCAC9D,MAACE;wBAAIF,WAAU;;4BACZP,iBAAiBF,SAAS,iBACzB,KAACV;gCAASmB,WAAU;+CAEpB,KAACd;gCAAKoB,MAAK;gCAAKC,IAAI;gCAACP,WAAU;0CAC5BL,YAAYa,eAAe;;0CAGhC,MAAC1B;;kDACC,KAACE;wCAAeyB,OAAO;kDACrB,cAAA,KAACxB;4CAAKyB,SAAQ;4CAAQV,WAAU;sDAC7BX;;;kDAGL,KAACN;kDAAgBM;;;;;;;;0BAIvB,KAACa;gBAAIF,WAAU;0BACb,cAAA,KAACW;oBAAUrB,MAAMA;oBAAMC,WAAWA;;;;;AAI1C;AAEA,SAASa,iBAAiBC,QAA4B;IACpD,IAAIA,aAAa,UAAU,OAAO;IAClC,OAAO;AACT;AAEA,SAASM,UAAU,EACjBrB,IAAI,EACJC,SAAS,EAIV;IACC,IAAIA,WAAW,qBAAO,KAACZ;QAAY+B,SAAQ;kBAAU;;IACrD,IAAIpB,SAASsB,WAAW,qBAAO,KAACjC;QAAY+B,SAAQ;kBAAU;;IAC9D,IAAIpB,SAAS,MAAM,qBAAO,KAACX;QAAY+B,SAAQ;kBAAU;;IAEzD,MAAMG,kBAAkB;QACtBC,SAAS;QACTC,SAAS;QACTC,WAAW;QACXC,QAAQ;IACV;IAEA,qBACE,KAACtC;QAAY+B,SAASG,eAAe,CAACvB,KAAK4B,MAAM,CAAiC;kBAC/E5B,KAAK4B,MAAM;;AAGlB"}
+{"version":3,"sources":["../../src/components/source-strip.tsx"],"sourcesContent":["import {useActiveWorkspace} from '@shipfox/client-auth';\nimport {useSourceConnectionsQuery} from '@shipfox/client-integrations';\nimport {StatusBadge} from '@shipfox/react-ui/badge';\nimport {Icon, type IconName} from '@shipfox/react-ui/icon';\nimport {Panel} from '@shipfox/react-ui/panel';\nimport {Skeleton} from '@shipfox/react-ui/skeleton';\nimport {Tooltip, TooltipContent, TooltipTrigger} from '@shipfox/react-ui/tooltip';\nimport {Code, Text} from '@shipfox/react-ui/typography';\nimport type {DefinitionSyncSummary} from '#core/definition.js';\n\n/**\n * We cannot cheaply resolve `external_repository_id` → `owner/repo`\n * (no by-id endpoint; `listRepositories` is paginated by connection).\n * The strip surfaces the raw id as a `<Code>` chip with a tooltip carrying the\n * full string.\n */\nexport function SourceStrip({\n  connectionId,\n  externalRepositoryId,\n  sync,\n  isPending,\n}: {\n  connectionId: string;\n  externalRepositoryId: string;\n  sync: DefinitionSyncSummary | null | undefined;\n  isPending: boolean;\n}) {\n  const workspace = useActiveWorkspace();\n  const connectionsQuery = useSourceConnectionsQuery(workspace.id);\n  const connection = connectionsQuery.data?.find((c) => c.id === connectionId);\n\n  return (\n    <Panel\n      asChild\n      className=\"gap-inline px-row py-row sm:flex-row sm:items-center sm:justify-between\"\n    >\n      <section aria-label=\"Project source\">\n        <div className=\"flex min-w-0 items-center gap-inline\">\n          <Icon name={providerIconName(connection?.provider)} className=\"size-20 shrink-0\" />\n          <div className=\"flex min-w-0 flex-col gap-tight sm:flex-row sm:items-center sm:gap-inline\">\n            {connectionsQuery.isPending ? (\n              <Skeleton className=\"h-16 w-160\" />\n            ) : (\n              <Text size=\"sm\" bold className=\"truncate\">\n                {connection?.displayName ?? 'Connected source'}\n              </Text>\n            )}\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <Code variant=\"label\" className=\"truncate text-foreground-neutral-muted\">\n                  {externalRepositoryId}\n                </Code>\n              </TooltipTrigger>\n              <TooltipContent>{externalRepositoryId}</TooltipContent>\n            </Tooltip>\n          </div>\n        </div>\n        <div className=\"shrink-0\">\n          <SyncBadge sync={sync} isPending={isPending} />\n        </div>\n      </section>\n    </Panel>\n  );\n}\n\nfunction providerIconName(provider: string | undefined): IconName {\n  if (provider === 'github') return 'github' as IconName;\n  return 'componentLine' as IconName;\n}\n\nfunction SyncBadge({\n  sync,\n  isPending,\n}: {\n  sync: DefinitionSyncSummary | null | undefined;\n  isPending: boolean;\n}) {\n  if (isPending) return <StatusBadge variant=\"neutral\">Loading</StatusBadge>;\n  if (sync === undefined) return <StatusBadge variant=\"neutral\">Unavailable</StatusBadge>;\n  if (sync === null) return <StatusBadge variant=\"neutral\">No sync</StatusBadge>;\n\n  const variantByStatus = {\n    pending: 'neutral',\n    syncing: 'info',\n    succeeded: 'success',\n    failed: 'error',\n  } as const;\n\n  return (\n    <StatusBadge variant={variantByStatus[sync.status as keyof typeof variantByStatus]}>\n      {sync.status}\n    </StatusBadge>\n  );\n}\n"],"names":["useActiveWorkspace","useSourceConnectionsQuery","StatusBadge","Icon","Panel","Skeleton","Tooltip","TooltipContent","TooltipTrigger","Code","Text","SourceStrip","connectionId","externalRepositoryId","sync","isPending","workspace","connectionsQuery","id","connection","data","find","c","asChild","className","section","aria-label","div","name","providerIconName","provider","size","bold","displayName","variant","SyncBadge","undefined","variantByStatus","pending","syncing","succeeded","failed","status"],"mappings":";AAAA,SAAQA,kBAAkB,QAAO,uBAAuB;AACxD,SAAQC,yBAAyB,QAAO,+BAA+B;AACvE,SAAQC,WAAW,QAAO,0BAA0B;AACpD,SAAQC,IAAI,QAAsB,yBAAyB;AAC3D,SAAQC,KAAK,QAAO,0BAA0B;AAC9C,SAAQC,QAAQ,QAAO,6BAA6B;AACpD,SAAQC,OAAO,EAAEC,cAAc,EAAEC,cAAc,QAAO,4BAA4B;AAClF,SAAQC,IAAI,EAAEC,IAAI,QAAO,+BAA+B;AAGxD;;;;;CAKC,GACD,OAAO,SAASC,YAAY,EAC1BC,YAAY,EACZC,oBAAoB,EACpBC,IAAI,EACJC,SAAS,EAMV;IACC,MAAMC,YAAYhB;IAClB,MAAMiB,mBAAmBhB,0BAA0Be,UAAUE,EAAE;IAC/D,MAAMC,aAAaF,iBAAiBG,IAAI,EAAEC,KAAK,CAACC,IAAMA,EAAEJ,EAAE,KAAKN;IAE/D,qBACE,KAACR;QACCmB,OAAO;QACPC,WAAU;kBAEV,cAAA,MAACC;YAAQC,cAAW;;8BAClB,MAACC;oBAAIH,WAAU;;sCACb,KAACrB;4BAAKyB,MAAMC,iBAAiBV,YAAYW;4BAAWN,WAAU;;sCAC9D,MAACG;4BAAIH,WAAU;;gCACZP,iBAAiBF,SAAS,iBACzB,KAACV;oCAASmB,WAAU;mDAEpB,KAACd;oCAAKqB,MAAK;oCAAKC,IAAI;oCAACR,WAAU;8CAC5BL,YAAYc,eAAe;;8CAGhC,MAAC3B;;sDACC,KAACE;4CAAee,OAAO;sDACrB,cAAA,KAACd;gDAAKyB,SAAQ;gDAAQV,WAAU;0DAC7BX;;;sDAGL,KAACN;sDAAgBM;;;;;;;;8BAIvB,KAACc;oBAAIH,WAAU;8BACb,cAAA,KAACW;wBAAUrB,MAAMA;wBAAMC,WAAWA;;;;;;AAK5C;AAEA,SAASc,iBAAiBC,QAA4B;IACpD,IAAIA,aAAa,UAAU,OAAO;IAClC,OAAO;AACT;AAEA,SAASK,UAAU,EACjBrB,IAAI,EACJC,SAAS,EAIV;IACC,IAAIA,WAAW,qBAAO,KAACb;QAAYgC,SAAQ;kBAAU;;IACrD,IAAIpB,SAASsB,WAAW,qBAAO,KAAClC;QAAYgC,SAAQ;kBAAU;;IAC9D,IAAIpB,SAAS,MAAM,qBAAO,KAACZ;QAAYgC,SAAQ;kBAAU;;IAEzD,MAAMG,kBAAkB;QACtBC,SAAS;QACTC,SAAS;QACTC,WAAW;QACXC,QAAQ;IACV;IAEA,qBACE,KAACvC;QAAYgC,SAASG,eAAe,CAACvB,KAAK4B,MAAM,CAAiC;kBAC/E5B,KAAK4B,MAAM;;AAGlB"}

package/dist/pages/create-project-page.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"create-project-page.d.ts","sourceRoot":"","sources":["../../src/pages/create-project-page.tsx"],"names":[],"mappings":"AAkCA,wBAAgB,iBAAiB,gCA+WhC"}
+{"version":3,"file":"create-project-page.d.ts","sourceRoot":"","sources":["../../src/pages/create-project-page.tsx"],"names":[],"mappings":"AAoCA,wBAAgB,iBAAiB,gCAyXhC"}

package/dist/pages/create-project-page.js

@@ -7,7 +7,9 @@ import { displayNameFieldError, SlugField } from '@shipfox/client-ui';
 import { Button } from '@shipfox/react-ui/button';
 import { Callout } from '@shipfox/react-ui/callout';
 import { FormField, FormFieldInput, fieldError } from '@shipfox/react-ui/form-field';
+import { Input } from '@shipfox/react-ui/input';
 import { FullPageLoader } from '@shipfox/react-ui/loader';
+import { Panel, PanelActions, PanelBody, PanelHeader, PanelTitle } from '@shipfox/react-ui/panel';
 import { toast } from '@shipfox/react-ui/toast';
 import { Header, Text } from '@shipfox/react-ui/typography';
 import { useForm } from '@tanstack/react-form';
@@ -185,20 +187,10 @@ export function CreateProjectPage() {
     return /*#__PURE__*/ _jsxs("div", {
         className: "flex w-full flex-col gap-section",
         children: [
-            /*#__PURE__*/ _jsxs("header", {
-                className: "flex flex-col gap-inline",
-                children: [
-                    /*#__PURE__*/ _jsx(Header, {
-                        id: "create-project-title",
-                        variant: "h1",
-                        children: "Create project"
-                    }),
-                    /*#__PURE__*/ _jsx(Text, {
-                        size: "sm",
-                        className: "text-foreground-neutral-muted",
-                        children: "A Shipfox project starts from a Git repository. Choose the repository Shipfox should track, then give the project a name."
-                    })
-                ]
+            /*#__PURE__*/ _jsx(Header, {
+                id: "create-project-title",
+                variant: "h1",
+                children: "Create project"
             }),
             /*#__PURE__*/ _jsx(ModelProviderReminderBanner, {
                 workspaceId: workspace.id
@@ -237,184 +229,178 @@ export function CreateProjectPage() {
                     /*#__PURE__*/ _jsxs("div", {
                         className: "flex min-w-0 flex-col gap-region",
                         children: [
-                            /*#__PURE__*/ _jsxs("section", {
-                                className: "flex flex-col gap-group",
+                            connections.length > 0 ? /*#__PURE__*/ _jsx("section", {
                                 "aria-label": "Source integration",
-                                children: [
-                                    /*#__PURE__*/ _jsxs("div", {
-                                        className: "flex items-start justify-between gap-group",
-                                        children: [
-                                            /*#__PURE__*/ _jsxs("div", {
-                                                className: "flex flex-col gap-tight",
-                                                children: [
-                                                    /*#__PURE__*/ _jsx(Header, {
-                                                        variant: "h3",
-                                                        children: "Source integration"
-                                                    }),
-                                                    /*#__PURE__*/ _jsx(Text, {
+                                children: /*#__PURE__*/ _jsxs(Panel, {
+                                    children: [
+                                        /*#__PURE__*/ _jsxs(PanelHeader, {
+                                            children: [
+                                                /*#__PURE__*/ _jsx(PanelTitle, {
+                                                    children: "Source integration"
+                                                }),
+                                                connections.length === 1 ? /*#__PURE__*/ _jsx(PanelActions, {
+                                                    children: /*#__PURE__*/ _jsx(Button, {
+                                                        asChild: true,
+                                                        variant: "transparent",
                                                         size: "sm",
-                                                        className: "text-foreground-neutral-muted",
-                                                        children: "Choose the integration that can access the repository."
+                                                        className: "shrink-0",
+                                                        children: /*#__PURE__*/ _jsx(Link, {
+                                                            to: "/w/$workspaceSlug/integrations",
+                                                            params: {
+                                                                workspaceSlug: workspace.slug
+                                                            },
+                                                            children: "Add another integration"
+                                                        })
                                                     })
-                                                ]
-                                            }),
-                                            connections.length === 1 ? /*#__PURE__*/ _jsx(Button, {
-                                                asChild: true,
-                                                variant: "transparent",
-                                                size: "sm",
-                                                className: "shrink-0",
-                                                children: /*#__PURE__*/ _jsx(Link, {
-                                                    to: "/w/$workspaceSlug/integrations",
-                                                    params: {
-                                                        workspaceSlug: workspace.slug
-                                                    },
-                                                    children: "Add another integration"
-                                                })
-                                            }) : null
-                                        ]
-                                    }),
-                                    connections.length > 0 ? /*#__PURE__*/ _jsx(ConnectionPicker, {
-                                        connections: connections,
-                                        selectedConnectionId: effectiveSelectedConnectionId,
-                                        onSelect: selectConnection
-                                    }) : null
-                                ]
-                            }),
-                            showRepoPicker ? /*#__PURE__*/ _jsxs("section", {
-                                className: "flex flex-col gap-group",
+                                                }) : null
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ _jsx(PanelBody, {
+                                            children: /*#__PURE__*/ _jsx(ConnectionPicker, {
+                                                connections: connections,
+                                                selectedConnectionId: effectiveSelectedConnectionId,
+                                                onSelect: selectConnection
+                                            })
+                                        })
+                                    ]
+                                })
+                            }) : null,
+                            showRepoPicker ? /*#__PURE__*/ _jsx("section", {
                                 "aria-label": "Repository",
-                                children: [
-                                    /*#__PURE__*/ _jsxs("div", {
-                                        className: "flex flex-col gap-tight",
-                                        children: [
-                                            /*#__PURE__*/ _jsx(Header, {
-                                                variant: "h3",
-                                                children: "Repository"
-                                            }),
-                                            /*#__PURE__*/ _jsx(Text, {
-                                                size: "sm",
-                                                className: "text-foreground-neutral-muted",
-                                                children: "Select the repository this project tracks."
+                                children: /*#__PURE__*/ _jsxs(Panel, {
+                                    children: [
+                                        /*#__PURE__*/ _jsxs(PanelHeader, {
+                                            className: "flex-wrap",
+                                            children: [
+                                                /*#__PURE__*/ _jsx(PanelTitle, {
+                                                    children: "Repository"
+                                                }),
+                                                /*#__PURE__*/ _jsx(PanelActions, {
+                                                    className: "min-w-0 max-[640px]:ml-0 max-[640px]:basis-full",
+                                                    children: /*#__PURE__*/ _jsx(Input, {
+                                                        type: "search",
+                                                        placeholder: "Search repositories…",
+                                                        "aria-label": "Search repositories",
+                                                        value: repoFilter,
+                                                        onChange: (event)=>setRepoFilter(event.target.value),
+                                                        className: "w-full max-w-[320px]"
+                                                    })
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ _jsx(PanelBody, {
+                                            children: /*#__PURE__*/ _jsx(RepositoryPicker, {
+                                                repositories: repositories,
+                                                selectedRepositoryId: selectedRepositoryId,
+                                                onSelect: setSelectedRepositoryId,
+                                                isLoading: repositoriesQuery.isPending,
+                                                isFetchingNextPage: repositoriesQuery.isFetchingNextPage,
+                                                hasNextPage: repositoriesQuery.hasNextPage,
+                                                onLoadMore: ()=>repositoriesQuery.fetchNextPage(),
+                                                emptyMessage: filteredEmptyMessage
                                             })
-                                        ]
-                                    }),
-                                    /*#__PURE__*/ _jsx(RepositoryPicker, {
-                                        repositories: repositories,
-                                        selectedRepositoryId: selectedRepositoryId,
-                                        onSelect: setSelectedRepositoryId,
-                                        isLoading: repositoriesQuery.isPending,
-                                        isFetchingNextPage: repositoriesQuery.isFetchingNextPage,
-                                        hasNextPage: repositoriesQuery.hasNextPage,
-                                        onLoadMore: ()=>repositoriesQuery.fetchNextPage(),
-                                        emptyMessage: filteredEmptyMessage,
-                                        searchValue: repoFilter,
-                                        onSearchChange: setRepoFilter
-                                    })
-                                ]
+                                        })
+                                    ]
+                                })
                             }) : null
                         ]
                     }),
                     /*#__PURE__*/ _jsx("aside", {
                         className: "lg:sticky lg:top-32",
-                        children: /*#__PURE__*/ _jsxs("div", {
-                            className: "flex flex-col gap-group rounded-8 border border-border-neutral-base bg-background-neutral-base p-panel",
+                        children: /*#__PURE__*/ _jsxs(Panel, {
                             children: [
-                                /*#__PURE__*/ _jsxs("div", {
-                                    className: "flex flex-col gap-tight",
-                                    children: [
-                                        /*#__PURE__*/ _jsx(Header, {
-                                            variant: "h3",
-                                            children: "Project details"
-                                        }),
-                                        /*#__PURE__*/ _jsx(Text, {
-                                            size: "sm",
-                                            className: "text-foreground-neutral-muted",
-                                            children: "Confirm the source and create the project."
-                                        })
-                                    ]
-                                }),
-                                formError ? /*#__PURE__*/ _jsx(Callout, {
-                                    role: "alert",
-                                    type: "error",
-                                    children: /*#__PURE__*/ _jsx("div", {
-                                        ref: errorRef,
-                                        tabIndex: -1,
-                                        children: formError
+                                /*#__PURE__*/ _jsx(PanelHeader, {
+                                    children: /*#__PURE__*/ _jsx(PanelTitle, {
+                                        children: "Project details"
                                     })
-                                }) : null,
-                                /*#__PURE__*/ _jsx(ProjectSummary, {
-                                    connection: selectedConnection,
-                                    repositoryName: selectedRepository?.fullName
                                 }),
-                                /*#__PURE__*/ _jsx(form.Field, {
-                                    name: "name",
-                                    validators: {
-                                        onBlur: ({ value })=>displayNameFieldError(value, 'Project name', createProjectBodySchema.shape.name),
-                                        onSubmit: ({ value })=>displayNameFieldError(value, 'Project name', createProjectBodySchema.shape.name)
-                                    },
-                                    children: (field)=>/*#__PURE__*/ _jsx(FormField, {
-                                            label: "Project name",
-                                            id: "project-name",
-                                            error: fieldError(field),
-                                            children: /*#__PURE__*/ _jsx(FormFieldInput, {
-                                                name: "name",
-                                                type: "text",
-                                                value: field.state.value,
-                                                onChange: (event)=>{
-                                                    const nextName = event.target.value;
-                                                    setNameTouched(true);
-                                                    field.handleChange(nextName);
-                                                    if (!slugManuallyEdited) {
-                                                        setSlugCheckEnabled(true);
-                                                        setSlugConflict(false);
-                                                        form.setFieldValue('slug', slugifyName(nextName, {
-                                                            fallback: 'project'
-                                                        }));
-                                                    }
-                                                },
-                                                onBlur: field.handleBlur,
-                                                placeholder: "Platform"
+                                /*#__PURE__*/ _jsxs(PanelBody, {
+                                    className: "gap-group p-panel",
+                                    children: [
+                                        formError ? /*#__PURE__*/ _jsx(Callout, {
+                                            role: "alert",
+                                            type: "error",
+                                            children: /*#__PURE__*/ _jsx("div", {
+                                                ref: errorRef,
+                                                tabIndex: -1,
+                                                children: formError
                                             })
-                                        })
-                                }),
-                                /*#__PURE__*/ _jsx(form.Field, {
-                                    name: "slug",
-                                    validators: {
-                                        onBlur: createProjectBodySchema.shape.slug,
-                                        onSubmit: createProjectBodySchema.shape.slug
-                                    },
-                                    children: (field)=>/*#__PURE__*/ _jsx(SlugField, {
-                                            id: "project-slug",
-                                            label: "Project slug",
+                                        }) : null,
+                                        /*#__PURE__*/ _jsx(ProjectSummary, {
+                                            connection: selectedConnection,
+                                            repositoryName: selectedRepository?.fullName
+                                        }),
+                                        /*#__PURE__*/ _jsx(form.Field, {
+                                            name: "name",
+                                            validators: {
+                                                onBlur: ({ value })=>displayNameFieldError(value, 'Project name', createProjectBodySchema.shape.name),
+                                                onSubmit: ({ value })=>displayNameFieldError(value, 'Project name', createProjectBodySchema.shape.name)
+                                            },
+                                            children: (field)=>/*#__PURE__*/ _jsx(FormField, {
+                                                    label: "Project name",
+                                                    id: "project-name",
+                                                    error: fieldError(field),
+                                                    children: /*#__PURE__*/ _jsx(FormFieldInput, {
+                                                        name: "name",
+                                                        type: "text",
+                                                        value: field.state.value,
+                                                        onChange: (event)=>{
+                                                            const nextName = event.target.value;
+                                                            setNameTouched(true);
+                                                            field.handleChange(nextName);
+                                                            if (!slugManuallyEdited) {
+                                                                setSlugCheckEnabled(true);
+                                                                setSlugConflict(false);
+                                                                form.setFieldValue('slug', slugifyName(nextName, {
+                                                                    fallback: 'project'
+                                                                }));
+                                                            }
+                                                        },
+                                                        onBlur: field.handleBlur,
+                                                        placeholder: "Platform"
+                                                    })
+                                                })
+                                        }),
+                                        /*#__PURE__*/ _jsx(form.Field, {
                                             name: "slug",
-                                            value: field.state.value,
-                                            onChange: (value)=>{
-                                                setSlugManuallyEdited(true);
-                                                setSlugCheckEnabled(true);
-                                                setSlugConflict(false);
-                                                field.handleChange(value);
+                                            validators: {
+                                                onBlur: createProjectBodySchema.shape.slug,
+                                                onSubmit: createProjectBodySchema.shape.slug
                                             },
-                                            onBlur: field.handleBlur,
-                                            error: slugConflict ? 'This project slug is already in use.' : fieldError(field),
-                                            description: /*#__PURE__*/ _jsx("span", {
-                                                className: "font-code",
-                                                children: `/w/${workspace.slug}/p/${field.state.value}`
-                                            }),
-                                            placeholder: "platform",
-                                            className: "font-code",
-                                            checkEnabled: slugCheckEnabled,
-                                            debounceMs: 0,
-                                            isValid: isSlugValid,
-                                            checkAvailability: checkProjectSlugAvailability
+                                            children: (field)=>/*#__PURE__*/ _jsx(SlugField, {
+                                                    id: "project-slug",
+                                                    label: "Project slug",
+                                                    name: "slug",
+                                                    value: field.state.value,
+                                                    onChange: (value)=>{
+                                                        setSlugManuallyEdited(true);
+                                                        setSlugCheckEnabled(true);
+                                                        setSlugConflict(false);
+                                                        field.handleChange(value);
+                                                    },
+                                                    onBlur: field.handleBlur,
+                                                    error: slugConflict ? 'This project slug is already in use.' : fieldError(field),
+                                                    description: /*#__PURE__*/ _jsx("span", {
+                                                        className: "font-code",
+                                                        children: `/w/${workspace.slug}/p/${field.state.value}`
+                                                    }),
+                                                    placeholder: "platform",
+                                                    className: "font-code",
+                                                    checkEnabled: slugCheckEnabled,
+                                                    debounceMs: 0,
+                                                    isValid: isSlugValid,
+                                                    checkAvailability: checkProjectSlugAvailability
+                                                })
+                                        }),
+                                        /*#__PURE__*/ _jsx(Button, {
+                                            type: "submit",
+                                            iconRight: "chevronRight",
+                                            isLoading: createProject.isPending,
+                                            disabled: !selectedConnection || !selectedRepository,
+                                            className: "w-full",
+                                            children: "Create project"
                                         })
-                                }),
-                                /*#__PURE__*/ _jsx(Button, {
-                                    type: "submit",
-                                    iconRight: "chevronRight",
-                                    isLoading: createProject.isPending,
-                                    disabled: !selectedConnection || !selectedRepository,
-                                    className: "w-full",
-                                    children: "Create project"
+                                    ]
                                 })
                             ]
                         })