feat(notes): add web artifact creation flow

web/src/app/(app)/notes/[noteId]/page.tsx

@@ -9,7 +9,7 @@ import { LinkedNotesPanel } from "@/components/LinkedNotesPanel";
 import { TaskReviewPanel } from "@/components/TaskReviewPanel";
 import { ArtifactPanel } from "@/components/ArtifactPanel";
 import { AgentTimeline } from "@/components/AgentTimeline";
-import { getNoteDetail, updateNoteDetail } from "@/lib/notes-client";
+import { createNoteArtifact, getNoteDetail, updateNoteDetail } from "@/lib/notes-client";
 import type { NoteDetail } from "@/lib/types";
 
 export default function NoteDetailPage() {
@@ -17,6 +17,7 @@ export default function NoteDetailPage() {
   const noteId = params.noteId;
   const [note, setNote] = useState<NoteDetail | null>(null);
   const [isSaving, setIsSaving] = useState(false);
+  const [isCreatingArtifact, setIsCreatingArtifact] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
@@ -48,6 +49,38 @@ export default function NoteDetailPage() {
     }
   }
 
+  async function handleCreateArtifact(input: {
+    title: string;
+    artifactType: "file" | "summary" | "extraction" | "citation" | "export";
+    description?: string;
+    blobPath?: string;
+  }) {
+    if (!note) {
+      return;
+    }
+
+    setIsCreatingArtifact(true);
+
+    try {
+      await createNoteArtifact({
+        id: crypto.randomUUID(),
+        workspaceId: note.workspaceId,
+        noteId: note.id,
+        artifactType: input.artifactType,
+        title: input.title,
+        description: input.description,
+        blobPath: input.blobPath,
+      });
+      const refreshed = await getNoteDetail(note.id);
+      setNote(refreshed);
+      setError(null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Unable to create artifact");
+    } finally {
+      setIsCreatingArtifact(false);
+    }
+  }
+
   if (!note) {
     return (
       <AppShell
@@ -76,7 +109,7 @@ export default function NoteDetailPage() {
           <MetadataPanel note={note} />
           <LinkedNotesPanel linkedNotes={note.linkedNotes} />
           <TaskReviewPanel tasks={note.tasks} />
-          <ArtifactPanel artifacts={note.artifacts} />
+          <ArtifactPanel artifacts={note.artifacts} onCreate={handleCreateArtifact} isCreating={isCreatingArtifact} />
           <AgentTimeline items={note.timeline} />
         </aside>
       </div>

web/src/components/ArtifactPanel.tsx

@@ -4,8 +4,25 @@ import { useState } from "react";
 import { getArtifactReadUrl } from "@/lib/blob-client";
 import type { ArtifactSummary } from "@/lib/types";
 
-export function ArtifactPanel({ artifacts }: { artifacts: ArtifactSummary[] }) {
+export function ArtifactPanel({
+  artifacts,
+  onCreate,
+  isCreating = false,
+}: {
+  artifacts: ArtifactSummary[];
+  onCreate: (input: {
+    title: string;
+    artifactType: "file" | "summary" | "extraction" | "citation" | "export";
+    description?: string;
+    blobPath?: string;
+  }) => Promise<void>;
+  isCreating?: boolean;
+}) {
   const [openingId, setOpeningId] = useState<string | null>(null);
+  const [title, setTitle] = useState("");
+  const [artifactType, setArtifactType] = useState<"file" | "summary" | "extraction" | "citation" | "export">("file");
+  const [description, setDescription] = useState("");
+  const [blobPath, setBlobPath] = useState("");
 
   async function handleOpenArtifact(artifact: ArtifactSummary) {
     if (!artifact.blobPath) {
@@ -21,12 +38,89 @@ export function ArtifactPanel({ artifacts }: { artifacts: ArtifactSummary[] }) {
     }
   }
 
+  async function handleCreateArtifact() {
+    if (!title.trim()) {
+      return;
+    }
+
+    await onCreate({
+      title: title.trim(),
+      artifactType,
+      description: description.trim() || undefined,
+      blobPath: blobPath.trim() || undefined,
+    });
+
+    setTitle("");
+    setArtifactType("file");
+    setDescription("");
+    setBlobPath("");
+  }
+
   return (
     <section className="surface-card" style={{ padding: "var(--ml-space-5)", display: "grid", gap: "var(--ml-space-3)" }}>
       <div style={{ display: "flex", justifyContent: "space-between", gap: "var(--ml-space-3)", alignItems: "center" }}>
         <div style={{ fontWeight: 700 }}>Artifacts</div>
         <span className="badge">blob-backed view</span>
       </div>
+      <div className="surface-muted" style={{ padding: "var(--ml-space-3)", display: "grid", gap: "var(--ml-space-3)" }}>
+        <div style={{ display: "grid", gap: "var(--ml-space-2)" }}>
+          <label htmlFor="artifact-title" style={{ color: "var(--ml-text-secondary)" }}>
+            Add artifact
+          </label>
+          <input
+            id="artifact-title"
+            className="input-shell"
+            value={title}
+            onChange={(event) => setTitle(event.target.value)}
+            placeholder="Artifact title"
+          />
+        </div>
+        <div style={{ display: "grid", gridTemplateColumns: "minmax(140px, 180px) minmax(0, 1fr)", gap: "var(--ml-space-3)" }}>
+          <select
+            className="input-shell"
+            value={artifactType}
+            onChange={(event) => setArtifactType(event.target.value as "file" | "summary" | "extraction" | "citation" | "export")}
+          >
+            <option value="file">file</option>
+            <option value="summary">summary</option>
+            <option value="extraction">extraction</option>
+            <option value="citation">citation</option>
+            <option value="export">export</option>
+          </select>
+          <input
+            className="input-shell"
+            value={blobPath}
+            onChange={(event) => setBlobPath(event.target.value)}
+            placeholder="Optional blob path"
+          />
+        </div>
+        <textarea
+          className="input-shell"
+          value={description}
+          onChange={(event) => setDescription(event.target.value)}
+          placeholder="Description"
+          style={{ minHeight: 96, resize: "vertical" }}
+        />
+        <div style={{ display: "flex", justifyContent: "flex-end" }}>
+          <button
+            type="button"
+            disabled={isCreating}
+            onClick={() => {
+              void handleCreateArtifact();
+            }}
+            style={{
+              border: "none",
+              borderRadius: "var(--ml-radius-md)",
+              padding: "8px 12px",
+              background: "var(--ml-accent-primary)",
+              color: "var(--ml-text-primary)",
+              fontWeight: 600,
+            }}
+          >
+            {isCreating ? "Adding…" : "Add artifact"}
+          </button>
+        </div>
+      </div>
       {artifacts.map((artifact) => (
         <div key={artifact.id} className="surface-muted" style={{ padding: "var(--ml-space-3)", display: "flex", justifyContent: "space-between", gap: "var(--ml-space-3)", alignItems: "center" }}>
           <div style={{ display: "grid", gap: 4 }}>

web/src/lib/notes-client.ts

@@ -264,6 +264,24 @@ export async function updateNoteDetail(
   );
 }
 
+export async function createNoteArtifact(input: {
+  id: string;
+  workspaceId: string;
+  noteId: string;
+  artifactType: "file" | "summary" | "extraction" | "citation" | "export";
+  title: string;
+  description?: string;
+  blobPath?: string;
+  contentType?: string;
+  sizeBytes?: number;
+}): Promise<void> {
+  const api = createNotesApiClient();
+  await api.fetch("/note-artifacts", {
+    method: "POST",
+    body: JSON.stringify(input),
+  });
+}
+
 export async function getNoteDetail(noteId: string): Promise<NoteDetail | null> {
   const api = createNotesApiClient();
   const [workspaceResponse, noteResponse] = await Promise.all([