Add editable prompt textarea to summary page

Users can now customize the summarization prompt from the UI.
Default prompt is pre-filled, empty falls back to default.
Group name and week label are appended automatically.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: hubyrod

app/api/summary/route.ts

@@ -151,7 +151,7 @@ export async function POST(request: Request) {
     return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
   }
 
-  let body: { group?: string; week?: string };
+  let body: { group?: string; week?: string; prompt?: string };
   try {
     body = await request.json();
   } catch {
@@ -263,7 +263,7 @@ export async function POST(request: Request) {
       messages: [
         {
           role: "user",
-          content: `Summarize the following messages from the '${group}' group for ${label}. Give a concise overview of the key topics, decisions, and action items discussed:\n\n${formatted}`,
+          content: `${body.prompt || "Summarize the following messages. Give a concise overview of the key topics, decisions, and action items discussed:"}\n\nGroup: ${group} | ${label}\n\n${formatted}`,
         },
       ],
     });

app/summary/summary-form.tsx

@@ -25,9 +25,13 @@ const WEEK_OPTIONS = Array.from({ length: 52 }, (_, i) => {
   return { value: `week${pad}`, label };
 });
 
+const DEFAULT_PROMPT =
+  "Summarize the following messages. Give a concise overview of the key topics, decisions, and action items discussed:";
+
 export default function SummaryForm({ groups }: SummaryFormProps) {
   const [group, setGroup] = useState(groups[0] ?? "");
   const [week, setWeek] = useState(`week${String(currentWeek).padStart(2, "0")}`);
+  const [prompt, setPrompt] = useState(DEFAULT_PROMPT);
   const [loading, setLoading] = useState(false);
   const [summary, setSummary] = useState("");
   const [postCount, setPostCount] = useState<number | null>(null);
@@ -46,7 +50,7 @@ export default function SummaryForm({ groups }: SummaryFormProps) {
       const res = await fetch("/api/summary", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ group, week }),
+        body: JSON.stringify({ group, week, prompt: prompt.trim() || undefined }),
       });
 
       const text = await res.text();
@@ -107,6 +111,20 @@ export default function SummaryForm({ groups }: SummaryFormProps) {
             </select>
           </div>
 
+        </div>
+
+        <div className="sum-field">
+          <label htmlFor="sum-prompt">Prompt</label>
+          <textarea
+            id="sum-prompt"
+            className="sum-prompt"
+            value={prompt}
+            onChange={(e) => setPrompt(e.target.value)}
+            rows={3}
+          />
+        </div>
+
+        <div className="sum-form-row">
           <div className="sum-field sum-field--action">
             <button
               type="submit"

app/summary/summary.css

@@ -102,6 +102,25 @@
   border-color: var(--cfg-accent);
 }
 
+.sum-prompt {
+  font-family: var(--cfg-mono);
+  font-size: 0.8125rem;
+  color: var(--cfg-text);
+  background: var(--cfg-bg);
+  border: 1px solid var(--cfg-border);
+  border-radius: 4px;
+  padding: 0.5rem 0.625rem;
+  outline: none;
+  transition: border-color 0.15s ease;
+  resize: vertical;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.sum-prompt:focus {
+  border-color: var(--cfg-accent);
+}
+
 .sum-submit {
   font-family: var(--cfg-mono);
   font-size: 0.75rem;