farming-code 2.2.8 → 2.2.12

package/frontend/skins/crt/index.html

@@ -68,6 +68,12 @@
             z-index: 1;
         }
 
+        .map-area.empty {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
         .map-area.hidden {
             display: none;
         }
@@ -157,10 +163,150 @@
             white-space: pre;
         }
 
-        .agent-block.working .agent-output {
+        .agent-output.structured-preview {
+            color: inherit;
+        }
+
+        .agent-chat-preview {
+            position: absolute;
+            inset: 3px 0 0;
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-end;
+            gap: 5px;
+            min-height: 0;
+            padding: 0 4px 2px 12px;
+            overflow: hidden;
+        }
+
+        .agent-chat-preview::before {
+            content: '';
+            position: absolute;
+            top: 18px;
+            bottom: 5px;
+            left: 4px;
+            width: 1px;
+            background: linear-gradient(to bottom, transparent, currentColor 18%, currentColor 82%, transparent);
+            opacity: 0.32;
+        }
+
+        .agent-chat-preview-meta {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 8px;
+            min-height: 11px;
+            font-size: 9px;
+            line-height: 1;
+            letter-spacing: 0.12em;
+            opacity: 0.62;
+            white-space: nowrap;
+        }
+
+        .agent-chat-preview-trail {
+            display: flex;
+            flex: 0 1 auto;
+            flex-direction: column;
+            justify-content: flex-end;
+            gap: 5px;
+            min-height: 0;
+            overflow: hidden;
+        }
+
+        .agent-chat-preview-state {
+            display: inline-flex;
+            align-items: center;
+            gap: 5px;
+            min-width: 0;
+        }
+
+        .agent-chat-preview-state i {
+            display: block;
+            width: 5px;
+            height: 5px;
+            flex: 0 0 auto;
+            border: 1px solid currentColor;
+            border-radius: 50%;
+        }
+
+        .agent-chat-preview.active .agent-chat-preview-state i {
+            background: currentColor;
+            box-shadow: 0 0 5px currentColor;
+            animation: crt-chat-signal 1.6s ease-in-out infinite;
+        }
+
+        .agent-chat-preview-line {
+            position: relative;
+            display: grid;
+            grid-template-columns: 40px minmax(0, 1fr);
+            gap: 6px;
+            flex: 0 0 auto;
+            min-width: 0;
+            font-size: 11px;
+            line-height: 1.28;
+        }
+
+        .agent-chat-preview-line::before {
+            content: '';
+            position: absolute;
+            top: 0.45em;
+            left: -10px;
+            width: 4px;
+            height: 4px;
+            border: 1px solid currentColor;
+            border-radius: 50%;
+            background: #0a0a0a;
+            box-shadow: 0 0 4px currentColor;
+        }
+
+        .agent-chat-preview-role {
+            padding-top: 1px;
+            font-size: 9px;
+            letter-spacing: 0.08em;
+            opacity: 0.56;
+        }
+
+        .agent-chat-preview-text {
+            min-width: 0;
+            overflow: hidden;
+            overflow-wrap: anywhere;
+        }
+
+        .agent-chat-preview-line.user .agent-chat-preview-text {
+            opacity: 0.74;
+        }
+
+        .agent-chat-preview-line.assistant .agent-chat-preview-text {
+            text-shadow: 0 0 6px currentColor;
+        }
+
+        .agent-chat-preview-line.activity {
+            opacity: 0.72;
+        }
+
+        .agent-chat-preview-line.activity .agent-chat-preview-text {
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 1;
+            font-style: italic;
+        }
+
+        .agent-chat-preview-empty {
+            padding: 7px 0 3px;
+            font-size: 10px;
+            letter-spacing: 0.08em;
+            opacity: 0.58;
+        }
+
+        .agent-block.working .agent-output:not(.structured-preview) {
             animation: blink 0.5s infinite;
         }
 
+        @keyframes crt-chat-signal {
+            0%, 100% { opacity: 0.45; transform: scale(0.82); }
+            50% { opacity: 1; transform: scale(1); }
+        }
+
         @keyframes blink {
             0%, 100% { opacity: 1; }
             50% { opacity: 0.8; }
@@ -825,6 +971,24 @@
             margin-bottom: 20px;
         }
 
+        .empty-state p {
+            margin-bottom: 16px;
+        }
+
+        .empty-start-agent {
+            padding: 8px 20px;
+            border: 1px solid #00ff00;
+            background: #1a1a1a;
+            color: #00ff00;
+            cursor: pointer;
+            font: inherit;
+        }
+
+        .empty-start-agent:hover,
+        .empty-start-agent:focus-visible {
+            background: #3a3a3a;
+        }
+
         .modal.active {
             z-index: 10001;
         }
@@ -1104,6 +1268,105 @@
             font-family: 'Courier New', monospace;
         }
 
+        .workspace-input:disabled {
+            color: #7eaa7e;
+            border-color: #316831;
+            cursor: not-allowed;
+        }
+
+        .workspace-directory-prompt {
+            display: grid;
+            grid-template-columns: 36px minmax(0, 1fr);
+            gap: 10px 12px;
+            margin-top: 12px;
+            padding: 14px;
+            border: 1px solid #2fdc2f;
+            background: rgba(8, 16, 8, 0.96);
+            box-shadow: inset 0 0 14px rgba(0, 255, 0, 0.04);
+        }
+
+        .workspace-directory-prompt[hidden] {
+            display: none;
+        }
+
+        .workspace-directory-prompt.error {
+            border-color: #ff4d4d;
+            background: rgba(35, 8, 8, 0.96);
+            box-shadow: inset 0 0 14px rgba(255, 77, 77, 0.05);
+        }
+
+        .workspace-directory-prompt-icon {
+            color: #00ffff;
+            font-size: 13px;
+            font-weight: bold;
+            line-height: 1.4;
+        }
+
+        .workspace-directory-prompt.error .workspace-directory-prompt-icon {
+            color: #ff6b6b;
+        }
+
+        .workspace-directory-prompt-copy {
+            min-width: 0;
+        }
+
+        .workspace-directory-prompt h4 {
+            margin: 0 0 6px;
+            color: #9dff97;
+            font-size: 14px;
+        }
+
+        .workspace-directory-prompt.error h4 {
+            color: #ff8585;
+        }
+
+        .workspace-directory-prompt p {
+            margin: 0 0 10px;
+            color: #9aaa9a;
+            font-size: 12px;
+            line-height: 1.45;
+        }
+
+        .workspace-directory-prompt code {
+            display: block;
+            overflow: hidden;
+            padding: 7px 9px;
+            border: 1px solid #184d18;
+            background: #050905;
+            color: #87ff87;
+            font-family: 'Courier New', monospace;
+            font-size: 12px;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        .workspace-directory-prompt.error code {
+            border-color: #673232;
+            color: #ffaaaa;
+        }
+
+        .workspace-directory-prompt-actions {
+            grid-column: 2;
+            display: flex;
+            gap: 8px;
+        }
+
+        .input-dialog-content .workspace-directory-prompt-actions button {
+            margin-right: 0;
+            padding: 8px 12px;
+            font-size: 12px;
+        }
+
+        .input-dialog-content .workspace-directory-prompt-actions button.secondary {
+            border: 1px solid #2d6b2d;
+            background: transparent;
+            color: #87ff87;
+        }
+
+        .input-dialog-content .workspace-directory-prompt-actions button.secondary:hover {
+            background: rgba(0, 255, 0, 0.08);
+        }
+
         .workspace-history {
             margin-top: 12px;
             border: 1px solid #184d18;
@@ -1227,6 +1490,14 @@
             <div class="empty-state" id="empty-state">
                 <h2>No Agents Running</h2>
                 <p>Press <strong>N</strong> to start a new agent</p>
+                <button
+                    type="button"
+                    class="empty-start-agent"
+                    data-crt-nav-key="empty:new-agent"
+                    data-crt-nav-default="true"
+                    tabindex="-1"
+                    onclick="showInputDialog()"
+                >[N] New Agent</button>
             </div>
         </div>
 
@@ -1299,31 +1570,27 @@
 
                     <section class="billing-panel billing-daily-chart-panel" aria-label="Daily processed token history">
                         <div class="billing-panel-heading">
-                            <h3>DAILY PROCESSED TOKENS // 120 DAYS // LOG SCALE</h3>
+                            <h3>TOKEN ACTIVITY // 52 WEEKS</h3>
                             <span id="billing-peak-day">PEAK --</span>
                         </div>
                         <div class="billing-daily-legend" aria-hidden="true">
-                            <span><i class="is-cache"></i>CACHE</span>
-                            <span><i class="is-direct"></i>INPUT / OUTPUT / OTHER</span>
-                            <span><i class="is-billion"></i>1B+ DAY</span>
-                        </div>
-                        <div class="billing-axis-meta" aria-hidden="true">
-                            <span>Y: TOKENS / DAY [LOG10]</span>
-                            <span>X: LOCAL DATE</span>
+                            <span>RELATIVE</span>
+                            <span class="billing-heat-scale"><i data-level="0"></i><i data-level="1"></i><i data-level="2"></i><i data-level="3"></i><i data-level="4"></i><i data-level="5"></i></span>
+                            <span>HOT</span>
+                            <span>OVERRANGE</span>
+                            <span class="billing-overrange-scale"><i data-overrange="1"></i><em>1B</em><i data-overrange="2"></i><em>2B</em><i data-overrange="3"></i><em>4B</em><i data-overrange="4"></i><em>8B+</em></span>
                         </div>
-                        <div class="billing-daily-chart-frame">
-                            <div class="billing-y-axis" id="billing-y-axis" aria-hidden="true"></div>
+                        <div class="billing-calendar-frame">
+                            <div class="billing-calendar-weekdays" aria-hidden="true">
+                                <span>MON</span><span></span><span>WED</span><span></span><span>FRI</span><span></span><span>SUN</span>
+                            </div>
                             <div class="billing-daily-scroll" id="billing-daily-scroll">
-                                <div class="billing-daily-plot">
-                                    <div class="billing-log-guides" id="billing-log-guides" aria-hidden="true"></div>
-                                    <div class="billing-daily-bars" id="billing-daily-bars" role="grid" aria-label="Daily token totals for the last 120 days on a logarithmic scale"></div>
-                                </div>
-                                <div class="billing-daily-x-axis" id="billing-daily-x-axis" aria-hidden="true"></div>
+                                <div class="billing-calendar-months" id="billing-calendar-months" aria-hidden="true"></div>
+                                <div class="billing-calendar-grid" id="billing-calendar-grid" role="grid" aria-label="Daily token activity for the last 52 weeks"></div>
                             </div>
                         </div>
-                        <div class="billing-activity-row">
-                            <span>52W ACTIVITY</span>
-                            <div class="billing-activity-strip" id="billing-activity-strip" role="img" aria-label="52-week daily activity continuity"></div>
+                        <div class="billing-calendar-footer">
+                            <span>[ARROWS] SELECT DAY</span>
                             <span id="billing-daily-range">LOCAL TIME</span>
                         </div>
                     </section>
@@ -1334,7 +1601,13 @@
                             <span id="billing-day-state">LOCAL HISTORY</span>
                         </div>
                         <div class="billing-day-details">
-                            <div class="billing-day-total"><small>TOTAL</small><strong id="billing-day-total">--</strong><span><span class="billing-day-total-compact" id="billing-day-total-compact">--</span> TOKENS</span></div>
+                            <div class="billing-day-total" id="billing-day-total-meter">
+                                <small>TOTAL</small>
+                                <div class="billing-day-total-values">
+                                    <strong id="billing-day-total">--</strong>
+                                    <span class="billing-day-total-compact-wrap"><span class="billing-day-total-compact" id="billing-day-total-compact">--</span><em>TOKENS</em></span>
+                                </div>
+                            </div>
                             <div class="billing-day-breakdown"><small>INPUT</small><strong id="billing-day-input">--</strong></div>
                             <div class="billing-day-breakdown"><small>OUTPUT</small><strong id="billing-day-output">--</strong></div>
                             <div class="billing-day-breakdown"><small>CACHE READ</small><strong id="billing-day-cache-read">--</strong></div>
@@ -1368,9 +1641,11 @@
                                         <path id="billing-day-total-path" class="billing-day-curve-total"></path>
                                     </svg>
                                 </div>
-                                <div class="billing-day-curve-x-axis" aria-hidden="true">
-                                    <span>00</span><span>06</span><span>12</span><span>18</span><span>23</span>
+                                <div class="billing-day-hour-strip" id="billing-day-hour-strip" role="grid" aria-label="Selected day token usage by local hour"></div>
+                                <div class="billing-day-hour-axis" aria-hidden="true">
+                                    <span>00:00</span><span>03:00</span><span>06:00</span><span>09:00</span><span>12:00</span><span>15:00</span><span>18:00</span><span>21:00</span><span>24:00</span>
                                 </div>
+                                <div class="billing-day-hour-readout" id="billing-day-hour-readout">SELECT AN HOUR</div>
                                 <div class="billing-day-curve-footer">
                                     <span id="billing-day-insight-state">SELECTED DAY DETAIL</span>
                                     <span class="billing-day-curve-legend"><i class="is-total"></i>TOTAL <i class="is-cache"></i>CACHE</span>
@@ -1575,6 +1850,19 @@
                     aria-autocomplete="none"
                     data-form-type="other"
                 >
+                <div class="workspace-directory-prompt" id="workspace-directory-prompt" role="alertdialog" aria-labelledby="workspace-directory-prompt-title" aria-describedby="workspace-directory-prompt-description" hidden>
+                    <div class="workspace-directory-prompt-icon" id="workspace-directory-prompt-icon" aria-hidden="true">[+]</div>
+                    <div class="workspace-directory-prompt-copy">
+                        <h4 id="workspace-directory-prompt-title">Create this workspace?</h4>
+                        <p id="workspace-directory-prompt-description">This directory does not exist yet. Farming can create it and start the Agent there.</p>
+                        <code id="workspace-directory-prompt-path"></code>
+                    </div>
+                    <div class="workspace-directory-prompt-actions">
+                        <button id="workspace-directory-create" data-crt-nav-key="new-agent:workspace-create" onclick="createCrtWorkspaceAndStart()">Create &amp; Start [Enter]</button>
+                        <button class="secondary" id="workspace-directory-cancel" data-crt-nav-key="new-agent:workspace-cancel" onclick="hideWorkspaceDirectoryPrompt()">Back [Esc]</button>
+                        <button id="workspace-directory-error-back" data-crt-nav-key="new-agent:workspace-error-back" onclick="hideWorkspaceDirectoryPrompt()" hidden>Change Path [Enter]</button>
+                    </div>
+                </div>
                 <div class="workspace-history" id="workspace-history" style="display: none;">
                     <div class="workspace-history-header">
                         <span>recent workspaces</span>
@@ -1582,7 +1870,7 @@
                     </div>
                     <div class="workspace-history-list" id="workspace-history-list"></div>
                 </div>
-                <div style="margin-top: 10px;">
+                <div id="workspace-start-actions" style="margin-top: 10px;">
                     <button data-crt-nav-key="new-agent:start" onclick="confirmStartAgent()">Start [Enter]</button>
                     <button data-crt-nav-key="new-agent:back" onclick="backToAgentList()">Back [Esc]</button>
                 </div>
@@ -1698,6 +1986,8 @@
     </div>
 
     <script src="shared/runtime-paths.js"></script>
+    <script src="shared/reading-anchor.js"></script>
+    <script src="shared/terminal-replay.js"></script>
     <script src="../vendor/xterm/xterm.js"></script>
     <script src="../vendor/xterm/addon-fit.js"></script>
     <script src="../vendor/xterm/addon-webgl.js"></script>