438 lines
33 KiB
HTML
438 lines
33 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||
<title>magpie</title>
|
||
<link rel="icon" href="icons/favicon.svg" type="image/svg+xml">
|
||
<script src="boot.js"></script>
|
||
<script src="theme.js"></script>
|
||
<script src="omarchy.js"></script>
|
||
<link rel="stylesheet" href="app.css">
|
||
<link rel="stylesheet" href="routing.css">
|
||
<link rel="stylesheet" href="library.css">
|
||
<link rel="stylesheet" href="plugins.css">
|
||
<link rel="stylesheet" href="sessions.css">
|
||
<link rel="stylesheet" href="omarchy.css">
|
||
</head>
|
||
<body>
|
||
<header class="top" style="--wails-draggable:drag">
|
||
<div class="brand">
|
||
<span class="logo" aria-hidden="true"><svg viewBox="0 0 44 44" width="18" height="18"><defs><path id="bird" fill="currentColor" fill-rule="evenodd" d="M1.5 5.5C1.3 5.7 1.2 6.5 1.2 6.9C1.2 6.9 1.2 7 1.2 7.1C1.1 7.4 1.3 8 1.4 8.3C1.4 8.4 1.5 8.5 1.5 8.7C1.5 8.9 1.7 9 1.8 9.3C2.2 9.9 2.2 10 2.3 10.1C2.4 10.2 2.5 10.3 2.6 10.5C2.8 10.8 3 11.1 3.2 11.3C3.3 11.3 3.4 11.6 3.6 11.8C3.8 12 4.1 12.4 4.2 12.5C4.7 13 5.2 13.7 5.4 13.9C6 14.5 6.5 15.1 6.7 15.3C6.7 15.4 6.9 15.5 6.9 15.7C7.3 15.9 7.7 16.5 7.9 16.8C7.9 16.8 8 16.9 8 16.9C8.1 16.9 8.2 17.2 8.2 17.3C8.2 17.3 8.1 17.2 8.1 17.1C7.9 16.9 7.9 16.9 7.6 16.6C7.5 16.5 7.4 16.5 7.4 16.3C7.2 16.2 6.7 15.7 6.3 15.2C6.1 15.1 6 14.9 6 14.9C5.9 14.8 5.7 14.7 5.7 14.6C5.6 14.5 5.4 14.3 5.3 14.2C5.1 14.1 4.9 13.8 4.7 13.5C4.5 13.3 4.2 13.1 4.1 12.9C4.1 12.9 3.8 12.7 3.8 12.5C3.5 12.3 3 11.8 2.8 11.4C1.8 10.5 0.9 9.6 0.7 9.6C0.6 9.7 0.6 9.8 0.5 10C0.5 10.1 0.6 10.2 0.5 10.3C0.5 10.4 0.6 10.5 0.6 10.6C0.5 10.7 0.5 10.9 0.6 11C0.5 11.1 0.6 11.4 0.6 11.5C0.9 12.9 1.3 13.8 2.8 14.9C2.9 15.1 3.3 15.3 3.4 15.4C3.4 15.5 3.6 15.6 3.7 15.7C4.2 16 6.4 17.8 7 18.4C7.4 18.8 7.4 18.8 7.5 18.9C7.6 19 7.7 19 7.7 19.1C7.7 19.2 7.8 19.2 7.9 19.2C7.9 19.3 8.1 19.4 8.1 19.5C8.2 19.6 8.2 19.7 8.3 19.7C8.3 19.7 8.3 19.7 8.2 19.7C8.2 19.6 8.1 19.6 8 19.6C7.9 19.5 7.9 19.4 7.8 19.4C7.7 19.3 7.6 19.2 7.6 19.2C7.6 19.1 7.5 19 7.3 18.9C7.2 18.9 6.9 18.6 6.7 18.4C6.1 17.8 4.5 16.6 3.5 16C3.4 15.8 3 15.6 2.9 15.5C2.6 15.3 1.5 14.6 0.9 14.3C0.7 14.1 0.6 14.1 0.6 14.2C0.5 14.5 0.8 15.9 0.9 16.1C0.9 16.2 1 16.2 0.9 16.3C1.2 16.8 1.9 17.6 2.7 18.3C2.8 18.5 4 19.2 4.7 19.5C6.2 20.5 6.6 20.7 7.4 21.5C8.2 22.2 8.7 22.7 9.3 23.6C9.5 24.1 9.9 24.4 10.3 25.3C10.4 25.5 10.5 25.8 10.5 25.8C10.7 25.8 10.8 25.7 11 25.4C11.6 25 11.9 24.6 12.3 24.3C12.8 24 13 23.8 13 23.7C13.1 23.7 13.1 23.8 13 24C12 24.8 11 26 10.2 26.9C10.1 27.1 9.9 27.5 9.7 27.7C9.5 27.8 9.4 28 9.4 28C9.4 28 9.3 28.3 9.1 28.5C8.6 29.2 7.7 30.8 7.7 30.9C7.7 31 7.8 31 8.3 30.8C9 30.4 9.5 30.2 10.4 30C11.7 29.6 12.5 29.6 11.6 30C10.5 30.2 9.7 30.6 9.2 31.2C8.8 31.7 8.8 31.7 9.3 31.7C10.1 31.8 10.9 31.9 11.6 32.2C12.8 32.7 13.5 33.1 15.5 34.8C16.4 35.5 17.3 36.2 17.8 36.4C17.9 36.5 18.1 36.7 18.2 36.8C19.1 37.3 21.2 38.1 22.3 38.3C22.4 38.3 22.7 38.3 22.8 38.3C22.8 38.5 23 38.5 23 38.5C23.1 38.5 23.2 38.5 23.3 38.5C23.6 38.6 25.9 38.6 26.1 38.5C26.2 38.5 26.3 38.5 26.4 38.5C26.5 38.5 26.6 38.5 26.7 38.3C26.7 38.3 27 38.3 27.1 38.3C28.3 38.1 30.2 37.3 31.4 36.7C31.5 36.7 31.7 36.4 31.8 36.4C32.2 36.2 33.2 35.4 33.4 35.2C34.2 34.5 35.5 33 35.8 32.6C35.8 32.5 36 32.2 36.1 32C36.4 31.8 36.6 31.4 36.6 31.2C36.7 31.1 36.8 30.9 36.9 30.8C37.2 30.4 37.5 29.6 37.7 29.2C37.7 29.1 37.8 28.7 37.9 28.7C38.1 28.5 38.4 27.1 38.5 26.8C39 25.2 39.1 23.7 39 22.4C39 22.2 38.9 21.9 38.9 21.8C38.9 21.7 38.9 21.6 38.9 21.4C38.6 20.5 38.5 19.9 38.2 19C37.9 18.5 37.5 17.5 37.3 17.2C37 16.8 36.8 15.8 36.8 15.2C36.8 13.8 37.7 12.7 39.6 12.2C40.1 12.1 41.3 11.8 42.1 11.7C43.5 11.5 43.5 11.5 43.4 11.3C42.9 10.7 40.9 9.9 39.2 9.7C37.9 9.5 38.1 9.5 37.6 9C37 8.6 36.4 8 36 7.9C36 7.8 35.8 7.8 35.7 7.7C35.1 7.3 34.2 7 33.1 6.9C32.6 6.7 31.6 6.9 31 7C29.6 7.3 28.3 8 27.3 9.2C26.7 9.8 26.2 10.8 25.7 11.7C25.5 12.1 24.8 13.4 24.7 13.7C24.6 13.9 24.5 14.1 24.1 14.7C23.5 15.7 22.1 16.9 20.6 17.8C20.5 18 20.3 18.2 20.1 18.3C19.7 18.5 19.4 18.8 19.1 19C18.9 19.1 18.7 19.3 18.5 19.4C18 19.8 17.2 20.3 17 20.5C16.9 20.5 16.8 20.6 16.7 20.7C16.3 20.8 16.1 20.9 16 20.9C15.5 20.8 14.9 20.5 14.2 20.2C13.7 19.8 12.7 18.9 12.4 18.6C12.3 18.5 12.2 18.4 12.1 18.2C11.9 18 11.2 17.1 11 16.6C10.9 16.5 10.8 16.4 10.7 16.3C10.7 16.2 10.6 16.1 10.6 15.9C10.5 15.9 10.4 15.7 10.4 15.6C10.3 15.5 10.2 15.2 10.1 15C10 14.8 9.8 14.4 9.7 14.2C9.6 14 9.5 13.7 9.4 13.6C9.4 13.4 9.3 13.2 9.2 13C9.2 12.8 9 12.6 9 12.5C8.9 12.3 8.7 12.1 8.7 12C8.7 12 8.5 11.7 8.5 11.7C8.3 11.2 8.2 10.9 7.5 10C6.4 8.3 4.2 6.4 2.7 5.8C2 5.5 1.6 5.4 1.5 5.5ZM28.4 16.7C29.2 16.9 29.7 17.2 29.9 17.7C30.1 18.2 30 18.9 29.6 19.4C29.2 19.9 28.2 20.9 27.6 21.2C26.8 21.7 25.3 22.4 24.2 22.7C23.9 22.8 23.6 22.9 23.5 22.9C22.8 23.2 20.7 23.7 19.6 24C19 24.2 18.4 24.3 18.1 24.4C17.9 24.4 16.1 24.9 15.3 25.1C14.6 25.2 14.7 25.1 15.7 23.6C16.4 22.7 18.5 20.6 19.4 19.9C20.8 18.8 21.4 18.4 23.2 17.6C23.8 17.4 25.6 16.8 25.9 16.8C25.9 16.8 26.3 16.8 26.6 16.7C26.8 16.7 28.2 16.7 28.4 16.7ZM30.4 20.2C30.5 20.3 30.6 20.6 30.6 20.7C31.7 23.1 33.4 24.6 35.6 25.3C36.1 25.5 36.7 25.7 37.2 25.8C37.7 25.8 37.8 25.9 37.8 26.1C37.7 26.2 37.7 26.3 37.7 26.5C37.7 26.6 37.7 26.8 37.6 27C37.4 28.5 36.8 29.9 36.1 31C36.1 31.2 35.9 31.4 35.9 31.6C35.7 31.9 35.2 32.6 34.7 33.3C32.6 35.6 29.7 37.3 26.6 37.8C26.5 37.8 26.3 37.9 26.2 37.9C25.8 37.9 23.7 37.9 23.3 37.9C23.2 37.9 23 37.8 22.9 37.8C21.1 37.6 19.3 36.8 18 35.7C17.7 35.4 17 34.7 16.8 34.5C16.3 33.8 16.1 33 16.3 32.5C16.5 31.8 16.8 31.6 17.9 31.1C19.1 30.5 19.4 30.4 20.2 30C21.4 29.4 23.2 28.4 23.9 27.9C23.9 27.8 24.2 27.7 24.5 27.6C26.3 26.3 28 24.6 28.9 22.9C29.5 22.2 29.7 21.6 29.9 20.7C30.1 20 30.2 19.9 30.4 20.2Z"/><clipPath id="bird-body"><path clip-rule="evenodd" d="M16 0H44V44H0V26.4H10.6L13 24.2L16 19Z M29.8 18.3L26 19L22 21L17 23.5L14.6 24.7L10.6 26.4L6 29V32L9 31.5L12.5 32L16.4 31.8L19 31.4L24 28.8L28.5 24L30.6 21.4Z"/></clipPath><clipPath id="bird-tail"><path d="M0 0H17L17.2 19.6L14 25L10.6 26.4H0Z"/></clipPath><clipPath id="bird-wing"><path d="M29.8 18.3L26 19L22 21L17 23.5L14.6 24.7L10.6 26.4L6 29V32L9 31.5L12.5 32L16.4 31.8L19 31.4L24 28.8L28.5 24L30.6 21.4Z"/></clipPath></defs><g class="bird"><use class="whole" href="#bird"/><g class="parts"><use href="#bird" clip-path="url(#bird-body)"/><g class="tail"><use href="#bird" clip-path="url(#bird-tail)"/></g><g class="wing"><use href="#bird" clip-path="url(#bird-wing)"/></g></g></g></svg></span>
|
||
<span>magpie</span>
|
||
</div>
|
||
<nav class="seg" id="nav" style="--wails-draggable:no-drag">
|
||
<button data-view="agents" class="on" data-t>Agents</button>
|
||
<button data-view="providers" data-t>Providers</button>
|
||
<button data-view="gateway" data-t>Gateway</button>
|
||
<button data-view="routing" data-t>Routing</button>
|
||
<button data-view="usage" data-t>Usage</button>
|
||
<button data-view="sessions" data-t>Sessions</button>
|
||
<button data-view="library" data-t>Library</button>
|
||
<button data-view="plugins" data-t>Plugins</button>
|
||
</nav>
|
||
<div class="actions" style="--wails-draggable:no-drag">
|
||
<span class="update-wrap">
|
||
<button class="update" id="update" hidden>
|
||
<svg viewBox="0 0 16 16" width="11" height="11"><path d="M8 13V3.5M3.75 7.5 8 3.25l4.25 4.25" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||
<span>Update</span>
|
||
</button>
|
||
<button class="update-hide" id="updateHide" title="Hide until the next version" data-tt>
|
||
<svg viewBox="0 0 10 10" width="8" height="8"><path d="M2.5 2.5l5 5M7.5 2.5l-5 5" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||
</button>
|
||
</span>
|
||
<button class="icon" id="sync" title="Refresh model lists (models.dev and every vendor) and check for a newer magpie" data-tt>
|
||
<svg viewBox="0 0 16 16" width="14" height="14"><path d="M13.5 8a5.5 5.5 0 1 1-1.6-3.9M13.5 2v3h-3" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||
</button>
|
||
<button class="icon" id="open" title="Open as a window" data-tt>
|
||
<svg viewBox="0 0 16 16" width="14" height="14"><path d="M6 3H3.5A1.5 1.5 0 0 0 2 4.5v8A1.5 1.5 0 0 0 3.5 14h8a1.5 1.5 0 0 0 1.5-1.5V10M9 2h5v5M14 2 8 8" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||
</button>
|
||
<button class="icon" id="prefs" title="Settings" data-tt data-keys="⌘,|Ctrl+,">
|
||
<svg viewBox="0 0 24 24" width="14" height="14"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></g></svg>
|
||
</button>
|
||
<button class="icon winclose" id="winclose" title="Close" data-tt>
|
||
<svg viewBox="0 0 16 16" width="10" height="10"><path d="M4 4l8 8M12 4l-8 8" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
<nav class="ptabs" id="ptabs" hidden>
|
||
<button type="button" data-ptab="agents"><span data-t>Agents</span><em id="ptabN"></em></button>
|
||
<button type="button" data-ptab="usage"><span data-t>Allowances</span></button>
|
||
<button type="button" data-ptab="stats"><span data-t>Usage</span></button>
|
||
<button type="button" data-ptab="routing"><span data-t>Routing</span></button>
|
||
</nav>
|
||
|
||
<main class="view" id="view-agents">
|
||
<div class="list" id="agents"></div>
|
||
<section class="profiles">
|
||
<span class="label" data-t>Profiles</span>
|
||
<div id="profiles" class="chips"></div>
|
||
<button class="text" id="save" data-t>+ Save current</button>
|
||
</section>
|
||
<section class="panel-quota" id="panelQuota" hidden></section>
|
||
<section class="panel-routing" id="panelRouting" hidden></section>
|
||
<section class="panel-usage" id="panelUsage" hidden></section>
|
||
</main>
|
||
|
||
<main class="view" id="view-providers" hidden>
|
||
<div id="fileError" hidden></div>
|
||
<div id="movable" hidden></div>
|
||
<div class="list" id="providers"></div>
|
||
<div class="row-head off-head" id="offHead" hidden><button class="fold" id="foldOff" aria-expanded="false" aria-controls="offProviders"><span class="label" data-t>Turned off</span><span class="note" id="offCount"></span></button></div>
|
||
<div class="list" id="offProviders" hidden></div>
|
||
<div id="excluded"></div>
|
||
<div class="after-list">
|
||
<button class="text" id="addProvider" data-t>+ Add provider</button>
|
||
</div>
|
||
<section class="sheet" id="addSheet" hidden></section>
|
||
</main>
|
||
|
||
<main class="view" id="view-gateway" hidden>
|
||
<div class="list gwcard">
|
||
<div class="row gw" id="gateway"></div>
|
||
</div>
|
||
<section id="gatewayKeysBlock" hidden>
|
||
<div class="row-head"><span class="label" data-t>Gateway keys</span><span class="grow"></span><button class="text" id="addGatewayKey" data-t>Add gateway key</button></div>
|
||
<p class="usage-note" data-t>Create a gateway key for each client. Usage is counted separately for each key.</p>
|
||
<section id="gatewayKeys"></section>
|
||
</section>
|
||
<div class="row-head"><button class="fold" id="foldConnect" aria-expanded="true" aria-controls="connect"><span class="label" data-t>Connect</span></button><span class="grow"></span><span class="note" id="connectNote"></span></div>
|
||
<section class="list connect" id="connect"></section>
|
||
<div class="row-head"><button class="fold" id="foldModels" aria-expanded="true" aria-controls="gwModels"><span class="label" data-t>Models</span><span class="note" id="modelsCount"></span></button><span class="grow"></span><button class="text" id="copyModels" data-t>Copy all ids</button></div>
|
||
<div class="list" id="gwModels"></div>
|
||
<div class="row-head"><span class="label" data-t>Recent calls</span><span class="grow"></span><span class="note" id="callsNote"></span></div>
|
||
<div class="list activity" id="activity"></div>
|
||
</main>
|
||
|
||
<main class="view" id="view-routing" hidden>
|
||
<div class="row-head"><span class="label" data-t>Routing</span><span class="rt-livedot" aria-hidden="true"></span><span class="note" data-t>live, as the gateway decides</span><span class="grow"></span>
|
||
<button class="text rt-mask" id="rtMask" aria-pressed="false" data-tt="Mask the accounts on this page — email addresses and account names — for a screenshot to share"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9.9 4.2A10.4 10.4 0 0 1 12 4c6.5 0 10 8 10 8a17.6 17.6 0 0 1-2.2 3.2M6.6 6.6C3.9 8.4 2 12 2 12s3.5 8 10 8a9.7 9.7 0 0 0 5.4-1.6M9.9 9.9a3 3 0 0 0 4.2 4.2M2 2l20 20"/></svg><span data-t>Hide accounts</span></button></div>
|
||
<section class="rt" id="rt"></section>
|
||
<div class="rt-more" id="rtMore"></div>
|
||
</main>
|
||
|
||
<main class="view" id="view-usage" hidden>
|
||
<div class="usage-head">
|
||
<div class="segs" id="usageTab"></div>
|
||
<div class="segs" id="period"></div>
|
||
<div class="segs" id="sessRange" hidden></div>
|
||
<span class="grow"></span>
|
||
<span class="usage-refresh" id="usageRefresh">
|
||
<button class="icon" id="usageReload" type="button" aria-label="Refresh now" data-tt><svg viewBox="0 0 16 16" width="13" height="13" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13.5 8a5.5 5.5 0 1 1-1.6-3.9M13.5 2.5v3h-3"/></svg></button>
|
||
<button class="sess-pick" id="usageEvery" type="button"></button>
|
||
</span>
|
||
<span class="usage-cost" id="usageCost"></span>
|
||
</div>
|
||
<div class="usage-pane" id="usagePane">
|
||
<div class="row-head quota-head" id="quotaHead" hidden>
|
||
<span class="label" data-t>Allowances</span>
|
||
<span class="grow"></span>
|
||
<button class="sess-pick quota-trend" id="quotaTrend" type="button" hidden></button>
|
||
<button class="text rt-mask" id="usageMask" aria-pressed="false" data-tt="Mask the accounts on this page — email addresses and account names — for a screenshot to share"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9.9 4.2A10.4 10.4 0 0 1 12 4c6.5 0 10 8 10 8a17.6 17.6 0 0 1-2.2 3.2M6.6 6.6C3.9 8.4 2 12 2 12s3.5 8 10 8a9.7 9.7 0 0 0 5.4-1.6M9.9 9.9a3 3 0 0 0 4.2 4.2M2 2l20 20"/></svg><span data-t>Hide accounts</span></button>
|
||
<div class="segs" id="quotaMode" hidden></div>
|
||
</div>
|
||
<section class="subscription-usage" id="subscriptionUsage"></section>
|
||
<p class="usage-note" id="usageScope" data-t>Gateway calls only; session-log calls are in Requests. Local rejections are excluded from totals.</p>
|
||
<section class="stats" id="stats"></section>
|
||
<section class="chart" id="chart"></section>
|
||
<div class="row-head"><span class="label" data-t>Agents</span></div>
|
||
<div class="list" id="usageAgents"></div>
|
||
<div class="row-head"><span class="label" data-t>Models</span></div>
|
||
<div class="list" id="usageModels"></div>
|
||
<div class="row-head" id="usageAccountsHead" hidden><span class="label" data-t>Accounts</span></div>
|
||
<div class="list" id="usageAccounts" hidden></div>
|
||
<div class="row-head" id="usageKeysHead" hidden><span class="label" data-t>Gateway keys</span></div>
|
||
<div class="list" id="usageKeys" hidden></div>
|
||
<p class="usage-note" id="usageNote"></p>
|
||
</div>
|
||
<div class="usage-pane" id="ledgerPane" hidden>
|
||
<div class="sess-tools">
|
||
<button class="sess-pick" id="ledComputer" type="button" hidden></button>
|
||
<button class="sess-pick" id="ledAgent" type="button" hidden></button>
|
||
<button class="sess-pick" id="ledPurpose" type="button" hidden></button>
|
||
<button class="sess-pick" id="ledProvider" type="button" hidden></button>
|
||
<button class="sess-pick" id="ledAccount" type="button" hidden></button>
|
||
<button class="sess-pick" id="ledKey" type="button" hidden></button>
|
||
<div class="segs" id="ledStatus"></div>
|
||
<span id="ledRoute" hidden><span id="ledRouteLabel"></span><button class="text" id="ledRouteClear" type="button" data-tt="Clear filter" aria-label="Clear filter">×</button></span>
|
||
<span class="grow"></span>
|
||
<input class="sess-filter" id="ledQ" type="search" spellcheck="false" autocomplete="off" placeholder="Search models, providers, sessions" data-tp>
|
||
<button class="text" id="ledExport" type="button" title="Save every request listed, all pages, as a CSV file in Downloads" data-tt><span data-t>Export CSV</span></button>
|
||
</div>
|
||
<p class="usage-note" id="ledScope" data-t>Gateway and session-log calls; local rejections excluded from totals.</p>
|
||
<div class="led-dash" id="ledDash" hidden>
|
||
<div class="led-strip" id="ledKpi"></div>
|
||
<section class="led-trend">
|
||
<div class="led-bar">
|
||
<div class="segs" id="ledMetric"></div>
|
||
<span class="grow"></span>
|
||
<span class="led-by" data-t>Split by</span>
|
||
<div class="segs" id="ledSplit"></div>
|
||
</div>
|
||
<div class="led-body">
|
||
<div class="led-chart" id="ledChart"></div>
|
||
<div class="led-rank" id="ledRank"></div>
|
||
<div class="led-rail" id="ledRail" hidden><i></i></div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
<div class="led-head"><p class="led-sum" id="ledSum"></p><span class="grow"></span><span class="led-arch" id="ledArchive"></span></div>
|
||
<div class="led-wrap" id="ledWrap"></div>
|
||
<div class="led-pager" id="ledPager" hidden></div>
|
||
<p class="usage-note" id="ledNote"></p>
|
||
</div>
|
||
<div class="usage-pane sess-pane" id="sessionsPane" hidden>
|
||
<div class="sess-tools">
|
||
<div class="segs" id="sessAgent"></div>
|
||
<button class="sess-pick" id="sessModel" type="button" hidden></button>
|
||
<button class="sess-pick" id="sessFolder" type="button" hidden></button>
|
||
</div>
|
||
<section class="stats" id="sessStats"></section>
|
||
<section class="chart sess-chart" id="sessChart" hidden></section>
|
||
<div class="sess-grid" id="sessGrid" hidden>
|
||
<section class="sess-card" id="sessProjects"></section>
|
||
<section class="sess-card" id="sessModels"></section>
|
||
<section class="sess-card" id="sessHours"></section>
|
||
<section class="sess-card" id="sessTop"></section>
|
||
<section class="sess-card" id="sessShape"></section>
|
||
<section class="sess-card" id="sessSkills"></section>
|
||
<section class="sess-card wide" id="sessTools"></section>
|
||
</div>
|
||
<div class="row-head" id="sessListHead" hidden>
|
||
<span class="label" data-t>Latest sessions</span>
|
||
<span class="grow"></span>
|
||
<button class="text sess-all" id="sessAll" type="button" data-t>All sessions</button>
|
||
<input class="sess-filter" id="sessQ" type="search" spellcheck="false" autocomplete="off" placeholder="Search sessions" data-tp>
|
||
</div>
|
||
<div class="list sess-list" id="sessList"></div>
|
||
<p class="usage-note" id="sessNote"></p>
|
||
</div>
|
||
</main>
|
||
|
||
<main class="view" id="view-sessions" hidden></main>
|
||
|
||
<main class="view" id="view-library" hidden></main>
|
||
|
||
<main class="view" id="view-plugins" hidden></main>
|
||
|
||
<main class="view" id="view-settings" hidden>
|
||
<div class="row-head set-head"><div class="warm-tabs set-tabs" id="setTabs" role="tablist" aria-label="Settings">
|
||
<button type="button" role="tab" id="setTab-general" data-set="general" aria-controls="setPage-general" data-t>General</button>
|
||
<button type="button" role="tab" id="setTab-usage" data-set="usage" aria-controls="setPage-usage" data-t>Allowances</button>
|
||
<button type="button" role="tab" id="setTab-network" data-set="network" aria-controls="setPage-network" data-t>Network and sharing</button>
|
||
<button type="button" role="tab" id="setTab-models" data-set="models" aria-controls="setPage-models" data-t>Models</button>
|
||
<button type="button" role="tab" id="setTab-privacy" data-set="privacy" aria-controls="setPage-privacy" data-t>Privacy</button>
|
||
<button type="button" role="tab" id="setTab-otel" data-set="otel" aria-controls="setPage-otel" data-t>Observability</button>
|
||
<button type="button" role="tab" id="setTab-sync" data-set="sync" aria-controls="setPage-sync" data-t>Sync and backup</button>
|
||
<button type="button" role="tab" id="setTab-about" data-set="about" aria-controls="setPage-about" data-t>About</button>
|
||
</div></div>
|
||
<section class="set-page" id="setPage-general" role="tabpanel" aria-labelledby="setTab-general">
|
||
<div class="list prefs">
|
||
<div class="row pref">
|
||
<div class="who"><div class="name" data-t>Appearance</div><div class="sub om-hide" data-t>Light or dark, or whatever the system is showing</div><div class="sub om-only" data-t>Follows the Omarchy theme, as picked in Omarchy's menu</div></div>
|
||
<div id="themeSegs" class="om-hide"></div><span class="om-only om-theme-name"></span>
|
||
</div>
|
||
<div class="row pref">
|
||
<div class="who"><div class="name" data-t>Language</div><div class="sub" data-t>Applies at once, no restart</div></div>
|
||
<div id="langSegs"></div>
|
||
</div>
|
||
<div class="row pref" id="textSizeRow">
|
||
<div class="who"><div class="name" data-t>Text size</div><div class="sub" id="textSizeSub"></div></div>
|
||
<div id="textSizeSegs"></div>
|
||
</div>
|
||
<div class="row pref">
|
||
<div class="who"><div class="name" data-t>Tray icon</div><div class="sub" data-t>What clicking magpie’s icon in the menu bar or tray opens</div></div>
|
||
<div id="traySegs"></div>
|
||
</div>
|
||
<div class="row pref" id="barIconRow" hidden>
|
||
<div class="who"><div class="name" data-t>Bar icon</div><div class="sub" data-t>magpie’s icon beside Omarchy’s own in the bar; right-click opens the window</div></div>
|
||
<div id="barIconSegs"></div>
|
||
</div>
|
||
<div class="row pref">
|
||
<div class="who"><div class="name" data-t>Provider in model names</div><div class="sub" data-t>Agents’ lists put each model’s provider after its name, or not after names you set</div></div>
|
||
<div id="plainNamesSegs"></div>
|
||
</div>
|
||
<div class="row pref">
|
||
<div class="who"><div class="name" data-t>Codex subagents on any model</div><div class="sub" data-t>Codex’s OpenAI models hand subagents their tasks as text (multi-agent V1), so a GPT lead can spawn them on magpie’s other models. New threads only; Codex’s own multi_agent_v2 setting still wins</div></div>
|
||
<div id="codexAgentsV1Segs"></div>
|
||
</div>
|
||
<div class="row pref">
|
||
<div class="who"><div class="name" data-t>Long conversations</div><div class="sub" data-t>Codex and Claude Code compact a conversation at 272K tokens on a model with a larger window; in Claude Code a Claude model runs to its own window, 1M for a [1m] one, as Anthropic runs it. The model’s full window lets any conversation grow further, with every turn slower and costlier</div></div>
|
||
<div id="fullContextSegs"></div>
|
||
</div>
|
||
<div class="row pref" id="codexTitlesRow">
|
||
<div class="who"><div class="name" data-t>Codex thread titles</div><div class="sub" id="codexTitlesSub"></div></div>
|
||
<div class="val" id="codexTitlesPick"></div>
|
||
</div>
|
||
<div class="row pref">
|
||
<div class="who"><div class="name" data-t>Open at login</div><div class="sub" data-t>Start magpie in the tray when you log in, so agents find the gateway from the start</div></div>
|
||
<div id="loginSegs"></div>
|
||
</div>
|
||
<div class="row pref" id="dockRow" hidden>
|
||
<div class="who"><div class="name" data-t>Dock</div><div class="sub" data-t>Keep magpie in the Dock too, always or while its window is open, for Cmd-Tab and a menu bar too full to show its icon</div></div>
|
||
<div id="dockSegs"></div>
|
||
</div>
|
||
<div class="row pref" id="lightweightRow" hidden>
|
||
<div class="who"><div class="name" data-t>Lightweight mode</div><div class="sub" data-t>A closed panel or window frees its page after a minute, about 100 MB each, and loads it anew when opened</div></div>
|
||
<div id="lightweightSegs"></div>
|
||
</div>
|
||
<div class="row pref" id="sessionTerminalRow" hidden>
|
||
<div class="who"><div class="name" data-t>Session terminal</div><div class="sub" data-t>Used by the terminal button in Sessions; only apps registered for .command files appear</div></div>
|
||
<button type="button" id="sessionTerminalSelect" class="sess-pick session-terminal-select" aria-label="Session terminal" aria-haspopup="menu" aria-expanded="false" data-ta></button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="set-page" id="setPage-usage" role="tabpanel" aria-labelledby="setTab-usage">
|
||
<div class="list prefs">
|
||
<div class="row pref" id="trayUsageRow">
|
||
<div class="who"><div class="name" data-t>Allowances in the menu bar</div><div class="sub" id="trayUsageSub"></div></div>
|
||
<div id="trayUsagePick"></div>
|
||
</div>
|
||
<div class="row pref" id="trayEveryRow" hidden>
|
||
<div class="who"><div class="name" data-t>Menu bar refresh</div><div class="sub" data-t>How often the allowances beside the icon are asked for again</div></div>
|
||
<div id="trayEverySegs"></div>
|
||
</div>
|
||
<div class="row pref" id="trayLogosRow" hidden>
|
||
<div class="who"><div class="name" data-t>Menu bar logos</div><div class="sub" data-t>Each subscription's logo before its numbers; off, the numbers alone with a thin line between subscriptions</div></div>
|
||
<div id="trayLogosSegs"></div>
|
||
</div>
|
||
<div class="row pref" id="trayBirdRow" hidden>
|
||
<div class="who"><div class="name" data-t>Menu bar magpie icon</div><div class="sub" data-t>magpie's icon before the allowances; off, the allowances alone, and a click on one still opens the panel</div></div>
|
||
<div id="trayBirdSegs"></div>
|
||
</div>
|
||
<div class="row pref">
|
||
<div class="who"><div class="name" data-t>Allowance display</div><div class="sub" data-t>How much of each window is used, or how much is left, on the Usage page, the panel and the menu bar</div></div>
|
||
<div id="quotaLeftSegs"></div>
|
||
</div>
|
||
<div class="row pref">
|
||
<div class="who"><div class="name" data-t>Currency</div><div class="sub" id="currencySub"></div></div>
|
||
<div id="currencySegs"></div>
|
||
</div>
|
||
<div class="row pref" id="unitsRow" hidden>
|
||
<div class="who"><div class="name" data-t>Number units</div><div class="sub" data-t>How a large count of tokens or requests is shortened on the Usage page and the panel</div></div>
|
||
<div id="unitsSegs"></div>
|
||
</div>
|
||
<div class="row pref" id="usageAlertRow">
|
||
<div class="who"><div class="name" data-t>Allowance alert</div><div class="sub" id="usageAlertSub"></div></div>
|
||
<div id="usageAlertSegs" class="warm-at"></div>
|
||
</div>
|
||
<div class="row pref" id="balanceAlertRow">
|
||
<div class="who"><div class="name" data-t>Low balance alert</div><div class="sub" id="balanceAlertSub"></div></div>
|
||
<div id="balanceAlertSegs" class="warm-at"></div>
|
||
</div>
|
||
</div>
|
||
<div class="row-head warm-head"><div class="warm-tabs" id="warmTabs" role="tablist">
|
||
<button type="button" role="tab" id="warmTab-codex" data-warm="codex" aria-controls="codexWarmList">Codex</button>
|
||
<button type="button" role="tab" id="warmTab-claude" data-warm="claude" aria-controls="claudeWarmList">Claude Code</button>
|
||
<button type="button" role="tab" id="warmTab-wb" data-warm="wb" aria-controls="wbList" hidden>WorkBuddy</button>
|
||
<button type="button" role="tab" id="warmTab-trae" data-warm="trae" aria-controls="traeList" hidden>Trae CN</button>
|
||
</div></div>
|
||
<div class="warm-panes">
|
||
<div class="list prefs" id="codexWarmList" role="tabpanel" aria-labelledby="warmTab-codex">
|
||
<div class="row pref">
|
||
<div class="who"><div class="name" data-t>Warm up on reset</div><div class="sub" id="warmSub"></div></div>
|
||
<div id="warmSegs"></div>
|
||
</div>
|
||
<div class="row pref">
|
||
<div class="who"><div class="name" data-t>Daily warm-up</div><div class="sub" id="warmAtSub"></div></div>
|
||
<div id="warmAtSegs" class="warm-at"></div>
|
||
</div>
|
||
</div>
|
||
<div class="list prefs" id="claudeWarmList" role="tabpanel" aria-labelledby="warmTab-claude">
|
||
<div class="row pref">
|
||
<div class="who"><div class="name" data-t>Warm up on reset</div><div class="sub" id="claudeWarmSub"></div></div>
|
||
<div id="claudeWarmSegs"></div>
|
||
</div>
|
||
<div class="row pref">
|
||
<div class="who"><div class="name" data-t>Daily warm-up</div><div class="sub" id="claudeWarmAtSub"></div></div>
|
||
<div id="claudeWarmAtSegs" class="warm-at"></div>
|
||
</div>
|
||
</div>
|
||
<div class="list prefs" id="wbList" role="tabpanel" aria-labelledby="warmTab-wb">
|
||
<div class="row pref" id="wbCheckinRow">
|
||
<div class="who"><div class="name" data-t>Daily check-in</div><div class="sub" id="wbCheckinSub"></div></div>
|
||
<div id="wbCheckinSegs"></div>
|
||
</div>
|
||
</div>
|
||
<div class="list prefs" id="traeList" role="tabpanel" aria-labelledby="warmTab-trae">
|
||
<div class="row pref" id="traeCheckinRow">
|
||
<div class="who"><div class="name" data-t>Daily check-in</div><div class="sub" id="traeCheckinSub"></div></div>
|
||
<div id="traeCheckinSegs"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="set-page" id="setPage-network" role="tabpanel" aria-labelledby="setTab-network">
|
||
<div class="list prefs">
|
||
<div class="row pref">
|
||
<div class="who"><div class="name" data-t>Proxy</div><div class="sub" id="proxySub"></div></div>
|
||
<div id="proxySegs" class="proxy-segs"></div>
|
||
</div>
|
||
</div>
|
||
<div class="row-head"><span class="label">GitHub</span></div>
|
||
<div class="list prefs" id="githubList"></div>
|
||
<div class="row-head"><span class="label" data-t>Local network</span></div>
|
||
<div class="list prefs" id="lanList"></div>
|
||
</section>
|
||
<section class="set-page" id="setPage-models" role="tabpanel" aria-labelledby="setTab-models">
|
||
<div class="row-head"><span class="label" data-t>Images</span></div>
|
||
<div class="list prefs" id="imagesList"></div>
|
||
<div class="row-head"><span class="label" data-t>Web search</span></div>
|
||
<div class="list prefs" id="searchList"></div>
|
||
</section>
|
||
<section class="set-page" id="setPage-privacy" role="tabpanel" aria-labelledby="setTab-privacy">
|
||
<div class="list prefs" id="redactList"></div>
|
||
</section>
|
||
<section class="set-page" id="setPage-otel" role="tabpanel" aria-labelledby="setTab-otel">
|
||
<div class="list prefs" id="otelList"></div>
|
||
</section>
|
||
<section class="set-page" id="setPage-sync" role="tabpanel" aria-labelledby="setTab-sync">
|
||
<div class="list prefs" id="syncList"></div>
|
||
</section>
|
||
<section class="set-page" id="setPage-about" role="tabpanel" aria-labelledby="setTab-about">
|
||
<div class="list prefs" id="about"></div>
|
||
</section>
|
||
</main>
|
||
|
||
<footer class="foot">
|
||
<button type="button" class="text prof-btn" id="profBtn" hidden aria-haspopup="dialog" aria-expanded="false"><span data-t>Profiles</span><em id="profN"></em></button>
|
||
<span id="pqAge" class="pq-age" hidden></span>
|
||
<span id="status" class="status"></span>
|
||
<span class="grow"></span>
|
||
<button class="text" id="openMain" data-t>Open magpie</button>
|
||
<button class="text" id="quit" data-t>Quit</button>
|
||
</footer>
|
||
|
||
<div class="modal" id="modal" hidden><div class="dialog"></div></div>
|
||
|
||
<div id="pop" class="pop" hidden>
|
||
<div class="search">
|
||
<svg viewBox="0 0 16 16" width="13" height="13"><circle cx="7" cy="7" r="4.5" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="m10.5 10.5 3 3" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>
|
||
<input id="q" type="text" spellcheck="false" autocomplete="off" placeholder="Filter…" data-tp>
|
||
</div>
|
||
<div class="picker-body">
|
||
<nav id="pickerRail" aria-label="Model providers"></nav>
|
||
<ul id="list"></ul>
|
||
</div>
|
||
<div class="effort-control" id="effortControl" hidden>
|
||
<div class="effort-head"><span id="effortTitle"></span><b id="effortValue"></b></div>
|
||
<div class="effort-track">
|
||
<span class="effort-ticks" id="effortTicks" aria-hidden="true"></span>
|
||
<input id="effortRange" type="range" min="0" step="1" aria-labelledby="effortTitle">
|
||
</div>
|
||
<div class="effort-ends" aria-hidden="true"><span id="effortMin"></span><span id="effortMax"></span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="compat.js"></script>
|
||
<script src="i18n.js"></script>
|
||
<script src="caller-keys.js"></script>
|
||
<script src="app.js"></script>
|
||
<script src="routing.js"></script>
|
||
<script src="library.js"></script>
|
||
<script src="plugins.js"></script>
|
||
<script src="sessions.js"></script>
|
||
</body>
|
||
</html>
|