{
    "id": "bhaskar/customer-support-inbox",
    "kind": "plan",
    "title": "Customer support inbox",
    "summary": "A two-pane support inbox: a ticket opens, an AI suggested reply appears, gets sent and the ticket flips to Solved while the open count drops.",
    "author": "Admin",
    "stars": 0,
    "url": "https://ownlyplans.com/bhaskar/customer-support-inbox/",
    "stack": [
        "CSS",
        "Dashboard",
        "HTML"
    ],
    "tools": [
        "claude-code",
        "cursor",
        "lovable"
    ],
    "difficulty": "intermediate",
    "license": "cc-by-4.0",
    "version": "1.0",
    "overview": "A helpdesk screen with the ticket list left and the conversation right. A typing indicator pulses, an \"AI suggested reply\" tag shows, the reply is sent, the status pill changes from Open to Solved and the counter goes from 12 to 11. Topic inspired by OpenDesign's public dashboard prompt list; this prompt and design are written from scratch.",
    "steps": [
        {
            "title": "Paste the prompt",
            "body": "The AI builds the inbox and the conversation pane.",
            "prompt": "Create a single-file HTML customer support inbox, 1280x720, light grey background #f4f5f8, ink #1a1d29, accent blue #4f6bff. White rounded panels (22px) with soft shadows. System fonts, no libraries.\nLeft panel: heading \"Inbox\" with an open ticket counter, then five ticket rows (subject, customer and time, blue unread dot on the first three). The second ticket \"Can't export invoices to CSV\" is selected with a pale blue background.\nRight panel: the ticket title with a yellow \"Open\" status pill, the customer message in a grey bubble, then a reply bubble in blue aligned right, and a dark \"Send reply\" button bottom right.\nMotion (8 second loop): the customer bubble fades up, a three dot typing indicator bounces, a small \"AI suggested reply\" tag appears, then the blue reply bubble rises in. The Send button presses (scale .92). Then the status pill cross-fades from yellow Open to green Solved and the inbox counter changes from 12 to 11 (CSS @property integer). Fade everything out at the end and restart.\nRespect prefers-reduced-motion. Return only the complete HTML.",
            "done": "",
            "files": []
        },
        {
            "title": "Check the reply flow",
            "body": "Typing dots, the AI tag, then the blue reply should appear.",
            "prompt": "",
            "done": "",
            "files": []
        },
        {
            "title": "Check the status",
            "body": "The pill should flip to Solved and the count should drop to 11.",
            "prompt": "",
            "done": "You can see it working in the browser.",
            "files": []
        },
        {
            "title": "Make it real",
            "body": "Wire the reply box and status to your helpdesk data.",
            "prompt": "",
            "done": "",
            "files": []
        }
    ],
    "files": [
        {
            "type": "markdown",
            "name": "prompt.md",
            "note": "The full prompt.",
            "file": "prompt",
            "url": "https://ownlyplans.com/bhaskar/customer-support-inbox/prompt/"
        },
        {
            "type": "markdown",
            "name": "index.html.md",
            "note": "Complete code of the result in the video.",
            "file": "index-html",
            "url": "https://ownlyplans.com/bhaskar/customer-support-inbox/index-html/"
        }
    ],
    "install": "",
    "how_to_use": "Call get_step with step 1, do it, check \"done when\", then continue."
}