codex-lb 0.3.1__py3-none-any.whl → 0.4.0__py3-none-any.whl

app/static/index.css

@@ -90,6 +90,14 @@ body {
   -webkit-font-smoothing: antialiased;
 }
 
+body[data-theme="dark"] {
+  color-scheme: dark;
+}
+
+body[data-theme="light"] {
+  color-scheme: light;
+}
+
 .app-shell {
   display: flex;
   flex-direction: column;
@@ -424,6 +432,11 @@ body {
   color: var(--status-error-text);
 }
 
+.status-pill.error {
+  background: var(--status-error-bg);
+  color: var(--status-error-text);
+}
+
 .status-pill.deactivated,
 .status-pill.paused {
   background: var(--status-paused-bg);
@@ -585,6 +598,306 @@ body {
   background: var(--accent-primary-hover);
 }
 
+.controls-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-bottom: 16px;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.controls-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+
+.filter-input {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  color: var(--text-main);
+  padding: 8px 12px;
+  border-radius: 6px;
+  font-size: 13px;
+  outline: none;
+  min-width: 120px;
+}
+
+.filter-input:focus {
+  border-color: var(--accent-primary);
+}
+
+.filter-select {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  color: var(--text-main);
+  padding: 8px 32px 8px 12px;
+  border-radius: 6px;
+  font-size: 13px;
+  outline: none;
+  -webkit-appearance: none;
+  appearance: none;
+  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%2358A6FF%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
+  background-repeat: no-repeat;
+  background-position: right 10px top 50%;
+  background-size: 10px auto;
+}
+
+.filter-select[multiple] {
+  padding-right: 12px;
+  background-image: none;
+}
+
+.filter-select option {
+  background: var(--bg-surface);
+  color: var(--text-main);
+}
+
+.single-select {
+  position: relative;
+}
+
+.single-select-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-width: 120px;
+  cursor: pointer;
+  position: relative;
+  background-image: none;
+}
+
+.single-select-trigger::after {
+  content: "";
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  width: 10px;
+  height: 10px;
+  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%2358A6FF%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
+  background-repeat: no-repeat;
+  background-size: contain;
+  transform: translateY(-50%) rotate(0deg);
+  transition: transform 0.25s ease;
+}
+
+.single-select-trigger[aria-expanded="true"] {
+  border-color: var(--accent-primary);
+  box-shadow: 0 0 0 1px var(--accent-primary);
+}
+
+.single-select-trigger[aria-expanded="true"]::after {
+  transform: translateY(-50%) rotate(180deg);
+}
+
+.single-select-menu {
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 0;
+  z-index: 50;
+  width: max-content;
+  min-width: 140px;
+  padding: 8px;
+  padding-top: 12px;
+  border-radius: 10px;
+  border: 1px solid var(--border-subtle);
+  background: var(--bg-panel);
+  box-shadow: var(--shadow-md);
+}
+
+.single-select-menu::before {
+  content: "";
+  position: absolute;
+  top: -6px;
+  left: 16px;
+  width: 10px;
+  height: 10px;
+  background: var(--bg-panel);
+  border-left: 1px solid var(--border-subtle);
+  border-top: 1px solid var(--border-subtle);
+  transform: rotate(45deg);
+}
+
+.single-select-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 10px;
+  border-radius: 8px;
+  cursor: pointer;
+  user-select: none;
+  color: var(--text-main);
+  font-size: 13px;
+}
+
+.single-select-item:hover {
+  background: var(--bg-list-hover);
+}
+
+.single-select-item.is-selected {
+  background: var(--bg-list-selected);
+}
+
+.single-select-item input[type="radio"] {
+  display: none;
+}
+
+.multi-select {
+  position: relative;
+}
+
+.multi-select-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-width: 180px;
+  cursor: pointer;
+  position: relative;
+  background-image: none;
+}
+
+.multi-select-trigger::after {
+  content: "";
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  width: 10px;
+  height: 10px;
+  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%2358A6FF%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
+  background-repeat: no-repeat;
+  background-size: contain;
+  transform: translateY(-50%) rotate(0deg);
+  transition: transform 0.25s ease;
+}
+
+.multi-select-trigger:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+
+.multi-select-trigger[aria-expanded="true"] {
+  border-color: var(--accent-primary);
+  box-shadow: 0 0 0 1px var(--accent-primary);
+}
+
+.multi-select-trigger[aria-expanded="true"]::after {
+  transform: translateY(-50%) rotate(180deg);
+}
+
+
+.multi-select-menu {
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 0;
+  z-index: 50;
+  width: max-content;
+  min-width: 220px;
+  max-width: 360px;
+  padding: 8px;
+  padding-top: 12px;
+  border-radius: 10px;
+  border: 1px solid var(--border-subtle);
+  background: var(--bg-panel);
+  box-shadow: var(--shadow-md);
+  overflow: visible;
+}
+
+.multi-select-scroller {
+  max-height: 280px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  /* Add padding to ensure scrollbar doesn't overlap content tightly if needed, 
+     but we removed padding from parent. Wait, parent has padding 8px. 
+     The scroller is inside. */
+}
+
+.multi-select-menu::before {
+  content: "";
+  position: absolute;
+  top: -6px;
+  left: 16px;
+  width: 10px;
+  height: 10px;
+  background: var(--bg-panel);
+  border-left: 1px solid var(--border-subtle);
+  border-top: 1px solid var(--border-subtle);
+  transform: rotate(45deg);
+}
+
+.multi-select-actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 6px;
+}
+
+.multi-select-action {
+  background: transparent;
+  border: 1px solid var(--border-subtle);
+  color: var(--text-muted);
+  padding: 6px 10px;
+  border-radius: 8px;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.multi-select-action:hover {
+  border-color: var(--border-strong);
+  color: var(--text-main);
+}
+
+.multi-select-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 10px;
+  border-radius: 8px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.multi-select-item:hover {
+  background: var(--bg-list-hover);
+}
+
+.multi-select-item input[type="checkbox"] {
+  accent-color: var(--accent-primary);
+}
+
+.multi-select-label {
+  color: var(--text-main);
+  font-size: 13px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 280px;
+}
+
+.filter-apply {
+  font-size: 13px;
+  padding: 8px 12px;
+  border-radius: 6px;
+  border: 1px solid var(--accent-primary);
+  background: var(--accent-primary);
+  color: var(--accent-primary-text);
+  cursor: pointer;
+  font-weight: 500;
+  transition: all 0.2s;
+}
+
+.filter-apply:hover {
+  border-color: var(--accent-primary-hover);
+  background: var(--accent-primary-hover);
+}
+
+.filter-apply:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
 .table-wrap {
   width: 100%;
   overflow-x: auto;
@@ -592,6 +905,18 @@ body {
   border-radius: 8px;
 }
 
+.table-wrap--requests th,
+.table-wrap--requests td {
+  text-align: center;
+}
+
+.table-wrap--requests td:nth-child(2),
+.table-wrap--requests td:nth-child(5) {
+  text-align: left;
+}
+
+
+
 table {
   width: 100%;
   border-collapse: collapse;
@@ -606,6 +931,56 @@ table {
   text-overflow: ellipsis;
 }
 
+.error-cell {
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+  min-width: 0;
+}
+
+.error-cell.placeholder {
+  justify-content: center;
+}
+
+.error-cell.placeholder .error-text {
+  text-align: center;
+}
+
+.error-text {
+  flex: 1;
+  min-width: 0;
+}
+
+.error-text.truncated {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.cell-error {
+  vertical-align: middle;
+}
+
+.error-toggle {
+  background: transparent;
+  border: none;
+  color: var(--accent-primary);
+  font-size: 11px;
+  padding: 0;
+  cursor: pointer;
+  white-space: nowrap;
+  margin-top: 3px;
+  font-weight: 500;
+  line-height: 1.2;
+  min-width: 32px;
+  text-align: left;
+  flex-shrink: 0;
+}
+
+.error-toggle:hover {
+  text-decoration: underline;
+}
+
 /* ... existing styles ... */
 
 .list-actions .searchbox button {
@@ -641,12 +1016,14 @@ th {
   font-size: 12px;
   text-transform: uppercase;
   border-bottom: 1px solid var(--border-subtle);
+  vertical-align: middle;
 }
 
 td {
-  padding: 14px 20px;
+  padding: 12px 20px;
   border-bottom: 1px solid var(--border-subtle);
   color: var(--text-main);
+  vertical-align: middle;
 }
 
 tr:last-child td {

app/static/index.html

@@ -4,7 +4,7 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <meta name="color-scheme" content="light">
+  <meta name="color-scheme" content="light dark">
   <title>Codex LB</title>
   <link rel="icon"
     href="data:image/svg+xml,%3Csvg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;32&quot; height=&quot;32&quot; fill=&quot;none&quot; viewBox=&quot;0 0 32 32&quot;%3E%3Cpath stroke=&quot;%23000&quot; stroke-linecap=&quot;round&quot; stroke-width=&quot;2.484&quot; d=&quot;M22.356 19.797H17.17M9.662 12.29l1.979 3.576a.511.511 0 0 1-.005.504l-1.974 3.409M30.758 16c0 8.15-6.607 14.758-14.758 14.758-8.15 0-14.758-6.607-14.758-14.758C1.242 7.85 7.85 1.242 16 1.242c8.15 0 14.758 6.608 14.758 14.758Z&quot;/%3E%3C/svg%3E"
@@ -44,7 +44,7 @@
       <div class="loading-overlay" x-show="isLoading" x-transition.opacity>
         <div class="loading-panel" role="status" aria-live="polite">
           <span class="spinner animate" aria-hidden="true"></span>
-          <div>Loading dashboard...</div>
+          <div>Loading Dashboard...</div>
         </div>
       </div>
       <section class="tabs" aria-label="Codex FE tabs">
@@ -149,6 +149,161 @@
 
           <div class="panel" style="margin-top: 12px">
             <h3>Recent requests</h3>
+
+            <div class="controls-toolbar">
+              <div class="controls-group">
+                <input type="text" class="filter-input" placeholder="Search..." x-model="filtersDraft.search"
+                  @keyup.enter="applyFilters()" style="width: 200px;">
+
+                <div class="single-select" x-data="{ open: false }" @click.outside="open = false">
+                  <button type="button" class="filter-select single-select-trigger" @click="open = !open"
+                    :aria-expanded="open">
+                    <span x-text="timeframeLabel(filtersDraft.timeframe)"></span>
+                  </button>
+                  <div class="single-select-menu" x-show="open" x-transition.opacity>
+                    <label class="single-select-item" :class="{ 'is-selected': filtersDraft.timeframe === 'all' }">
+                      <input type="radio" name="timeframe" value="all" x-model="filtersDraft.timeframe"
+                        @change="open = false">
+                      <span>All time</span>
+                    </label>
+                    <label class="single-select-item" :class="{ 'is-selected': filtersDraft.timeframe === '1h' }">
+                      <input type="radio" name="timeframe" value="1h" x-model="filtersDraft.timeframe"
+                        @change="open = false">
+                      <span>Last 1h</span>
+                    </label>
+                    <label class="single-select-item" :class="{ 'is-selected': filtersDraft.timeframe === '24h' }">
+                      <input type="radio" name="timeframe" value="24h" x-model="filtersDraft.timeframe"
+                        @change="open = false">
+                      <span>Last 24h</span>
+                    </label>
+                    <label class="single-select-item" :class="{ 'is-selected': filtersDraft.timeframe === '7d' }">
+                      <input type="radio" name="timeframe" value="7d" x-model="filtersDraft.timeframe"
+                        @change="open = false">
+                      <span>Last 7d</span>
+                    </label>
+                  </div>
+                </div>
+
+
+                <div class="multi-select" x-data="{ open: false }" @click.outside="open = false">
+                  <button type="button" class="filter-select multi-select-trigger" @click="open = !open"
+                    :aria-expanded="open" :disabled="requestLogOptions.isLoading">
+                    <span
+                      x-text="multiSelectSummary(filtersDraft.accountIds, 'All accounts', 'account', 'accounts')"></span>
+                  </button>
+                  <div class="multi-select-menu" x-show="open" x-transition.opacity>
+                    <div class="multi-select-scroller">
+                      <div class="multi-select-actions">
+                        <button type="button" class="multi-select-action"
+                          @click="filtersDraft.accountIds = []; open = false">Clear</button>
+                      </div>
+                      <template x-for="accountId in requestLogOptions.accountIds" :key="accountId">
+                        <label class="multi-select-item">
+                          <input type="checkbox" :checked="filtersDraft.accountIds.includes(accountId)"
+                            @change="toggleMultiSelectValue('accountIds', accountId)">
+                          <span class="multi-select-label" x-text="accountFilterLabel(accountId)"></span>
+                        </label>
+                      </template>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="multi-select" x-data="{ open: false }" @click.outside="open = false">
+                  <button type="button" class="filter-select multi-select-trigger" @click="open = !open"
+                    :aria-expanded="open" :disabled="requestLogOptions.isLoading">
+                    <span
+                      x-text="multiSelectSummary(filtersDraft.modelOptions, 'All models', 'model', 'models')"></span>
+                  </button>
+                  <div class="multi-select-menu" x-show="open" x-transition.opacity>
+                    <div class="multi-select-scroller">
+                      <div class="multi-select-actions">
+                        <button type="button" class="multi-select-action"
+                          @click="filtersDraft.modelOptions = []; open = false">Clear</button>
+                      </div>
+                      <template x-for="modelOption in requestLogOptions.modelOptions"
+                        :key="modelOptionValue(modelOption)">
+                        <label class="multi-select-item">
+                          <input type="checkbox"
+                            :checked="filtersDraft.modelOptions.includes(modelOptionValue(modelOption))"
+                            @change="toggleMultiSelectValue('modelOptions', modelOptionValue(modelOption))">
+                          <span class="multi-select-label" x-text="modelOptionLabel(modelOption)"></span>
+                        </label>
+                      </template>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="multi-select" x-data="{ open: false }" @click.outside="open = false">
+                  <button type="button" class="filter-select multi-select-trigger" @click="open = !open"
+                    :aria-expanded="open">
+                    <span x-text="multiSelectSummary(filtersDraft.statuses, 'All status', 'status', 'statuses')"></span>
+                  </button>
+                  <div class="multi-select-menu" x-show="open" x-transition.opacity>
+                    <div class="multi-select-scroller">
+                      <div class="multi-select-actions">
+                        <button type="button" class="multi-select-action"
+                          @click="filtersDraft.statuses = []; open = false">Clear</button>
+                      </div>
+                      <label class="multi-select-item">
+                        <input type="checkbox" :checked="filtersDraft.statuses.includes('ok')"
+                          @change="toggleMultiSelectValue('statuses', 'ok')">
+                        <span class="multi-select-label">OK</span>
+                      </label>
+                      <label class="multi-select-item">
+                        <input type="checkbox" :checked="filtersDraft.statuses.includes('rate_limit')"
+                          @change="toggleMultiSelectValue('statuses', 'rate_limit')">
+                        <span class="multi-select-label">Rate Limit</span>
+                      </label>
+                      <label class="multi-select-item">
+                        <input type="checkbox" :checked="filtersDraft.statuses.includes('quota')"
+                          @change="toggleMultiSelectValue('statuses', 'quota')">
+                        <span class="multi-select-label">Quota</span>
+                      </label>
+                      <label class="multi-select-item">
+                        <input type="checkbox" :checked="filtersDraft.statuses.includes('error')"
+                          @change="toggleMultiSelectValue('statuses', 'error')">
+                        <span class="multi-select-label">Error</span>
+                      </label>
+                    </div>
+                  </div>
+                </div>
+
+                <input type="number" class="filter-input" placeholder="Min Cost ($)" x-model="filtersDraft.minCost"
+                  @keyup.enter="applyFilters()" style="width: 110px;" step="0.01">
+
+                <button type="button" class="filter-apply" @click="applyFilters()"
+                  :disabled="recentRequestsState.isLoading">Apply</button>
+              </div>
+
+              <div class="controls-group">
+                <span style="font-size: 13px; color: var(--text-muted);">Show:</span>
+                <div class="single-select" x-data="{ open: false }" @click.outside="open = false">
+                  <button type="button" class="filter-select single-select-trigger" @click="open = !open"
+                    :aria-expanded="open" style="min-width: 60px">
+                    <span x-text="pagination.limit"></span>
+                  </button>
+                  <div class="single-select-menu" x-show="open" x-transition.opacity style="min-width: 80px">
+                    <label class="single-select-item" :class="{ 'is-selected': pagination.limit == 25 }">
+                      <input type="radio" name="limit" value="25" x-model="pagination.limit" @change="open = false">
+                      <span>25</span>
+                    </label>
+                    <label class="single-select-item" :class="{ 'is-selected': pagination.limit == 50 }">
+                      <input type="radio" name="limit" value="50" x-model="pagination.limit" @change="open = false">
+                      <span>50</span>
+                    </label>
+                    <label class="single-select-item" :class="{ 'is-selected': pagination.limit == 100 }">
+                      <input type="radio" name="limit" value="100" x-model="pagination.limit" @change="open = false">
+                      <span>100</span>
+                    </label>
+                    <label class="single-select-item" :class="{ 'is-selected': pagination.limit == 250 }">
+                      <input type="radio" name="limit" value="250" x-model="pagination.limit" @change="open = false">
+                      <span>250</span>
+                    </label>
+                  </div>
+                </div>
+              </div>
+            </div>
+
             <div class="table-wrap table-wrap--requests table-wrap--column-lines has-scrollbar">
               <table>
                 <thead>
@@ -158,21 +313,41 @@
                     <th style="width: 15%">Model</th>
                     <th style="width: 10%">Status</th>
                     <th style="width: 15%">Error</th>
-                    <th style="text-align: right; width: 10%">Tokens</th>
-                    <th style="text-align: right; width: 10%">Cost</th>
+                    <th style="width: 10%">Tokens</th>
+                    <th style="width: 10%">Cost</th>
                   </tr>
                 </thead>
                 <tbody>
                   <template x-for="request in dashboard.requests" :key="request.key">
                     <tr>
-                      <td x-text="request.time"></td>
+                      <td>
+                        <div x-text="request.time.time"></div>
+                        <div x-text="request.time.date" class="text-muted" style="font-size: 11px;"></div>
+                      </td>
                       <td class="cell-truncate" x-text="request.account" :title="request.account"></td>
                       <td class="cell-truncate" x-text="request.model" :title="request.model"></td>
                       <td><span class="status-pill" :class="request.status.class" x-text="request.status.label"></span>
                       </td>
-                      <td class="cell-truncate" x-text="request.error" :title="request.errorTitle || ''"></td>
-                      <td style="text-align: right" x-text="request.tokens"></td>
-                      <td style="text-align: right" x-text="request.cost"></td>
+                      <td class="cell-error">
+                        <div class="error-cell" :class="request.isErrorPlaceholder ? 'placeholder' : ''"
+                          x-data="{ expanded: false }">
+                          <div class="error-text" :class="!expanded ? 'truncated' : ''"
+                            x-text="expanded ? request.errorTitle : request.error"
+                            :title="!expanded ? request.errorTitle : ''"></div>
+                          <template x-if="request.isTruncated">
+                            <button class="error-toggle" @click="expanded = !expanded"
+                              x-text="expanded ? 'Less' : 'More'"></button>
+                          </template>
+                        </div>
+                      </td>
+                      <td>
+                        <div x-text="request.tokens.total"></div>
+                        <template x-if="request.tokens.cached">
+                          <div x-text="`${request.tokens.cached} Cached`" class="text-muted" style="font-size: 11px;">
+                          </div>
+                        </template>
+                      </td>
+                      <td x-text="request.cost"></td>
                     </tr>
                   </template>
                 </tbody>