Linux/index.html at master · Arcus-Filen/Linux · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="A fast, offline-first Linux, Ceph, Redis and TiDB command reference and incident response workbench.">
  <meta name="theme-color" content="#10120f">
  <meta property="og:type" content="website">
  <meta property="og:title" content="OpsDeck — Linux & Cluster Field Guide">
  <meta property="og:description" content="Copy-ready commands and evidence-first incident runbooks for Ubuntu, Ceph, Redis and TiDB.">
  <meta property="og:image" content="./og.png">
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="OpsDeck — Linux & Cluster Field Guide">
  <meta name="twitter:description" content="Copy-ready commands and evidence-first incident runbooks for Ubuntu, Ceph, Redis and TiDB.">
  <meta name="twitter:image" content="./og.png">
  <title>OpsDeck — Linux & Cluster Command Workbench</title>
  <link rel="stylesheet" href="opsdeck.css">
</head>
<body>
  <a class="skip-link" href="#workspace">Skip to workspace</a>

  <header class="site-header">
    <a class="brand" href="#" aria-label="OpsDeck home">
      <span class="brand-mark" aria-hidden="true">OD</span>
      <span>
        <strong>OpsDeck</strong>
        <small>Linux & cluster field guide</small>
      </span>
    </a>
    <nav aria-label="Primary navigation">
      <button class="nav-button active" type="button" data-mode="commands">Command deck</button>
      <button class="nav-button" type="button" data-mode="incident">
        Incident mode
        <span class="pulse" aria-hidden="true"></span>
      </button>
    </nav>
    <div class="header-meta">
      <span class="status-dot" aria-hidden="true"></span>
      Offline ready
    </div>
  </header>

  <main id="workspace">
    <section class="hero">
      <div class="hero-copy">
        <p class="kicker">Ubuntu Server 24.04+ · Ceph · Redis · TiDB</p>
        <h1>Find the command.<br><span>Understand the impact.</span></h1>
        <p class="hero-text">A compact operations console for routine work and high-pressure incidents. Search by command, goal, symptom, or component—everything runs locally in your browser.</p>
      </div>
      <div class="hero-status" aria-label="Library summary">
        <div>
          <strong id="command-count">0</strong>
          <span>curated commands</span>
        </div>
        <div>
          <strong id="runbook-count">0</strong>
          <span>incident runbooks</span>
        </div>
        <div>
          <strong>0</strong>
          <span>external requests</span>
        </div>
      </div>
    </section>

    <section class="command-mode mode-panel" id="commands-panel" aria-labelledby="commands-title">
      <div class="search-shell">
        <label class="search-label" for="command-search">
          <span class="prompt-mark" aria-hidden="true">$</span>
          <span class="sr-only" id="commands-title">Search the command library</span>
          <input id="command-search" type="search" autocomplete="off" spellcheck="false" placeholder="Try “ceph degraded”, “open ports”, or “redis memory”…">
          <kbd>/</kbd>
        </label>
        <div class="quick-searches" aria-label="Popular searches">
          <span>Quick:</span>
          <button type="button" data-query="ceph health">ceph health</button>
          <button type="button" data-query="systemd logs">systemd logs</button>
          <button type="button" data-query="disk usage">disk usage</button>
          <button type="button" data-query="redis latency">redis latency</button>
        </div>
      </div>

      <div class="deck-layout">
        <aside class="filters" aria-label="Command filters">
          <div class="filter-heading">
            <span>Stack</span>
            <button id="clear-filters" type="button">Reset</button>
          </div>
          <div id="category-filters" class="category-filters"></div>

          <div class="filter-block">
            <label for="risk-filter">Command impact</label>
            <select id="risk-filter">
              <option value="all">All impact levels</option>
              <option value="read">Read-only</option>
              <option value="change">Changes state</option>
              <option value="danger">High risk</option>
            </select>
          </div>

          <label class="toggle-row">
            <input id="favorites-filter" type="checkbox">
            <span class="toggle"></span>
            Favorites only
          </label>

          <div class="field-note">
            <span class="note-icon" aria-hidden="true">!</span>
            <p><strong>Field rule</strong>Inspect first. Confirm host, cluster, namespace, and placeholders before any state-changing command.</p>
          </div>
        </aside>

        <div class="results-area">
          <div class="results-toolbar">
            <p id="results-summary" aria-live="polite"></p>
            <label>
              Sort
              <select id="sort-select">
                <option value="relevance">Relevance</option>
                <option value="category">Category</option>
                <option value="impact">Impact</option>
              </select>
            </label>
          </div>
          <div id="command-results" class="command-grid"></div>
          <div id="empty-results" class="empty-state" hidden>
            <span class="empty-glyph" aria-hidden="true">⌁</span>
            <h2>No exact match</h2>
            <p>Try a broader operational goal such as “network”, “health”, “logs”, or “latency”.</p>
            <button class="secondary-button" id="show-all" type="button">Show all commands</button>
          </div>
        </div>
      </div>
    </section>

    <section class="incident-mode mode-panel" id="incident-panel" aria-labelledby="incident-title" hidden>
      <div class="incident-intro">
        <div>
          <p class="kicker">Local decision support · no AI connection required</p>
          <h2 id="incident-title">Describe what is failing.</h2>
          <p>OpsDeck matches symptoms against transparent rules, explains likely causes, and assembles a staged response plan. Your text never leaves this page.</p>
        </div>
        <div class="local-badge"><span aria-hidden="true">◆</span> Runs entirely in your browser</div>
      </div>

      <div class="incident-input-card">
        <label for="incident-input">Symptoms, alerts, or observed behavior</label>
        <textarea id="incident-input" rows="4" placeholder="Example: Ceph reports HEALTH_WARN, two OSDs are down and PGs are degraded after a host reboot."></textarea>
        <div class="incident-input-footer">
          <div class="sample-incidents" aria-label="Example incidents">
            <span>Examples:</span>
            <button type="button" data-incident="Ceph HEALTH_ERR, OSDs are down and PGs are degraded">Ceph degraded</button>
            <button type="button" data-incident="Redis latency is high and memory usage keeps growing">Redis latency</button>
            <button type="button" data-incident="TiDB is unavailable and one TiKV node is down">TiKV down</button>
            <button type="button" data-incident="Ubuntu server disk is full and a service keeps restarting">Disk full</button>
          </div>
          <button class="primary-button" id="analyze-incident" type="button">
            Build response plan
            <span aria-hidden="true">→</span>
          </button>
        </div>
      </div>

      <div id="incident-output" class="incident-output" hidden aria-live="polite"></div>
    </section>
  </main>

  <footer>
    <div>
      <strong>OpsDeck</strong>
      <span>Evidence first. Changes second.</span>
    </div>
    <div class="creator-credit" aria-label="Created by ARCUS">
      <span>Built by</span>
      <strong>ARCUS</strong>
    </div>
    <div class="footer-links">
      <a href="https://documentation.ubuntu.com/server/" target="_blank" rel="noreferrer">Ubuntu docs</a>
      <a href="https://docs.ceph.com/en/latest/" target="_blank" rel="noreferrer">Ceph docs</a>
      <a href="https://redis.io/docs/latest/" target="_blank" rel="noreferrer">Redis docs</a>
      <a href="https://docs.pingcap.com/tidb/stable/" target="_blank" rel="noreferrer">TiDB docs</a>
    </div>
  </footer>

  <div class="toast" id="toast" role="status" aria-live="polite"></div>

  <template id="command-card-template">
    <article class="command-card">
      <div class="card-topline">
        <span class="category-badge"></span>
        <div>
          <span class="impact-badge"></span>
          <button class="favorite-button" type="button" aria-label="Add to favorites" title="Favorite">☆</button>
        </div>
      </div>
      <h2></h2>
      <p class="command-description"></p>
      <div class="code-block">
        <code></code>
        <button class="copy-button" type="button">Copy</button>
      </div>
      <div class="command-meta"></div>
    </article>
  </template>

  <script src="opsdeck-data.js"></script>
  <script src="opsdeck-app.js"></script>
</body>
</html>