feat: show README for prompts when available

README.md

@@ -61,3 +61,9 @@ Then run:
 ```bash
 npm run generate-icons
 ```
+
+## Update built-in prompt presets:
+
+```bash
+npm run fetch-prompt-presets
+```

package.json

@@ -8,6 +8,7 @@
     "build": "tsc -b && vite build",
     "generate-client": "npm run fetch-openapi-schema && npm run openapi-ts",
     "fetch-openapi-schema": "curl https://raw.githubusercontent.com/stacklok/codegate/refs/heads/main/api/openapi.json > src/api/openapi.json",
+    "fetch-prompt-presets": "curl https://raw.githubusercontent.com/stacklok/prompt-library/refs/heads/main/rules.json> ./src/features/workspace/constants/built-in-system-prompts.json",
     "openapi-ts": "openapi-ts",
     "knip": "knip",
     "lint": "eslint .",

src/features/header/components/header-status-menu.tsx

@@ -264,7 +264,7 @@ function StatusPopover({
   data: ReturnType<typeof useQueriesCodegateStatus>['data']
 }) {
   return (
-    <Popover className="px-3 py-2 min-w-64" placement="bottom end">
+    <Popover className="min-w-64 px-3 py-2" placement="bottom end">
       <Dialog aria-label="CodeGate Status" style={{ outline: 0 }}>
         <Row
           title="CodeGate server"

src/features/workspace/components/workspace-custom-instructions.tsx

@@ -215,20 +215,26 @@ function PromptPresetPicker({ onActivate }: PromptPresetPickerProps) {
                 <div className="flex justify-between gap-4 p-2">
                   <div className="h-full items-center">
                     <div className="flex h-full max-w-52 items-center text-clip">
-                      {item.contributors.map((contributor) => (
-                        <Link
-                          className="flex h-full items-center gap-1 rounded-md px-2 text-sm font-bold text-secondary
-                            no-underline hover:bg-gray-200"
-                          target="_blank"
-                          href={`https://github.com/${contributor}/`}
-                        >
-                          <img
-                            className="size-6 rounded-full"
-                            src={`https://github.com/${contributor}.png?size=24`}
-                          />
-                          <span className="truncate">{contributor}</span>
+                      {item.readme ? (
+                        <Link target="_blank" href={item.readme}>
+                          README.md
                         </Link>
-                      ))}
+                      ) : (
+                        item.commiters.map((contributor) => (
+                          <Link
+                            className="flex h-full items-center gap-1 rounded-md px-2 text-sm font-bold text-secondary
+                              no-underline hover:bg-gray-200"
+                            target="_blank"
+                            href={`https://github.com/${contributor}/`}
+                          >
+                            <img
+                              className="size-6 rounded-full"
+                              src={`https://github.com/${contributor}.png?size=24`}
+                            />
+                            <span className="truncate">{contributor}</span>
+                          </Link>
+                        ))
+                      )}
                     </div>
                   </div>
                   <Button