farming-code 2.2.6

package/frontend/skins/crt/styles/effects.css

@@ -0,0 +1,171 @@
+#farming-crt:not(.no-crt) {
+    background-color: #000d06;
+}
+
+#farming-crt:not(.no-crt) .top-bar,
+#farming-crt:not(.no-crt) .sidebar {
+    background-color: rgba(0, 0, 0, 0.28);
+}
+
+#farming-crt:not(.no-crt) .agent-block {
+    background-color: rgba(0, 0, 0, 0.18);
+}
+
+#farming-crt:not(.no-crt) .agent-block:hover {
+    background-color: rgba(15, 187, 107, 0.12);
+}
+
+#farming-crt:not(.no-crt) .terminal {
+    background: #000d06;
+}
+
+#farming-crt:not(.no-crt)::before {
+    content: "";
+    position: fixed;
+    inset: 0;
+    background: repeating-linear-gradient(
+        to bottom,
+        rgba(0, 0, 0, 0.11) 0,
+        rgba(0, 0, 0, 0.11) 0.7px,
+        rgba(12, 204, 104, 0.012) 1.45px,
+        rgba(12, 204, 104, 0.006) 2.15px,
+        rgba(0, 0, 0, 0.07) 3px
+    );
+    background-size: 100% 3px;
+    pointer-events: none;
+    z-index: 10101;
+}
+
+#farming-crt .crt-phosphor-noise {
+    position: fixed;
+    inset: -32px;
+    pointer-events: none;
+    z-index: 10100;
+    opacity: 1;
+    contain: strict;
+}
+
+#farming-crt .crt-phosphor-noise::before,
+#farming-crt .crt-phosphor-noise::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+}
+
+#farming-crt .crt-phosphor-noise::before {
+    opacity: 0.022;
+    background: url("../assets/effects/phosphor-noise.svg") 0 0 / 256px 256px repeat;
+}
+
+#farming-crt .crt-phosphor-noise::after {
+    background: rgba(12, 204, 104, 0.004);
+}
+
+#farming-crt .crt-scan-beam {
+    position: fixed;
+    inset: 0 0 auto;
+    width: 100%;
+    height: 300px;
+    pointer-events: none;
+    /* Keep the moving phosphor lift below the fixed raster mask so it reads
+       as part of the tube surface instead of a luminous UI overlay. */
+    z-index: 10100;
+    opacity: 1;
+    transform: translate3d(0, -100%, 0);
+    will-change: transform;
+    background: linear-gradient(
+        to bottom,
+        rgba(12, 204, 104, 0) 0%,
+        rgba(12, 204, 104, 0.004) 20%,
+        rgba(12, 204, 104, 0.02) 50%,
+        rgba(12, 204, 104, 0.036) 80%,
+        rgba(12, 204, 104, 0.04) 100%
+    );
+    animation: crt-scan-beam-cycle 6.8s linear infinite;
+}
+
+#farming-crt.no-crt .crt-phosphor-noise,
+#farming-crt.no-crt .crt-scan-beam,
+#farming-crt.no-crt .agent-output-afterimage {
+    display: none;
+}
+
+#farming-crt.page-hidden .crt-scan-beam {
+    animation-play-state: paused;
+}
+
+@keyframes crt-scan-beam-cycle {
+    from {
+        transform: translate3d(0, -100%, 0);
+    }
+    to {
+        transform: translate3d(0, calc(100vh - 100%), 0);
+    }
+}
+
+#farming-crt .agent-output-afterimage {
+    pointer-events: none;
+    user-select: none;
+    opacity: 0.34;
+    filter: blur(0.35px);
+    mix-blend-mode: screen;
+    animation: crt-content-afterimage 620ms cubic-bezier(0.16, 0.72, 0.28, 1) forwards;
+}
+
+#farming-crt .xterm-screen {
+    position: relative;
+}
+
+#farming-crt .crt-webgl-error {
+    position: absolute;
+    inset: 18px;
+    z-index: 20;
+    display: grid;
+    place-content: center;
+    gap: 10px;
+    padding: 24px;
+    border: 1px solid #ff4d4d;
+    background: rgba(5, 5, 5, 0.94);
+    color: #ff6b6b;
+    text-align: center;
+    pointer-events: none;
+}
+
+#farming-crt .crt-webgl-error strong,
+#farming-crt .crt-webgl-error span,
+#farming-crt .crt-webgl-error small {
+    display: block;
+}
+
+#farming-crt .crt-webgl-error small {
+    color: #b98282;
+}
+
+#farming-crt .agent-output-afterimage {
+    position: absolute;
+    inset: 0;
+    z-index: 2;
+}
+
+@keyframes crt-content-afterimage {
+    0% {
+        opacity: 0.34;
+        filter: blur(0.25px) brightness(1.08);
+    }
+    45% {
+        opacity: 0.13;
+        filter: blur(0.65px) brightness(0.94);
+    }
+    100% {
+        opacity: 0;
+        filter: blur(1.2px) brightness(0.72);
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    #farming-crt .crt-scan-beam,
+    #farming-crt .agent-output-afterimage {
+        display: none;
+    }
+}

package/frontend/skins/crt/styles/history.css

@@ -0,0 +1,215 @@
+#farming-crt .history-area {
+    flex: 1;
+    min-width: 0;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    background: rgba(0, 10, 5, 0.48);
+}
+
+#farming-crt .history-area.hidden {
+    display: none;
+}
+
+#farming-crt .history-header {
+    flex: 0 0 auto;
+    padding: 0 0 12px;
+    border-bottom: 1px solid var(--crt-border);
+}
+
+#farming-crt .history-header h2 {
+    color: var(--crt-phosphor-bright);
+    font-family: var(--crt-font);
+    font-size: 24px;
+    font-weight: 400;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+}
+
+#farming-crt .history-list {
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+}
+
+#farming-crt .history-row {
+    position: relative;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: 18px;
+    align-items: center;
+    min-height: 68px;
+    padding: 10px 12px;
+    border-bottom: 1px solid rgba(12, 204, 104, 0.32);
+    cursor: pointer;
+    outline: none;
+}
+
+#farming-crt .history-row:hover,
+#farming-crt .history-row.crt-nav-selected {
+    background: rgba(12, 204, 104, 0.09);
+}
+
+#farming-crt .history-row.crt-nav-selected .history-title {
+    color: #001409;
+    background: var(--crt-phosphor-bright);
+    text-shadow: none;
+}
+
+#farming-crt .history-row.crt-nav-selected {
+    box-shadow:
+        inset 3px 0 var(--crt-phosphor-bright),
+        inset 0 0 12px rgba(12, 204, 104, 0.07);
+}
+
+#farming-crt .history-row.is-pending {
+    opacity: 0.62;
+    pointer-events: none;
+}
+
+#farming-crt .history-copy {
+    min-width: 0;
+}
+
+#farming-crt .history-title {
+    width: max-content;
+    max-width: 100%;
+    overflow: hidden;
+    color: var(--crt-phosphor-bright);
+    font-family: var(--crt-terminal-font);
+    font-size: 15px;
+    line-height: 1.35;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+#farming-crt .history-meta {
+    overflow: hidden;
+    margin-top: 5px;
+    color: var(--crt-phosphor-muted);
+    font-family: var(--crt-terminal-font);
+    font-size: 12px;
+    line-height: 1.35;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+#farming-crt .history-actions {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    white-space: nowrap;
+}
+
+#farming-crt .history-age {
+    color: var(--crt-phosphor-muted);
+    font-size: 12px;
+}
+
+#farming-crt .history-action {
+    min-width: 74px;
+    padding: 6px 9px;
+    border: 1px solid var(--crt-border);
+    color: var(--crt-phosphor);
+    background: transparent;
+    box-shadow: 0 0 5px rgba(12, 204, 104, 0.13);
+    font-family: var(--crt-font);
+    font-size: 11px;
+    text-transform: uppercase;
+}
+
+#farming-crt .history-action-label {
+    min-width: 74px;
+    padding: 6px 9px;
+    color: var(--crt-phosphor);
+    border: 1px solid var(--crt-border);
+    font-family: var(--crt-font);
+    font-size: 11px;
+    text-align: center;
+    text-transform: uppercase;
+}
+
+#farming-crt .history-action:hover,
+#farming-crt .history-action.crt-nav-selected {
+    border-color: var(--crt-phosphor-bright);
+    color: #001409;
+    background: var(--crt-phosphor-bright);
+    text-shadow: none;
+}
+
+#farming-crt .history-empty,
+#farming-crt .history-error,
+#farming-crt .history-loading {
+    padding: 26px 12px;
+    color: var(--crt-phosphor-muted);
+    font-family: var(--crt-terminal-font);
+    font-size: 13px;
+}
+
+#farming-crt .history-error {
+    color: #ef6f6f;
+}
+
+#farming-crt .history-footer {
+    flex: 0 0 auto;
+    padding: 10px 12px 0;
+    border-top: 1px solid var(--crt-border);
+    color: var(--crt-phosphor-muted);
+    font-family: var(--crt-font);
+    font-size: 11px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+}
+
+#farming-crt .history-pagination {
+    display: flex;
+    align-items: center;
+    gap: 9px;
+    white-space: nowrap;
+}
+
+#farming-crt .history-pagination button {
+    padding: 3px 6px;
+    border: 1px solid var(--crt-border);
+    color: var(--crt-phosphor);
+    background: transparent;
+    font-size: 10px;
+}
+
+#farming-crt .history-pagination button:disabled {
+    color: var(--crt-phosphor-muted);
+    border-color: rgba(12, 204, 104, 0.24);
+    box-shadow: none;
+}
+
+#farming-crt #history-sidebar-item.active {
+    color: #001409;
+    background: var(--crt-phosphor-bright);
+    text-shadow: none;
+}
+
+#farming-crt #history-sidebar-item.active .key {
+    color: #001409;
+}
+
+@media (max-width: 820px) {
+    #farming-crt .history-area {
+        padding: 12px;
+    }
+
+    #farming-crt .history-row {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 7px;
+    }
+
+    #farming-crt .history-actions {
+        justify-content: space-between;
+    }
+
+    #farming-crt .history-footer {
+        display: none;
+    }
+}