{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "support-ticket-detail",
  "title": "Support Ticket Detail",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/support-ticket-detail/SupportTicketDetail.vue",
      "content": "<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport {\n  AlertCircle,\n  AlertTriangle,\n  ArrowUpRight,\n  Bold,\n  CheckCheck,\n  CheckCircle2,\n  ChevronRight,\n  Clock,\n  Code,\n  Copy,\n  Download,\n  Eye,\n  FileCode2,\n  Globe,\n  ImageIcon,\n  Italic,\n  Link2,\n  Lock,\n  MessageSquare,\n  Paperclip,\n  Send,\n  ShieldAlert,\n  Tag,\n  X,\n} from 'lucide-vue-next'\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Input } from '@/components/ui/input'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'\nimport { Separator } from '@/components/ui/separator'\nimport { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'\nimport { Textarea } from '@/components/ui/textarea'\n\ninterface ThreadMessage {\n  id: string\n  authorName: string\n  authorRole: string\n  authorEmail?: string\n  avatarText: string\n  badgeText: string\n  badgeVariant?: 'default' | 'secondary' | 'outline' | 'destructive' | 'success' | 'warning' | 'info'\n  timestamp: string\n  isInternal: boolean\n  content: string\n}\n\nconst ticketStatus = ref('in_progress')\nconst ticketPriority = ref('high')\nconst assignedAgent = ref('elena_martinez')\nconst department = ref('platform')\nconst composerTab = ref<'public' | 'internal'>('public')\nconst replyDraft = ref('')\nconst selectedMacro = ref('')\nconst copiedLog = ref(false)\nconst tags = ref(['ssl-certificate', 'custom-domain', 'acme-challenge', 'enterprise-tier'])\nconst newTagInput = ref('')\nconst isAddingTag = ref(false)\n\nconst cannedMacros = [\n  {\n    id: 'ssl-guide',\n    name: 'SSL Guide',\n    text: `Hi Sarah,\\n\\nTo resolve the ACME challenge issue, please ensure your DNS provider includes the following CAA record:\\n\\n0 issue \"letsencrypt.org\"\\n\\nOnce added, DNS propagation typically takes 2-5 minutes, after which you can re-run verification in your domain dashboard.`,\n  },\n  {\n    id: 'request-logs',\n    name: 'Request logs',\n    text: `Hi Sarah,\\n\\nCould you please provide the full HAR export and debug network logs from your browser console during the SSL verification attempt? This will help us trace the challenge request.`,\n  },\n  {\n    id: 'refund-confirmation',\n    name: 'Refund confirmation',\n    text: `Hi Sarah,\\n\\nWe have processed the billing adjustment for your dedicated SSL add-on. You will see the credit reflected on your next statement.`,\n  },\n]\n\nconst dynamicMessages = ref<ThreadMessage[]>([])\n\nfunction handleEscalate() {\n  ticketStatus.value = 'escalated'\n}\n\nfunction handleResolve() {\n  ticketStatus.value = 'resolved'\n}\n\nfunction selectMacro(val: any) {\n  if (!val) return\n  const macro = cannedMacros.find((m) => m.id === val)\n  if (macro) {\n    replyDraft.value = macro.text\n  }\n}\n\nfunction applyFormat(type: 'bold' | 'code' | 'link') {\n  if (type === 'bold') {\n    replyDraft.value = replyDraft.value ? `${replyDraft.value} **bold text**` : '**bold text**'\n  } else if (type === 'code') {\n    replyDraft.value = replyDraft.value ? `${replyDraft.value}\\n\\`\\`\\`\\ncode snippet\\n\\`\\`\\`` : '```\\ncode snippet\\n```'\n  } else if (type === 'link') {\n    replyDraft.value = replyDraft.value\n      ? `${replyDraft.value} [link title](https://example.com)`\n      : '[link title](https://example.com)'\n  }\n}\n\nfunction copyErrorLog() {\n  copiedLog.value = true\n  setTimeout(() => {\n    copiedLog.value = false\n  }, 2000)\n}\n\nfunction sendReply() {\n  const body = replyDraft.value.trim()\n  if (!body) return\n  const isInternal = composerTab.value === 'internal'\n  dynamicMessages.value.push({\n    id: `msg-${Date.now()}`,\n    authorName: isInternal ? 'Alex Kim' : 'Elena Martinez',\n    authorRole: isInternal ? 'Senior DevOps' : 'Lead Support Engineer',\n    avatarText: isInternal ? 'AK' : 'EM',\n    badgeText: isInternal ? 'Internal Note - Only visible to team' : 'Support Engineer',\n    badgeVariant: isInternal ? 'warning' : 'default',\n    timestamp: 'Just now',\n    isInternal,\n    content: body,\n  })\n  replyDraft.value = ''\n  selectedMacro.value = ''\n}\n\nfunction sendAndSolve() {\n  sendReply()\n  ticketStatus.value = 'resolved'\n}\n\nfunction addTag() {\n  const t = newTagInput.value.trim().toLowerCase()\n  if (t && !tags.value.includes(t)) {\n    tags.value.push(t)\n  }\n  newTagInput.value = ''\n  isAddingTag.value = false\n}\n\nfunction removeTag(tagToRemove: string) {\n  tags.value = tags.value.filter((t) => t !== tagToRemove)\n}\n</script>\n\n<template>\n  <div data-slot=\"support-ticket-detail\" class=\"bg-background text-foreground w-full space-y-6\">\n    <!-- Ticket Header -->\n    <header class=\"bg-card rounded-xl border p-5 shadow-xs sm:p-6\">\n      <div class=\"flex flex-col gap-4\">\n        <!-- Top Breadcrumb & Actions Row -->\n        <div class=\"flex flex-wrap items-center justify-between gap-3\">\n          <div class=\"text-muted-foreground flex items-center gap-1.5 text-xs\">\n            <span>Support</span>\n            <ChevronRight class=\"size-3.5\" />\n            <span>Tickets</span>\n            <ChevronRight class=\"size-3.5\" />\n            <span class=\"text-foreground font-mono font-medium\">#TICK-8492</span>\n          </div>\n\n          <div class=\"flex items-center gap-2\">\n            <Button variant=\"outline\" size=\"sm\" class=\"gap-1.5 text-xs font-medium\" @click=\"handleEscalate\">\n              <AlertTriangle class=\"text-warning size-3.5\" />\n              Escalate\n            </Button>\n            <Button size=\"sm\" class=\"gap-1.5 text-xs font-medium\" @click=\"handleResolve\">\n              <CheckCircle2 class=\"size-3.5\" />\n              Resolve Ticket\n            </Button>\n          </div>\n        </div>\n\n        <!-- Ticket Title & Metadata -->\n        <div class=\"space-y-1.5\">\n          <div class=\"flex flex-wrap items-center gap-2\">\n            <span class=\"text-muted-foreground font-mono text-xs font-bold tracking-tight\">#TICK-8492</span>\n            <h1 class=\"text-foreground text-lg font-bold tracking-tight sm:text-xl\">\n              Cannot configure custom domain SSL certificate\n            </h1>\n          </div>\n          <p class=\"text-muted-foreground text-xs\">\n            Opened 2 hours ago by <span class=\"text-foreground font-medium\">Sarah Davis</span> (Acme Corp) via Web\n            Portal\n          </p>\n        </div>\n\n        <Separator />\n\n        <!-- Status Badges & SLA Strip -->\n        <div class=\"flex flex-wrap items-center gap-3\">\n          <Badge variant=\"destructive\" class=\"gap-1 font-medium\">\n            <AlertCircle class=\"size-3\" />\n            High Priority\n          </Badge>\n\n          <div class=\"w-44\">\n            <Select v-model=\"ticketStatus\">\n              <SelectTrigger size=\"sm\" class=\"h-7 text-xs font-medium\">\n                <SelectValue placeholder=\"Status\" />\n              </SelectTrigger>\n              <SelectContent>\n                <SelectItem value=\"in_progress\">\n                  <span class=\"flex items-center gap-1.5\">\n                    <span class=\"bg-warning size-2 rounded-full\" />\n                    In Progress\n                  </span>\n                </SelectItem>\n                <SelectItem value=\"waiting_on_customer\">\n                  <span class=\"flex items-center gap-1.5\">\n                    <span class=\"bg-info size-2 rounded-full\" />\n                    Waiting on Customer\n                  </span>\n                </SelectItem>\n                <SelectItem value=\"escalated\">\n                  <span class=\"flex items-center gap-1.5\">\n                    <span class=\"bg-destructive size-2 rounded-full\" />\n                    Escalated\n                  </span>\n                </SelectItem>\n                <SelectItem value=\"resolved\">\n                  <span class=\"flex items-center gap-1.5\">\n                    <span class=\"bg-success size-2 rounded-full\" />\n                    Resolved\n                  </span>\n                </SelectItem>\n              </SelectContent>\n            </Select>\n          </div>\n\n          <div\n            class=\"border-warning/30 bg-warning/10 text-warning inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium\"\n          >\n            <Clock class=\"size-3.5\" />\n            <span>SLA: 42m remaining</span>\n          </div>\n\n          <Badge variant=\"outline\" class=\"text-muted-foreground text-xs\"> SSL & Custom Domains </Badge>\n        </div>\n      </div>\n    </header>\n\n    <!-- 2-Column Workspace -->\n    <div class=\"grid grid-cols-1 gap-6 lg:grid-cols-12\">\n      <!-- Left Column: Conversation Thread & Composer (2/3) -->\n      <main class=\"space-y-6 lg:col-span-8\">\n        <!-- Message 1: Customer Initial Request -->\n        <article class=\"bg-card rounded-xl border p-5 shadow-xs sm:p-6\">\n          <div class=\"flex items-start justify-between gap-3\">\n            <div class=\"flex items-center gap-3\">\n              <Avatar class=\"size-10\">\n                <AvatarFallback class=\"bg-primary/10 text-primary text-xs font-semibold\">SD</AvatarFallback>\n              </Avatar>\n              <div>\n                <div class=\"flex items-center gap-2\">\n                  <span class=\"text-foreground text-sm font-semibold\">Sarah Davis</span>\n                  <Badge variant=\"secondary\" class=\"text-xs font-normal\">Customer</Badge>\n                </div>\n                <p class=\"text-muted-foreground text-xs\">VP of Engineering · Acme Corp (sarah@acme-corp.io)</p>\n              </div>\n            </div>\n            <time class=\"text-muted-foreground text-xs whitespace-nowrap\">Today, 09:14 AM (2h ago)</time>\n          </div>\n\n          <div class=\"text-foreground/90 mt-4 space-y-3.5 text-sm leading-relaxed\">\n            <p>\n              We are attempting to configure our custom apex domain\n              <code class=\"bg-muted text-foreground rounded px-1.5 py-0.5 font-mono text-xs\">api.acme-corp.io</code> on\n              our production cluster, but automated SSL certificate provisioning fails repeatedly during the ACME DNS-01\n              verification challenge.\n            </p>\n            <p>\n              We verified that the CNAME and DNS TXT records exist in our Cloudflare dashboard, but the challenge\n              validation daemon continues to time out after 10 minutes with the stderr log below:\n            </p>\n\n            <!-- Error Code Block Placeholder -->\n            <div class=\"overflow-hidden rounded-lg border bg-zinc-950 text-zinc-100\">\n              <div\n                class=\"text-muted-foreground flex items-center justify-between border-b border-zinc-800 bg-zinc-900/90 px-3.5 py-2 text-xs\"\n              >\n                <div class=\"flex items-center gap-2\">\n                  <FileCode2 class=\"text-destructive size-3.5\" />\n                  <span class=\"font-mono text-xs\">acme-provisioner-stderr.log</span>\n                </div>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  class=\"h-6 gap-1 px-2 text-xs text-zinc-300 hover:bg-zinc-800 hover:text-zinc-100\"\n                  @click=\"copyErrorLog\"\n                >\n                  <Copy class=\"size-3\" />\n                  {{ copiedLog ? 'Copied' : 'Copy log' }}\n                </Button>\n              </div>\n              <pre\n                class=\"overflow-x-auto p-3.5 font-mono text-xs leading-relaxed text-zinc-300\"\n              ><code>[2026-10-24T09:12:44Z] [SSL: CERTIFICATE_VERIFY_FAILED] ACME challenge failed for _acme-challenge.api.acme-corp.io\n[2026-10-24T09:13:58Z] DNS TXT record validation timed out after 600s. Response status: 400 Bad Request\n[2026-10-24T09:14:02Z] Detail: CAA record restriction on 'acme-corp.io' prevented Let's Encrypt issuance.</code></pre>\n            </div>\n\n            <!-- Screenshot / Attachment Placeholder -->\n            <div class=\"bg-muted/40 rounded-lg border p-3\">\n              <div class=\"flex items-center justify-between gap-3\">\n                <div class=\"flex min-w-0 items-center gap-2.5\">\n                  <div class=\"bg-background flex size-9 shrink-0 items-center justify-center rounded-md border\">\n                    <ImageIcon class=\"text-muted-foreground size-4\" />\n                  </div>\n                  <div class=\"min-w-0\">\n                    <p class=\"text-foreground truncate text-xs font-medium\">cloudflare-dns-settings.png</p>\n                    <p class=\"text-muted-foreground text-xs\">1.4 MB · PNG Image Screenshot</p>\n                  </div>\n                </div>\n                <div class=\"flex items-center gap-1\">\n                  <Button variant=\"ghost\" size=\"sm\" class=\"h-7 text-xs\">\n                    <Eye class=\"size-3.5\" />\n                    Preview\n                  </Button>\n                  <Button aria-label=\"Download attachment\" variant=\"ghost\" size=\"sm\" class=\"h-7 text-xs\">\n                    <Download class=\"size-3.5\" />\n                    Download\n                  </Button>\n                </div>\n              </div>\n            </div>\n          </div>\n        </article>\n\n        <!-- Message 2: Internal Staff Note (distinct yellow/amber tint background) -->\n        <article class=\"border-warning/30 bg-warning/10 dark:bg-warning/10 rounded-xl border p-5 shadow-xs sm:p-6\">\n          <div class=\"flex items-start justify-between gap-3\">\n            <div class=\"flex items-center gap-3\">\n              <Avatar class=\"size-10\">\n                <AvatarFallback class=\"bg-warning/20 text-warning text-xs font-semibold\">AK</AvatarFallback>\n              </Avatar>\n              <div>\n                <div class=\"flex items-center gap-2\">\n                  <span class=\"text-foreground text-sm font-semibold\">Alex Kim</span>\n                  <Badge\n                    variant=\"outline\"\n                    class=\"border-warning/40 bg-warning/20 text-warning gap-1 text-xs font-medium\"\n                  >\n                    <Lock class=\"size-3\" />\n                    Internal Note - Only visible to team\n                  </Badge>\n                </div>\n                <p class=\"text-muted-foreground text-xs\">Senior DevOps Engineer · Tier 2 Infrastructure</p>\n              </div>\n            </div>\n            <time class=\"text-muted-foreground text-xs whitespace-nowrap\">Today, 09:35 AM (1h ago)</time>\n          </div>\n\n          <div class=\"text-foreground/90 mt-4 space-y-2 text-sm leading-relaxed\">\n            <p>\n              Checked Cloudflare DNS propagation on their nameservers via\n              <code class=\"text-foreground bg-warning/20 rounded px-1 py-0.5 font-mono text-xs\"\n                >dig CAA acme-corp.io</code\n              >. Looks like their root zone has a CAA record restricting certificate issuance strictly to DigiCert\n              (<code class=\"text-foreground bg-warning/20 rounded px-1 py-0.5 font-mono text-xs\"\n                >0 issue \"digicert.com\"</code\n              >), while our automated ACME pipeline requests Let's Encrypt certificates.\n            </p>\n            <p>\n              If they add\n              <code class=\"text-foreground bg-warning/20 rounded px-1 py-0.5 font-mono text-xs\"\n                >0 issue \"letsencrypt.org\"</code\n              >\n              to their DNS CAA records, the validation handshake will complete within 2 minutes.\n            </p>\n          </div>\n        </article>\n\n        <!-- Message 3: Agent response -->\n        <article class=\"bg-card rounded-xl border p-5 shadow-xs sm:p-6\">\n          <div class=\"flex items-start justify-between gap-3\">\n            <div class=\"flex items-center gap-3\">\n              <Avatar class=\"size-10\">\n                <AvatarFallback class=\"bg-primary text-primary-foreground text-xs font-semibold\">EM</AvatarFallback>\n              </Avatar>\n              <div>\n                <div class=\"flex items-center gap-2\">\n                  <span class=\"text-foreground text-sm font-semibold\">Elena Martinez</span>\n                  <Badge class=\"text-xs font-normal\">Support Engineer</Badge>\n                </div>\n                <p class=\"text-muted-foreground text-xs\">Lead Support Engineer · UIPKGE Staff</p>\n              </div>\n            </div>\n            <time class=\"text-muted-foreground text-xs whitespace-nowrap\">Today, 09:48 AM (45m ago)</time>\n          </div>\n\n          <div class=\"text-foreground/90 mt-4 space-y-3 text-sm leading-relaxed\">\n            <p>\n              Hi Sarah, thank you for providing the detailed error log! We analyzed the ACME challenge failure and\n              identified that your apex domain's DNS CAA records currently block Let's Encrypt certificate issuance.\n            </p>\n            <p>Please follow these step-by-step instructions to enable Let's Encrypt validation:</p>\n            <ol class=\"text-foreground/90 list-inside list-decimal space-y-1.5 pl-1 text-xs sm:text-sm\">\n              <li>\n                Log in to your Cloudflare DNS dashboard for\n                <code class=\"bg-muted rounded px-1.5 py-0.5 font-mono text-xs\">acme-corp.io</code>.\n              </li>\n              <li>Navigate to <strong>DNS Settings</strong> &rarr; <strong>Add Record</strong>.</li>\n              <li>\n                Select <strong>CAA</strong>, set Flag to\n                <code class=\"bg-muted rounded px-1.5 py-0.5 font-mono text-xs\">0</code>, Tag to\n                <code class=\"bg-muted rounded px-1.5 py-0.5 font-mono text-xs\">issue</code>, and Value to\n                <code class=\"bg-muted rounded px-1.5 py-0.5 font-mono text-xs\">\"letsencrypt.org\"</code>.\n              </li>\n              <li>Allow up to 2 minutes for DNS TTL cache propagation across edge resolvers.</li>\n              <li>Return to your cluster settings dashboard and click <strong>Retry Verification</strong>.</li>\n            </ol>\n            <p>\n              Feel free to reply directly once you've saved the record, and we'll monitor the validation handshake from\n              our side!\n            </p>\n          </div>\n        </article>\n\n        <!-- Dynamic User Messages -->\n        <article\n          v-for=\"msg in dynamicMessages\"\n          :key=\"msg.id\"\n          :class=\"[\n            'rounded-xl border p-5 shadow-xs sm:p-6',\n            msg.isInternal ? 'border-warning/30 bg-warning/10' : 'bg-card',\n          ]\"\n        >\n          <div class=\"flex items-start justify-between gap-3\">\n            <div class=\"flex items-center gap-3\">\n              <Avatar class=\"size-10\">\n                <AvatarFallback\n                  :class=\"[\n                    'text-xs font-semibold',\n                    msg.isInternal ? 'bg-warning/20 text-warning' : 'bg-primary text-primary-foreground',\n                  ]\"\n                >\n                  {{ msg.avatarText }}\n                </AvatarFallback>\n              </Avatar>\n              <div>\n                <div class=\"flex items-center gap-2\">\n                  <span class=\"text-foreground text-sm font-semibold\">{{ msg.authorName }}</span>\n                  <Badge\n                    :variant=\"msg.isInternal ? 'outline' : 'default'\"\n                    :class=\"\n                      msg.isInternal\n                        ? 'border-warning/40 bg-warning/20 text-warning gap-1 text-xs font-medium'\n                        : 'text-xs font-normal'\n                    \"\n                  >\n                    <Lock v-if=\"msg.isInternal\" class=\"size-3\" />\n                    {{ msg.badgeText }}\n                  </Badge>\n                </div>\n                <p class=\"text-muted-foreground text-xs\">{{ msg.authorRole }}</p>\n              </div>\n            </div>\n            <time class=\"text-muted-foreground text-xs whitespace-nowrap\">{{ msg.timestamp }}</time>\n          </div>\n          <div class=\"text-foreground/90 mt-4 text-sm leading-relaxed whitespace-pre-wrap\">\n            {{ msg.content }}\n          </div>\n        </article>\n\n        <!-- Reply Box Composer -->\n        <section class=\"bg-card overflow-hidden rounded-xl border shadow-xs\">\n          <Tabs v-model=\"composerTab\" default-value=\"public\">\n            <!-- Composer Header with Tabs & Macro Dropdown -->\n            <div class=\"bg-muted/30 flex flex-wrap items-center justify-between gap-3 border-b px-4 py-2.5\">\n              <TabsList class=\"h-8\">\n                <TabsTrigger value=\"public\" class=\"gap-1.5 text-xs\">\n                  <MessageSquare class=\"size-3.5\" />\n                  Public Reply\n                </TabsTrigger>\n                <TabsTrigger value=\"internal\" class=\"gap-1.5 text-xs\">\n                  <Lock class=\"size-3.5\" />\n                  Internal Note\n                </TabsTrigger>\n              </TabsList>\n\n              <!-- Canned Responses / Macros Dropdown -->\n              <div class=\"w-48\">\n                <Select v-model=\"selectedMacro\" @update:model-value=\"selectMacro\">\n                  <SelectTrigger size=\"sm\" class=\"h-8 text-xs\">\n                    <SelectValue placeholder=\"Canned macro...\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem v-for=\"macro in cannedMacros\" :key=\"macro.id\" :value=\"macro.id\">\n                      {{ macro.name }}\n                    </SelectItem>\n                  </SelectContent>\n                </Select>\n              </div>\n            </div>\n\n            <div class=\"space-y-3 p-4\">\n              <!-- Rich Formatting Toolbar -->\n              <div class=\"text-muted-foreground flex items-center gap-1 border-b pb-2\">\n                <Button\n                  variant=\"ghost\"\n                  size=\"icon\"\n                  class=\"size-7\"\n                  aria-label=\"Format bold\"\n                  @click=\"applyFormat('bold')\"\n                >\n                  <Bold class=\"size-3.5\" />\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"icon\"\n                  class=\"size-7\"\n                  aria-label=\"Format italic\"\n                  @click=\"applyFormat('bold')\"\n                >\n                  <Italic class=\"size-3.5\" />\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"icon\"\n                  class=\"size-7\"\n                  aria-label=\"Format code\"\n                  @click=\"applyFormat('code')\"\n                >\n                  <Code class=\"size-3.5\" />\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"icon\"\n                  class=\"size-7\"\n                  aria-label=\"Insert link\"\n                  @click=\"applyFormat('link')\"\n                >\n                  <Link2 class=\"size-3.5\" />\n                </Button>\n                <Separator orientation=\"vertical\" class=\"mx-1 h-4\" />\n                <Button variant=\"ghost\" size=\"icon\" class=\"size-7\" aria-label=\"Attach file\">\n                  <Paperclip class=\"size-3.5\" />\n                </Button>\n                <span class=\"text-muted-foreground ml-auto text-xs\">Markdown supported</span>\n              </div>\n\n              <!-- Textarea with dynamic background if internal note -->\n              <Textarea\n                v-model=\"replyDraft\"\n                :placeholder=\"\n                  composerTab === 'public'\n                    ? 'Write a public reply to Sarah Davis...'\n                    : 'Add an internal note only visible to team members...'\n                \"\n                rows=\"4\"\n                :class=\"[\n                  'resize-y text-sm',\n                  composerTab === 'internal' ? 'border-warning/30 bg-warning/5 focus-visible:ring-warning/20' : '',\n                ]\"\n              />\n\n              <!-- Composer Actions -->\n              <div class=\"flex flex-wrap items-center justify-between gap-3 pt-1\">\n                <div class=\"text-muted-foreground flex items-center gap-2 text-xs\">\n                  <Paperclip class=\"size-3.5\" />\n                  <span>Attachments up to 25MB</span>\n                </div>\n\n                <div class=\"flex items-center gap-2\">\n                  <Button\n                    v-if=\"composerTab === 'public'\"\n                    variant=\"outline\"\n                    size=\"sm\"\n                    class=\"gap-1.5 text-xs\"\n                    :disabled=\"!replyDraft.trim()\"\n                    @click=\"sendAndSolve\"\n                  >\n                    <CheckCheck class=\"size-3.5\" />\n                    Send & Mark Solved\n                  </Button>\n                  <Button size=\"sm\" class=\"gap-1.5 text-xs\" :disabled=\"!replyDraft.trim()\" @click=\"sendReply\">\n                    <Send class=\"size-3.5\" />\n                    {{ composerTab === 'public' ? 'Send Reply' : 'Add Internal Note' }}\n                  </Button>\n                </div>\n              </div>\n            </div>\n          </Tabs>\n        </section>\n      </main>\n\n      <!-- Right Column: Customer & Ticket Metadata Sidebar (1/3) -->\n      <aside class=\"space-y-6 lg:col-span-4\">\n        <!-- Customer Info Card -->\n        <Card>\n          <CardHeader class=\"pb-3\">\n            <div class=\"flex items-start justify-between gap-2\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar class=\"size-11\">\n                  <AvatarFallback class=\"bg-primary/10 text-primary text-sm font-semibold\">SD</AvatarFallback>\n                </Avatar>\n                <div>\n                  <CardTitle class=\"text-sm font-semibold\">Sarah Davis</CardTitle>\n                  <CardDescription class=\"text-xs\">VP of Engineering</CardDescription>\n                </div>\n              </div>\n              <Badge variant=\"default\" class=\"text-xs font-medium\">Enterprise</Badge>\n            </div>\n          </CardHeader>\n          <CardContent class=\"space-y-3 pt-0\">\n            <Separator />\n            <dl class=\"space-y-2.5 text-xs\">\n              <div class=\"flex items-center justify-between gap-2\">\n                <dt class=\"text-muted-foreground\">Company</dt>\n                <dd class=\"text-foreground font-medium\">Acme Corp</dd>\n              </div>\n              <div class=\"flex items-center justify-between gap-2\">\n                <dt class=\"text-muted-foreground\">Email</dt>\n                <dd class=\"text-foreground max-w-[180px] truncate font-medium\">sarah@acme-corp.io</dd>\n              </div>\n              <div class=\"flex items-center justify-between gap-2\">\n                <dt class=\"text-muted-foreground\">Total Tickets</dt>\n                <dd class=\"text-foreground font-medium tabular-nums\">12 (10 resolved)</dd>\n              </div>\n              <div class=\"flex items-center justify-between gap-2\">\n                <dt class=\"text-muted-foreground\">Customer Since</dt>\n                <dd class=\"text-foreground font-medium\">Jan 2024</dd>\n              </div>\n              <div class=\"flex items-center justify-between gap-2\">\n                <dt class=\"text-muted-foreground\">SLA Plan</dt>\n                <dd class=\"text-foreground font-medium\">1h Critical Response</dd>\n              </div>\n              <div class=\"flex items-center justify-between gap-2\">\n                <dt class=\"text-muted-foreground\">Timezone</dt>\n                <dd class=\"text-foreground font-medium\">America/Los_Angeles (UTC-7)</dd>\n              </div>\n            </dl>\n            <Separator />\n            <Button variant=\"outline\" size=\"sm\" class=\"w-full justify-center gap-1.5 text-xs\">\n              View Customer in CRM\n              <ArrowUpRight class=\"size-3.5\" />\n            </Button>\n          </CardContent>\n        </Card>\n\n        <!-- Ticket Attributes Card -->\n        <Card>\n          <CardHeader class=\"pb-3\">\n            <CardTitle class=\"text-sm font-semibold\">Ticket Attributes</CardTitle>\n          </CardHeader>\n          <CardContent class=\"space-y-4 pt-0\">\n            <!-- Assigned Agent -->\n            <div class=\"space-y-1.5\">\n              <label class=\"text-muted-foreground text-xs font-medium\">Assigned Agent</label>\n              <Select v-model=\"assignedAgent\">\n                <SelectTrigger size=\"sm\" class=\"w-full text-xs\">\n                  <SelectValue placeholder=\"Select Agent\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectItem value=\"elena_martinez\">Elena Martinez (DevOps)</SelectItem>\n                  <SelectItem value=\"alex_kim\">Alex Kim (Tier 2)</SelectItem>\n                  <SelectItem value=\"marcus_vance\">Marcus Vance (Platform)</SelectItem>\n                  <SelectItem value=\"unassigned\">Unassigned</SelectItem>\n                </SelectContent>\n              </Select>\n            </div>\n\n            <!-- Department -->\n            <div class=\"space-y-1.5\">\n              <label class=\"text-muted-foreground text-xs font-medium\">Department</label>\n              <Select v-model=\"department\">\n                <SelectTrigger size=\"sm\" class=\"w-full text-xs\">\n                  <SelectValue placeholder=\"Department\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectItem value=\"platform\">Platform Infrastructure</SelectItem>\n                  <SelectItem value=\"billing\">Billing & Subscriptions</SelectItem>\n                  <SelectItem value=\"core_api\">Core API Support</SelectItem>\n                  <SelectItem value=\"security\">Security & Compliance</SelectItem>\n                </SelectContent>\n              </Select>\n            </div>\n\n            <!-- Priority -->\n            <div class=\"space-y-1.5\">\n              <label class=\"text-muted-foreground text-xs font-medium\">Priority</label>\n              <Select v-model=\"ticketPriority\">\n                <SelectTrigger size=\"sm\" class=\"w-full text-xs\">\n                  <SelectValue placeholder=\"Priority\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectItem value=\"urgent\">Urgent (P0)</SelectItem>\n                  <SelectItem value=\"high\">High (P1)</SelectItem>\n                  <SelectItem value=\"medium\">Medium (P2)</SelectItem>\n                  <SelectItem value=\"low\">Low (P3)</SelectItem>\n                </SelectContent>\n              </Select>\n            </div>\n\n            <Separator />\n\n            <!-- Tags Section -->\n            <div class=\"space-y-2\">\n              <div class=\"flex items-center justify-between\">\n                <span class=\"text-muted-foreground text-xs font-medium\">Tags</span>\n                <button\n                  v-if=\"!isAddingTag\"\n                  class=\"text-primary min-h-6 text-xs font-medium hover:underline\"\n                  @click=\"isAddingTag = true\"\n                >\n                  + Add Tag\n                </button>\n              </div>\n\n              <div class=\"flex flex-wrap gap-1.5\">\n                <span\n                  v-for=\"tag in tags\"\n                  :key=\"tag\"\n                  class=\"bg-muted text-foreground inline-flex items-center gap-1 rounded-md px-2 py-0.5 text-xs\"\n                >\n                  <Tag class=\"text-muted-foreground size-3\" />\n                  {{ tag }}\n                  <button\n                    class=\"text-muted-foreground hover:text-foreground ml-0.5\"\n                    aria-label=\"Remove tag\"\n                    @click=\"removeTag(tag)\"\n                  >\n                    <X class=\"size-3\" />\n                  </button>\n                </span>\n              </div>\n\n              <div v-if=\"isAddingTag\" class=\"flex items-center gap-1.5 pt-1\">\n                <Input\n                  v-model=\"newTagInput\"\n                  placeholder=\"New tag...\"\n                  class=\"h-7 text-xs\"\n                  @keydown.enter.prevent=\"addTag\"\n                />\n                <Button size=\"sm\" class=\"h-7 px-2 text-xs\" @click=\"addTag\">Add</Button>\n                <Button variant=\"ghost\" size=\"sm\" class=\"h-7 px-2 text-xs\" @click=\"isAddingTag = false\">Cancel</Button>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n\n        <!-- SLA & Metrics Card -->\n        <Card>\n          <CardHeader class=\"pb-3\">\n            <div class=\"flex items-center justify-between\">\n              <CardTitle class=\"text-sm font-semibold\">SLA & Metrics</CardTitle>\n              <Badge variant=\"outline\" class=\"text-xs font-medium\">Active SLA</Badge>\n            </div>\n          </CardHeader>\n          <CardContent class=\"space-y-3 pt-0\">\n            <dl class=\"space-y-3 text-xs\">\n              <div class=\"flex items-center justify-between gap-2\">\n                <div>\n                  <dt class=\"text-foreground font-medium\">First Response Time</dt>\n                  <dd class=\"text-muted-foreground text-xs\">Target: &lt; 15m</dd>\n                </div>\n                <div class=\"text-right\">\n                  <span class=\"text-success font-semibold\">8m</span>\n                  <span class=\"text-muted-foreground block text-xs\">7m ahead</span>\n                </div>\n              </div>\n\n              <Separator />\n\n              <div class=\"flex items-center justify-between gap-2\">\n                <div>\n                  <dt class=\"text-foreground font-medium\">Target Resolution</dt>\n                  <dd class=\"text-muted-foreground text-xs\">Target: 4h (Elapsed: 3h 18m)</dd>\n                </div>\n                <div class=\"text-right\">\n                  <span class=\"text-warning font-semibold\">42m</span>\n                  <span class=\"text-muted-foreground block text-xs\">remaining</span>\n                </div>\n              </div>\n\n              <Separator />\n\n              <div class=\"flex items-center justify-between gap-2\">\n                <div>\n                  <dt class=\"text-foreground font-medium\">CSAT Prediction</dt>\n                  <dd class=\"text-muted-foreground text-xs\">Based on sentiment analysis</dd>\n                </div>\n                <Badge variant=\"secondary\" class=\"font-medium\">98% High</Badge>\n              </div>\n\n              <Separator />\n\n              <div class=\"flex items-center justify-between gap-2\">\n                <dt class=\"text-muted-foreground flex items-center gap-1.5\">\n                  <Globe class=\"size-3.5\" />\n                  Source Channel\n                </dt>\n                <dd class=\"text-foreground font-medium\">Web Portal</dd>\n              </div>\n\n              <div class=\"flex items-center justify-between gap-2\">\n                <dt class=\"text-muted-foreground flex items-center gap-1.5\">\n                  <ShieldAlert class=\"size-3.5\" />\n                  Escalation Tier\n                </dt>\n                <dd class=\"text-foreground font-medium\">Tier 2 Support</dd>\n              </div>\n            </dl>\n          </CardContent>\n        </Card>\n      </aside>\n    </div>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/SupportTicketDetail.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/avatar.json",
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/input.json",
    "https://uipkge.dev/r/vue/select.json",
    "https://uipkge.dev/r/vue/separator.json",
    "https://uipkge.dev/r/vue/tabs.json",
    "https://uipkge.dev/r/vue/textarea.json"
  ],
  "description": "Customer support ticket conversation thread, SLA monitor & staff workbench with internal notes, canned response macros, and customer metadata sidebar.",
  "categories": [
    "communication",
    "app",
    "support"
  ]
}