<svg xmlns="http://www.w3.org/2000/svg" width="980" height="640" viewBox="0 0 980 640" role="img" aria-labelledby="title desc">
  <title id="title">API key action menu client import example</title>
  <desc id="desc">A dark themed example showing an API key row action menu with copy key, copy connection info, CC Switch, and chat client shortcuts.</desc>
  <defs>
    <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
      <feDropShadow dx="0" dy="16" stdDeviation="18" flood-color="#000" flood-opacity=".35"/>
    </filter>
    <linearGradient id="bg" x1="0" x2="1" y1="0" y2="1">
      <stop offset="0" stop-color="#171717"/>
      <stop offset="1" stop-color="#0b0b0d"/>
    </linearGradient>
  </defs>
  <rect width="980" height="640" rx="36" fill="url(#bg)"/>
  <g transform="translate(56 58)">
    <rect width="690" height="420" rx="24" fill="#111113" stroke="#2a2a2d"/>
    <g font-family="Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif">
      <text x="28" y="48" fill="#f2f2f3" font-size="19" font-weight="700">API Keys</text>
      <text x="28" y="86" fill="#8d8d93" font-size="13">Create a key, then use the row action menu to import it into clients.</text>
      <g transform="translate(0 122)">
        <rect x="0" y="0" width="690" height="1" fill="#2a2a2d"/>
        <text x="28" y="36" fill="#bdbdc2" font-size="13" font-weight="700">LAST USED</text>
        <text x="230" y="36" fill="#bdbdc2" font-size="13" font-weight="700">EXPIRES</text>
        <text x="455" y="36" fill="#bdbdc2" font-size="13" font-weight="700">STATUS</text>
        <text x="610" y="36" fill="#bdbdc2" font-size="13" font-weight="700">ACTIONS</text>
        <rect x="0" y="58" width="690" height="1" fill="#2a2a2d"/>
        <text x="28" y="96" fill="#e4e4e7" font-size="16" font-family="SFMono-Regular, ui-monospace, Menlo, monospace">2026-06-05 14:40</text>
        <text x="230" y="96" fill="#e4e4e7" font-size="16" font-family="SFMono-Regular, ui-monospace, Menlo, monospace">Never</text>
        <circle cx="463" cy="91" r="5" fill="#22c55e"/>
        <text x="476" y="96" fill="#e4e4e7" font-size="15">Enabled</text>
        <circle cx="625" cy="91" r="18" fill="#252529"/>
        <circle cx="619" cy="91" r="2.6" fill="#f4f4f5"/>
        <circle cx="625" cy="91" r="2.6" fill="#f4f4f5"/>
        <circle cx="631" cy="91" r="2.6" fill="#f4f4f5"/>
        <rect x="0" y="118" width="690" height="1" fill="#2a2a2d"/>
        <text x="28" y="156" fill="#b8b8bd" font-size="16" font-family="SFMono-Regular, ui-monospace, Menlo, monospace">2026-06-04 21:17</text>
        <text x="230" y="156" fill="#b8b8bd" font-size="16" font-family="SFMono-Regular, ui-monospace, Menlo, monospace">2026-07-04</text>
        <circle cx="463" cy="151" r="5" fill="#f59e0b"/>
        <text x="476" y="156" fill="#b8b8bd" font-size="15">Limited</text>
        <circle cx="625" cy="151" r="18" fill="#1f1f22"/>
        <circle cx="619" cy="151" r="2.6" fill="#b8b8bd"/>
        <circle cx="625" cy="151" r="2.6" fill="#b8b8bd"/>
        <circle cx="631" cy="151" r="2.6" fill="#b8b8bd"/>
      </g>
    </g>
  </g>
  <g transform="translate(602 210)" filter="url(#shadow)" font-family="Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif">
    <rect width="250" height="250" rx="20" fill="#202023" stroke="#35353a"/>
    <g font-size="17">
      <text x="24" y="42" fill="#fff">Copy key</text>
      <text x="214" y="42" fill="#cfcfd4" font-size="22">□</text>
      <text x="24" y="82" fill="#fff">Copy connection info</text>
      <text x="214" y="82" fill="#cfcfd4" font-size="21">↗</text>
      <line x1="16" y1="104" x2="234" y2="104" stroke="#34343a"/>
      <text x="24" y="136" fill="#fff">Edit</text>
      <text x="214" y="136" fill="#cfcfd4" font-size="20">✎</text>
      <text x="24" y="176" fill="#fff">CC Switch</text>
      <text x="214" y="176" fill="#cfcfd4" font-size="22">↔</text>
      <rect x="0" y="196" width="250" height="44" fill="#343437"/>
      <text x="24" y="224" fill="#fff">Chat</text>
      <text x="216" y="224" fill="#fff" font-size="24">›</text>
    </g>
  </g>
  <g transform="translate(432 406)" filter="url(#shadow)" font-family="Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif">
    <rect width="238" height="184" rx="18" fill="#202023" stroke="#35353a"/>
    <g font-size="16" fill="#fff">
      <text x="22" y="36">Cherry Studio</text>
      <text x="202" y="36" fill="#cfcfd4">↗</text>
      <text x="22" y="72">AionUI</text>
      <text x="202" y="72" fill="#cfcfd4">↗</text>
      <text x="22" y="108">CC Switch</text>
      <text x="202" y="108" fill="#cfcfd4">↗</text>
      <text x="22" y="144">DeepChat</text>
      <text x="202" y="144" fill="#cfcfd4">↗</text>
      <text x="22" y="172">Lobe Chat</text>
      <text x="202" y="172" fill="#cfcfd4">↗</text>
    </g>
  </g>
  <g transform="translate(700 488)" font-family="Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif">
    <path d="M0 14 C55 12 68 -16 108 -58" fill="none" stroke="#60a5fa" stroke-width="3" stroke-linecap="round"/>
    <path d="M99 -56 L110 -60 L106 -48" fill="none" stroke="#60a5fa" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
    <rect x="-12" y="22" width="228" height="62" rx="16" fill="#10233f" stroke="#26558e"/>
    <text x="10" y="48" fill="#bfdbfe" font-size="15" font-weight="700">One-click import</text>
    <text x="10" y="70" fill="#dbeafe" font-size="13">Use CC-Switch or client shortcuts.</text>
  </g>
</svg>
