feat(loops): widen landing, revamp prompt area, add works-with to templates

Author: charlesvien

packages/ui/src/features/loops/components/LoopDetailView.tsx

@@ -110,7 +110,7 @@ export function LoopDetailView({ loopId }: { loopId: string }) {
 
   if (isLoading) {
     return (
-      <div className="mx-auto max-w-3xl px-6 py-6">
+      <div className="mx-auto w-full max-w-5xl px-8 py-6">
         <div className="h-24 animate-pulse rounded-(--radius-2) border border-border bg-(--gray-2)" />
       </div>
     );
@@ -135,7 +135,7 @@ export function LoopDetailView({ loopId }: { loopId: string }) {
   }
 
   return (
-    <div className="mx-auto max-w-3xl px-6 py-6">
+    <div className="mx-auto w-full max-w-5xl px-8 py-6">
       <Flex direction="column" gap="5">
         <Flex direction="column" gap="3">
           <button

packages/ui/src/features/loops/components/LoopsListView.tsx

@@ -65,7 +65,7 @@ export function LoopsListView() {
         <Flex
           direction="column"
           gap="8"
-          className="mx-auto max-w-3xl px-6 py-8"
+          className="mx-auto w-full max-w-5xl px-8 py-8"
         >
           <Flex align="start" justify="between" gap="3">
             <Flex direction="column" gap="1" className="min-w-0">
@@ -89,30 +89,29 @@ export function LoopsListView() {
             </Button>
           </Flex>
 
-          <Flex
-            direction="column"
-            gap="3"
-            className="rounded-(--radius-3) border border-border bg-(--color-panel-solid) p-4"
-          >
+          <Flex direction="column" gap="2">
             <TextArea
               value={prompt}
+              variant="soft"
+              color="gray"
+              size="3"
               placeholder="What do you want automated?"
-              className="min-h-[76px] text-[13px] leading-relaxed"
+              className="min-h-[64px] text-[13px] leading-relaxed"
               onChange={(e) => setPrompt(e.target.value)}
               onKeyDown={(e) => {
                 if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
                   startFromPrompt();
                 }
               }}
             />
-            <Flex align="center" justify="between" gap="4">
+            <Flex align="center" justify="between" gap="3">
               <Flex gap="2" wrap="wrap" className="min-w-0 flex-1">
                 {EXAMPLE_PROMPTS.map((example) => (
                   <button
                     key={example}
                     type="button"
                     onClick={() => setPrompt(example)}
-                    className="rounded-full border border-border bg-(--gray-2) px-3 py-1.5 text-[12px] text-gray-11 leading-none transition-colors hover:border-(--gray-7) hover:text-gray-12"
+                    className="rounded-(--radius-2) bg-(--gray-a3) px-3 py-1.5 text-[12px] text-gray-11 leading-none transition-colors hover:bg-(--gray-a4) hover:text-gray-12"
                   >
                     {example}
                   </button>
@@ -125,7 +124,7 @@ export function LoopsListView() {
                 disabled={!prompt.trim()}
                 onClick={startFromPrompt}
               >
-                Create loop
+                Draft loop
                 <ArrowRightIcon size={13} />
               </Button>
             </Flex>
@@ -211,9 +210,14 @@ function TemplateCard({
       <Text className="text-[12px] text-gray-10 leading-snug">
         {template.description}
       </Text>
-      <Flex align="center" gap="1" className="text-gray-10">
-        <ClockIcon size={11} className="shrink-0" />
-        <Text className="text-[11px]">{template.triggerLabel}</Text>
+      <Flex direction="column" gap="0.5" className="text-gray-10">
+        <Flex align="center" gap="1">
+          <ClockIcon size={11} className="shrink-0" />
+          <Text className="text-[11px]">{template.triggerLabel}</Text>
+        </Flex>
+        <Text className="text-[11px]">
+          Works with {template.worksWith.join(" · ")}
+        </Text>
       </Flex>
     </button>
   );

packages/ui/src/features/loops/loopTemplates.ts

@@ -21,6 +21,8 @@ export interface LoopTemplate {
   description: string;
   /** Short, human phrase describing the trigger, shown on the card. */
   triggerLabel: string;
+  /** Integrations and surfaces the template works with, shown on the card. */
+  worksWith: string[];
   build: () => Partial<LoopFormValues>;
 }
 
@@ -52,6 +54,7 @@ export const LOOP_TEMPLATES: LoopTemplate[] = [
     description:
       "Summarize open pull requests, their review and CI status, and what needs attention.",
     triggerLabel: "Runs weekdays at 11:00",
+    worksWith: ["GitHub", "Slack"],
     build: () => ({
       name: "PR review digest",
       instructions:
@@ -66,6 +69,7 @@ export const LOOP_TEMPLATES: LoopTemplate[] = [
     description:
       "Digest the failing CI runs from the last day and post a summary to your team channel.",
     triggerLabel: "Runs daily at 9:00",
+    worksWith: ["GitHub", "Slack"],
     build: () => ({
       name: "CI failure summary",
       instructions:
@@ -80,6 +84,7 @@ export const LOOP_TEMPLATES: LoopTemplate[] = [
     description:
       "Find tests that pass and fail intermittently across recent CI runs, and open an issue.",
     triggerLabel: "Runs Mondays at 9:00",
+    worksWith: ["GitHub"],
     build: () => ({
       name: "Flaky test tracker",
       instructions:
@@ -94,6 +99,7 @@ export const LOOP_TEMPLATES: LoopTemplate[] = [
     description:
       "Scan for outdated packages, security patches, and breaking changes, then open a PR.",
     triggerLabel: "Runs Mondays at 11:30",
+    worksWith: ["GitHub"],
     build: () => ({
       name: "Dependency update check",
       instructions:
@@ -108,6 +114,7 @@ export const LOOP_TEMPLATES: LoopTemplate[] = [
     description:
       "Draft user-facing release notes each time a pull request merges to the main branch.",
     triggerLabel: "Triggered when a PR merges",
+    worksWith: ["GitHub"],
     build: () => ({
       name: "Release notes drafter",
       instructions:
@@ -122,6 +129,7 @@ export const LOOP_TEMPLATES: LoopTemplate[] = [
     description:
       "Review new issues, categorize bugs and feature requests, and flag likely duplicates.",
     triggerLabel: "Triggered by new issues",
+    worksWith: ["GitHub"],
     build: () => ({
       name: "Issue triage",
       instructions: