{/* TICKER TAPE - ZONE 1 */}

{repeatedTicker}

SIGNAL CIRCLE™

{new Date().toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }).toUpperCase()}

{/* P&L HERO - ZONE 2 */} {/* MEMBER PANEL */} {showMembers && (

CIRCLE MEMBERS — {(memberList || []).length} ACTIVE

{(memberList || []).map((m, i) => { const mHandle = m?.handle; const mName = m?.displayName || m?.name || 'UNKNOWN'; const mAvatar = m?.avatarUrl || m?.profileImageUrl; return (

mHandle ? openProfile(mHandle) : null} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '6px 10px', background: 'rgba(255,179,0,0.04)', border: '1px solid rgba(255,179,0,0.1)', cursor: mHandle ? 'pointer' : 'default', transition: 'background 0.2s' }} onMouseEnter={(e) => { e.currentTarget.style.background = 'rgba(255,179,0,0.1)'; }} onMouseLeave={(e) => { e.currentTarget.style.background = 'rgba(255,179,0,0.04)'; }} > {mAvatar ? (

) : (

{(mName[0] || '?').toUpperCase()}

)}

{mName.toUpperCase()}

{mHandle &&

@{mHandle}

}

{m?.role === 'owner' ? '👑 MD' : '📊 VP'}

); })}

)}

YOUR INFLUENCE INDEX

{formatPnl(pnlDisplay)}

▲ +{Math.floor(Math.random() * 12 + 3)}.{Math.floor(Math.random() * 99)}% TODAY

" {currentPrompt} "

{/* INPUT ZONE */}

setState(prev => ({ ...prev, newText: e.target.value }))}
          placeholder="TRANSMIT YOUR SIGNAL..."
          style={{
            flex: 1, background: 'rgba(255,179,0,0.06)', border: '1px solid rgba(255,179,0,0.3)',
            color: '#FFB300', fontFamily: "'Courier New', monospace", fontSize: 14,
            padding: '10px 12px', resize: 'none', height: 50, borderRadius: 0,
            outline: 'none', letterSpacing: 1
          }}
        />
        <button
          onClick={state?.selectedThought ? () => branchThought(state.selectedThought) : addThought}
          style={{
            background: state?.selectedThought ? '#8B0000' : 'linear-gradient(180deg, #FFB300, #D4A017)',
            border: 'none', color: state?.selectedThought ? '#FFB300' : '#0d0d0d',
            fontFamily: "'Courier New', monospace", fontWeight: 'bold',
            fontSize: 12, padding: '10px 16px', cursor: 'pointer',
            letterSpacing: 2, minWidth: 80, textTransform: 'uppercase',
            transition: 'all 0.2s', boxShadow: '0 0 15px rgba(255,179,0,0.3)'
          }}
          onMouseDown={(e) => { e.currentTarget.style.transform = 'scale(0.95)'; }}
          onMouseUp={(e) => { e.currentTarget.style.transform = 'scale(1)'; }}
          onTouchStart={(e) => { e.currentTarget.style.transform = 'scale(0.95)'; }}
          onTouchEnd={(e) => { e.currentTarget.style.transform = 'scale(1)'; }}
        >
          {state?.selectedThought ? '⚡ BRANCH' : '📡 SIGNAL'}
        </button>
      </div>

{/* STRATEGY MAP - ZONE 3 */}
      <div style={{
        flex: 1, padding: '0 16px', paddingBottom: 'env(safe-area-inset-bottom, 20px)',
        overflow: 'auto'
      }}>
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          borderTop: '2px solid #FFB300', borderBottom: '1px solid rgba(255,179,0,0.2)',
          padding: '8px 0', marginBottom: 12
        }}>
          <span style={{ fontSize: 11, letterSpacing: 4, color: '#8B6914' }}>EXECUTIVE STRATEGY MAP</span>
          <span style={{ fontSize: 11, color: '#8B6914' }}>{(displayThoughts || []).length} ACTIVE POSITIONS</span>
        </div>

<div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {(displayThoughts || []).map((thought, idx) => {
            if (!thought) return null;
            const isSelected = state?.selectedThought === thought.id;
            const branches = thought?.branches ?? [];
            const delay = idx * 150;
            return (
              <div key={thought.id ?? idx} style={{
                opacity: mounted ? 1 : 0,
                transform: mounted ? 'translateX(0)' : 'translateX(-40px)',
                transition: 'all 0.6s cubic-bezier(0.4, 0, 0.2, 1) ' + delay + 'ms'
              }}>
                <div
                  onClick={() => selectThought(thought.id)}
                  style={{
                    background: isSelected
                      ? 'linear-gradient(135deg, rgba(139,0,0,0.3), rgba(255,179,0,0.1))'
                      : 'rgba(255,179,0,0.04)',
                    border: isSelected ? '1px solid #FFB300' : '1px solid rgba(255,179,0,0.15)',
                    padding: '14px 16px', cursor: 'pointer',
                    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
                    position: 'relative', overflow: 'hidden',
                    boxShadow: isSelected ? '0 0 20px rgba(255,179,0,0.2), inset 0 0 30px rgba(255,179,0,0.05)' : 'none'
                  }}
                >
                  {isSelected && (
                    <div style={{
                      position: 'absolute', top: 0, left: 0, width: 3, height: '100%',
                      background: '#FFB300', boxShadow: '0 0 10px #FFB300'
                    }} />
                  )}
                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
                    <span
                      onClick={(e) => { e.stopPropagation(); const h = thought?._user?.handle; if (h) openProfile(h); }}
                      style={{
                        fontSize: 11, color: '#8B6914', letterSpacing: 2,
                        fontWeight: 'bold', cursor: thought?._user?.handle ? 'pointer' : 'default',
                        textDecoration: thought?._user?.handle ? 'underline' : 'none',
                        textDecorationColor: 'rgba(255,179,0,0.3)', textUnderlineOffset: 2
                      }}
                    >
                      {thought?.isDemo ? '📋' : '⚡'} {(thought?._user?.displayName || thought?.author || 'UNKNOWN').toUpperCase()}
                    </span>
                    <span style={{ fontSize: 10, color: 'rgba(255,179,0,0.4)' }}>
                      {thought?.ts ? new Date(thought.ts).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }) : ''}
                    </span>
                  </div>
                  <div style={{
                    fontSize: 14, color: '#FFB300', lineHeight: 1.5,
                    fontFamily: "'Courier New', monospace", letterSpacing: 0.5,
                    textShadow: isSelected ? '0 0 8px rgba(255,179,0,0.4)' : 'none'
                  }}>
                    {thought?.text ?? ''}
                  </div>
                  {(branches || []).length > 0 && (
                    <div style={{ marginTop: 10, paddingLeft: 12, borderLeft: '2px solid rgba(255,179,0,0.2)' }}>
                      {(branches || []).map((br, bIdx) => {
                        if (!br) return null;
                        return (
                          <div key={br?.id ?? bIdx} style={{
                            fontSize: 12, color: '#D4A017', padding: '6px 0',
                            borderBottom: bIdx < (branches || []).length - 1 ? '1px solid rgba(255,179,0,0.1)' : 'none'
                          }}>
                            <span
                              onClick={(e) => { e.stopPropagation(); const bh = br?._user?.handle; if (bh) openProfile(bh); }}
                              style={{ color: '#8B6914', fontSize: 10, marginRight: 6, cursor: br?._user?.handle ? 'pointer' : 'default', textDecoration: br?._user?.handle ? 'underline' : 'none', textDecorationColor: 'rgba(255,179,0,0.3)', textUnderlineOffset: 2 }}
                            >↳ {(br?._user?.displayName || br?.author || 'ANON').toUpperCase()}</span>
                            {br?.text ?? ''}
                          </div>
                        );
                      })}
                    </div>
                  )}
                  {isSelected && (
                    <div style={{
                      marginTop: 10, paddingTop: 8,
                      borderTop: '1px dashed rgba(255,179,0,0.2)',
                      fontSize: 11, color: '#8B6914', letterSpacing: 1
                    }}>
                      ⚡ SELECTED — Type above and tap BRANCH to add contrarian analysis
                    </div>
                  )}
                </div>
              </div>
            );
          })}
        </div>

{(displayThoughts || []).length === 0 && (
          <div style={{
            textAlign: 'center', padding: 40, color: '#8B6914',
            fontSize: 14, letterSpacing: 2
          }}>
            NO POSITIONS OPEN — TRANSMIT YOUR FIRST SIGNAL
          </div>
        )}

<div style={{
          marginTop: 20, padding: '12px 0', borderTop: '1px solid rgba(255,179,0,0.15)',
          textAlign: 'center', fontSize: 10, color: 'rgba(255,179,0,0.25)',
          letterSpacing: 3, paddingBottom: 20
        }}>
          SIGNAL CIRCLE™ — CONFIDENTIAL — USYD M&A DIVISION — {new Date().getFullYear()}
        </div>
      </div>
    </div>
  );
}</article></body></html>