fix(ipfs2filecoin): design review follow-ups for the landing page

.github/CODEOWNERS

@@ -0,0 +1,3 @@
+# Codeowners per the FOC Engineering Workstreams proposal.
+# https://app.notion.com/p/filecoindev/FOC-Engineering-Workstreams-342dc41950c1818f99d2e857a7f3cb2e
+* @TippyFlitsUK @rjan90

.gitignore

@@ -42,3 +42,5 @@ next-env.d.ts
 
 # Local test fixtures, not part of the site
 dapper-labs-nba-topshots-cids.txt
+CLAUDE.md
+todo.md

next.config.ts

@@ -19,6 +19,17 @@ const nextConfig: NextConfig = {
   images: {
     qualities: [75, 100],
   },
+  async redirects() {
+    return [
+      // Page temporarily hidden; route code kept at src/app/service-providers.
+      // Remove this entry to restore it.
+      {
+        source: '/service-providers',
+        destination: '/',
+        permanent: false,
+      },
+    ]
+  },
   webpack: (config) => {
     config.module.rules.push(svgrRule)
     config.module.rules.push(markdownRule)

package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@filecoin-foundation/ui-filecoin": "^0.9.0",
-    "@filoz/synapse-sdk": "^1.0.1",
+    "@filoz/synapse-sdk": "^1.1.1",
     "@headlessui/react": "^2.2.9",
     "@phosphor-icons/react": "^2.1.10",
     "@radix-ui/react-accordion": "^1.2.12",

src/app/(homepage)/data/filecoin-onchain-cloud-products.ts

@@ -4,7 +4,6 @@ import { PATHS } from '@/constants/paths'
 import { FIL_BEAM_URL, FOC_URLS } from '@/constants/site-metadata'
 import aurora from '@/public/assets/aurora.webp'
 import spaceStation from '@/public/assets/space-station.webp'
-import spiralGalaxy from '@/public/assets/spiral-galaxy.webp'
 import stellarExplosionNebula from '@/public/assets/stellar-explosion-nebula.webp'
 
 const CTA_TEXT = 'Learn more'
@@ -49,14 +48,4 @@ export const filecoinOnchainCloudProducts: Array<SimpleCardWithImageProps> = [
       alt: "View of colorful aurora over Earth's atmosphere seen from space with part of a spacecraft arm visible.",
     },
   },
-  {
-    title: 'Service Providers',
-    description:
-      'A global network of operators running Filecoin Onchain Cloud nodes delivering resilient, high-availability storage infrastructure.',
-    cta: { href: PATHS.SERVICE_PROVIDERS.path, text: CTA_TEXT },
-    image: {
-      data: spiralGalaxy,
-      alt: 'Bright spiral galaxy with glowing core and extended spiral arms filled with stars.',
-    },
-  },
 ] as const satisfies Array<SimpleCardWithImageProps>

src/app/(homepage)/page.tsx

@@ -143,7 +143,7 @@ export default function Homepage() {
           title="Compose the Building Blocks"
           description="Modular services you can mix, match, and deploy, all built for openness, performance, and control."
         >
-          <CardGrid as="ul" variant="smTwoXlFourWider">
+          <CardGrid as="ul" variant="smTwoLgThreeWider">
             {filecoinOnchainCloudProducts.map(
               ({ title, description, cta, image }) => (
                 <SimpleCardWithImage

src/app/ipfs2filecoin/components/AgentPrompt.tsx

@@ -1,38 +1,54 @@
 'use client'
 
-import { Button } from '@filecoin-foundation/ui-filecoin/Button'
+import { Icon } from '@filecoin-foundation/ui-filecoin/Icon'
+import { CheckIcon, CopyIcon } from '@phosphor-icons/react/dist/ssr'
 import { usePlausible } from 'next-plausible'
 
 import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard'
 
-import { AGENT_PROMPT, PLAUSIBLE_EVENTS } from '../constants/migration'
+import { buildAgentPrompt, PLAUSIBLE_EVENTS } from '../constants/migration'
 
 type AgentPromptProps = {
   /** Where on the page the prompt was copied from, so the two spots stay distinguishable. */
   source: 'verdict' | 'agent-door'
+  /**
+   * The user's checked list. When present it is inlined into the prompt so the
+   * copied line carries the actual CIDs instead of pointing at a cids.txt the
+   * user would have to assemble themselves.
+   */
+  cids?: ReadonlyArray<string>
 }
 
-export function AgentPrompt({ source }: AgentPromptProps) {
+export function AgentPrompt({ source, cids }: AgentPromptProps) {
   const { copy, isCopied } = useCopyToClipboard()
   const plausible = usePlausible()
 
+  const prompt = buildAgentPrompt(cids)
+
   async function handleCopy() {
-    const copied = await copy(AGENT_PROMPT)
+    const copied = await copy(prompt)
 
     if (copied) {
-      plausible(PLAUSIBLE_EVENTS.promptCopied, { props: { source } })
+      plausible(PLAUSIBLE_EVENTS.promptCopied, {
+        props: { source, cidCount: cids?.length ?? 0 },
+      })
     }
   }
 
   return (
-    <div className="space-y-3">
-      <code className="block rounded-lg border border-(--color-border-muted) bg-(--color-card-background) p-3 font-mono text-(--color-paragraph-text) text-xs/relaxed">
-        {AGENT_PROMPT}
+    <div className="relative">
+      <code className="block max-h-48 overflow-y-auto whitespace-pre-wrap rounded-lg border border-(--color-border-muted) bg-(--color-card-background) p-3 pr-12 font-mono text-(--color-paragraph-text) text-xs/relaxed">
+        {prompt}
       </code>
 
-      <Button type="button" variant="ghost" onClick={handleCopy}>
-        {isCopied ? 'Copied' : 'Copy prompt'}
-      </Button>
+      <button
+        type="button"
+        onClick={handleCopy}
+        aria-label={isCopied ? 'Prompt copied' : 'Copy prompt'}
+        className="focus-visible:brand-outline absolute top-2 right-2 rounded-md border border-(--color-border-muted) bg-(--color-card-background) p-1.5 text-(--color-paragraph-text) hover:text-(--color-text-base)"
+      >
+        <Icon component={isCopied ? CheckIcon : CopyIcon} size={16} />
+      </button>
 
       <span aria-live="polite" className="sr-only">
         {isCopied ? 'Prompt copied to clipboard' : ''}