npm - cli-jaw - Versions diffs - 0.1.0 - Mend

cli-jaw 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (845) hide show

package/public/theme-test.html ADDED Viewed

@@ -0,0 +1,545 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>cli-jaw Theme Test v2</title>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;600;700&family=Outfit:wght@300;400;500;600;700&display=swap"
+        rel="stylesheet">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Outfit', -apple-system, system-ui, sans-serif;
+            background: #050508;
+            color: #e4e4ef;
+            min-height: 100vh;
+            padding: 24px;
+        }
+        h1 {
+            text-align: center;
+            font-family: 'Chakra Petch', system-ui;
+            font-size: 24px;
+            margin-bottom: 6px;
+            color: #fff;
+            letter-spacing: 2px;
+        }
+        .subtitle {
+            text-align: center;
+            color: #6e6e8a;
+            font-size: 13px;
+            margin-bottom: 32px;
+        }
+        .grid {
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            gap: 16px;
+            max-width: 1500px;
+            margin: 0 auto;
+        }
+        .theme-card {
+            border-radius: 14px;
+            overflow: hidden;
+            border: 1px solid #1e1e2e;
+            background: #0a0a0f;
+            transition: border-color 0.3s, box-shadow 0.3s;
+        }
+        .theme-card:hover {
+            box-shadow: 0 0 30px var(--card-glow);
+            border-color: color-mix(in srgb, var(--accent) 40%, #1e1e2e);
+        }
+        .card-header {
+            padding: 14px 16px;
+            background: #12121a;
+            border-bottom: 1px solid #1e1e2e;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .card-header h2 {
+            font-family: 'Chakra Petch', system-ui;
+            font-size: 15px;
+            color: var(--accent);
+        }
+        .card-header .desc {
+            font-size: 10px;
+            color: #6e6e8a;
+            padding: 3px 8px;
+            border: 1px solid #1e1e2e;
+            border-radius: 8px;
+        }
+        .card-body {
+            padding: 16px;
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+        }
+        .swatches {
+            display: flex;
+            gap: 6px;
+        }
+        .swatch {
+            flex: 1;
+            height: 36px;
+            border-radius: 8px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 9px;
+            font-family: 'SF Mono', monospace;
+            font-weight: 600;
+        }
+        /* Mock sidebar */
+        .mock-sidebar {
+            background: #12121a;
+            border-radius: 10px;
+            padding: 12px;
+            border: 1px solid #1e1e2e;
+        }
+        .mock-logo {
+            font-family: 'Chakra Petch', system-ui;
+            font-size: 18px;
+            font-weight: 700;
+            color: var(--accent);
+            margin-bottom: 10px;
+            letter-spacing: 1.5px;
+            text-shadow: 0 0 24px var(--card-glow);
+        }
+        .mock-tabs {
+            display: flex;
+            border-bottom: 1px solid #1e1e2e;
+            margin-bottom: 8px;
+        }
+        .mock-tab {
+            flex: 1;
+            padding: 6px 4px;
+            font-size: 9px;
+            text-transform: uppercase;
+            letter-spacing: 0.6px;
+            color: #6e6e8a;
+            text-align: center;
+            border-bottom: 2px solid transparent;
+            font-family: 'Chakra Petch', system-ui;
+        }
+        .mock-tab.active {
+            color: var(--accent);
+            border-bottom-color: var(--accent);
+        }
+        .mock-btns {
+            display: flex;
+            gap: 4px;
+        }
+        .mock-btn {
+            flex: 1;
+            padding: 5px 6px;
+            border: 1px solid #1e1e2e;
+            border-radius: 5px;
+            background: none;
+            color: #6e6e8a;
+            font-size: 9px;
+            text-align: center;
+            font-family: inherit;
+        }
+        .mock-btn.active {
+            border-color: var(--accent);
+            color: var(--accent);
+            background: color-mix(in srgb, var(--accent) 8%, #0a0a0f);
+        }
+        /* Chat area */
+        .mock-messages {
+            display: flex;
+            flex-direction: column;
+            gap: 6px;
+        }
+        .mock-msg {
+            padding: 6px 10px;
+            border-radius: 8px;
+            font-size: 10px;
+            line-height: 1.4;
+            max-width: 85%;
+        }
+        .mock-msg.user {
+            background: #1a1a2e;
+            align-self: flex-end;
+            border: 1px solid #1e1e2e;
+        }
+        .mock-msg.agent {
+            background: #0f0f1a;
+            align-self: flex-start;
+            border-left: 2px solid var(--accent);
+        }
+        .mock-input-area {
+            display: flex;
+            gap: 6px;
+            align-items: center;
+        }
+        .mock-input {
+            flex: 1;
+            padding: 6px 10px;
+            background: #12121a;
+            border: 1px solid #1e1e2e;
+            border-radius: 6px;
+            color: #e4e4ef;
+            font-size: 10px;
+            font-family: inherit;
+        }
+        .mock-send {
+            padding: 6px 14px;
+            border: none;
+            border-radius: 6px;
+            background: var(--accent);
+            color: #000;
+            font-weight: 600;
+            font-size: 10px;
+            font-family: inherit;
+        }
+        .mock-focus {
+            padding: 5px 10px;
+            background: #12121a;
+            border: 1px solid #1e1e2e;
+            border-radius: 5px;
+            color: #e4e4ef;
+            font-size: 10px;
+            outline: 2px solid var(--accent);
+            outline-offset: 2px;
+            font-family: inherit;
+            width: 100%;
+        }
+        /* Gradient bar */
+        .gradient-bar {
+            height: 4px;
+            border-radius: 2px;
+            background: linear-gradient(90deg, var(--accent), var(--accent2));
+        }
+        /* ===== REFINED TEAL-CYAN THEMES ===== */
+        /* D: 미드나잇 틸 — 딥, 세련, 차갑지만 고급 */
+        .theme-d {
+            --accent: #2dd4bf;
+            --accent2: #5eead4;
+            --card-glow: rgba(45, 212, 191, 0.12);
+        }
+        /* E: 아크틱 시안 — 차가운 디지털, 미니멀 프리미엄 */
+        .theme-e {
+            --accent: #22d3ee;
+            --accent2: #06b6d4;
+            --card-glow: rgba(34, 211, 238, 0.12);
+        }
+        /* F: 일렉트릭 민트 — 생기, 현대적, 터미널 느낌 */
+        .theme-f {
+            --accent: #34d399;
+            --accent2: #6ee7b7;
+            --card-glow: rgba(52, 211, 153, 0.12);
+        }
+        /* G: 스틸 시안 — 차분, 무게감, 엔터프라이즈 느낌 */
+        .theme-g {
+            --accent: #67e8f9;
+            --accent2: #a5f3fc;
+            --card-glow: rgba(103, 232, 249, 0.10);
+        }
+        /* Before comparison */
+        .theme-current {
+            --accent: #ff6b6b;
+            --accent2: #ffa07a;
+            --card-glow: rgba(255, 107, 107, 0.12);
+        }
+        /* Bottom section */
+        .before-after {
+            margin-top: 32px;
+            max-width: 1500px;
+            margin-left: auto;
+            margin-right: auto;
+        }
+        .before-after h2 {
+            text-align: center;
+            font-family: 'Chakra Petch', system-ui;
+            font-size: 18px;
+            margin-bottom: 16px;
+            color: #fff;
+        }
+        .ba-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 16px;
+        }
+        /* Color names */
+        .color-names {
+            display: flex;
+            justify-content: space-between;
+            font-size: 9px;
+            color: #6e6e8a;
+            padding: 0 4px;
+        }
+    </style>
+</head>
+<body>
+    <h1>cli-jaw</h1>
+    <p class="subtitle">Refined teal-cyan palettes — no emoji, premium feel</p>
+    <div class="grid">
+        <!-- D: 미드나잇 틸 -->
+        <div class="theme-card theme-d">
+            <div class="card-header">
+                <h2>D. Midnight Teal</h2>
+                <span class="desc">딥 + 고급</span>
+            </div>
+            <div class="card-body">
+                <div class="swatches">
+                    <div class="swatch" style="background:#2dd4bf;color:#000">#2dd4bf</div>
+                    <div class="swatch" style="background:#5eead4;color:#000">#5eead4</div>
+                </div>
+                <div class="color-names"><span>accent</span><span>accent2</span></div>
+                <div class="gradient-bar"></div>
+                <div class="mock-sidebar">
+                    <div class="mock-logo">cli-jaw</div>
+                    <div class="mock-tabs">
+                        <div class="mock-tab active">Settings</div>
+                        <div class="mock-tab">Skills</div>
+                        <div class="mock-tab">MCP</div>
+                    </div>
+                    <div class="mock-btns">
+                        <div class="mock-btn active">Full</div>
+                        <div class="mock-btn">Edit</div>
+                        <div class="mock-btn">Read</div>
+                    </div>
+                </div>
+                <div class="mock-messages">
+                    <div class="mock-msg user">리팩토링 해줘</div>
+                    <div class="mock-msg agent">pipeline.ts 분석 완료</div>
+                </div>
+                <div class="mock-input-area">
+                    <input class="mock-input" placeholder="메시지..." readonly>
+                    <button class="mock-send">전송</button>
+                </div>
+                <input class="mock-focus" value="Focus ring" readonly>
+            </div>
+        </div>
+        <!-- E: 아크틱 시안 -->
+        <div class="theme-card theme-e">
+            <div class="card-header">
+                <h2>E. Arctic Cyan</h2>
+                <span class="desc">차가운 디지털</span>
+            </div>
+            <div class="card-body">
+                <div class="swatches">
+                    <div class="swatch" style="background:#22d3ee;color:#000">#22d3ee</div>
+                    <div class="swatch" style="background:#06b6d4;color:#000">#06b6d4</div>
+                </div>
+                <div class="color-names"><span>accent</span><span>accent2</span></div>
+                <div class="gradient-bar"></div>
+                <div class="mock-sidebar">
+                    <div class="mock-logo">cli-jaw</div>
+                    <div class="mock-tabs">
+                        <div class="mock-tab active">Settings</div>
+                        <div class="mock-tab">Skills</div>
+                        <div class="mock-tab">MCP</div>
+                    </div>
+                    <div class="mock-btns">
+                        <div class="mock-btn active">Full</div>
+                        <div class="mock-btn">Edit</div>
+                        <div class="mock-btn">Read</div>
+                    </div>
+                </div>
+                <div class="mock-messages">
+                    <div class="mock-msg user">리팩토링 해줘</div>
+                    <div class="mock-msg agent">pipeline.ts 분석 완료</div>
+                </div>
+                <div class="mock-input-area">
+                    <input class="mock-input" placeholder="메시지..." readonly>
+                    <button class="mock-send">전송</button>
+                </div>
+                <input class="mock-focus" value="Focus ring" readonly>
+            </div>
+        </div>
+        <!-- F: 일렉트릭 민트 -->
+        <div class="theme-card theme-f">
+            <div class="card-header">
+                <h2>F. Electric Mint</h2>
+                <span class="desc">터미널 생기</span>
+            </div>
+            <div class="card-body">
+                <div class="swatches">
+                    <div class="swatch" style="background:#34d399;color:#000">#34d399</div>
+                    <div class="swatch" style="background:#6ee7b7;color:#000">#6ee7b7</div>
+                </div>
+                <div class="color-names"><span>accent</span><span>accent2</span></div>
+                <div class="gradient-bar"></div>
+                <div class="mock-sidebar">
+                    <div class="mock-logo">cli-jaw</div>
+                    <div class="mock-tabs">
+                        <div class="mock-tab active">Settings</div>
+                        <div class="mock-tab">Skills</div>
+                        <div class="mock-tab">MCP</div>
+                    </div>
+                    <div class="mock-btns">
+                        <div class="mock-btn active">Full</div>
+                        <div class="mock-btn">Edit</div>
+                        <div class="mock-btn">Read</div>
+                    </div>
+                </div>
+                <div class="mock-messages">
+                    <div class="mock-msg user">리팩토링 해줘</div>
+                    <div class="mock-msg agent">pipeline.ts 분석 완료</div>
+                </div>
+                <div class="mock-input-area">
+                    <input class="mock-input" placeholder="메시지..." readonly>
+                    <button class="mock-send">전송</button>
+                </div>
+                <input class="mock-focus" value="Focus ring" readonly>
+            </div>
+        </div>
+        <!-- G: 스틸 시안 -->
+        <div class="theme-card theme-g">
+            <div class="card-header">
+                <h2>G. Steel Cyan</h2>
+                <span class="desc">엔터프라이즈</span>
+            </div>
+            <div class="card-body">
+                <div class="swatches">
+                    <div class="swatch" style="background:#67e8f9;color:#000">#67e8f9</div>
+                    <div class="swatch" style="background:#a5f3fc;color:#000">#a5f3fc</div>
+                </div>
+                <div class="color-names"><span>accent</span><span>accent2</span></div>
+                <div class="gradient-bar"></div>
+                <div class="mock-sidebar">
+                    <div class="mock-logo">cli-jaw</div>
+                    <div class="mock-tabs">
+                        <div class="mock-tab active">Settings</div>
+                        <div class="mock-tab">Skills</div>
+                        <div class="mock-tab">MCP</div>
+                    </div>
+                    <div class="mock-btns">
+                        <div class="mock-btn active">Full</div>
+                        <div class="mock-btn">Edit</div>
+                        <div class="mock-btn">Read</div>
+                    </div>
+                </div>
+                <div class="mock-messages">
+                    <div class="mock-msg user">리팩토링 해줘</div>
+                    <div class="mock-msg agent">pipeline.ts 분석 완료</div>
+                </div>
+                <div class="mock-input-area">
+                    <input class="mock-input" placeholder="메시지..." readonly>
+                    <button class="mock-send">전송</button>
+                </div>
+                <input class="mock-focus" value="Focus ring" readonly>
+            </div>
+        </div>
+    </div>
+    <!-- Before / After -->
+    <div class="before-after">
+        <h2>Before → After</h2>
+        <div class="ba-grid">
+            <div class="theme-card theme-current">
+                <div class="card-header">
+                    <h2>Before (Red)</h2>
+                </div>
+                <div class="card-body">
+                    <div class="swatches">
+                        <div class="swatch" style="background:#ff6b6b;color:#000">#ff6b6b</div>
+                        <div class="swatch" style="background:#ffa07a;color:#000">#ffa07a</div>
+                    </div>
+                    <div class="gradient-bar"></div>
+                    <div class="mock-sidebar">
+                        <div class="mock-logo">CLI-JAW</div>
+                        <div class="mock-tabs">
+                            <div class="mock-tab active">Settings</div>
+                            <div class="mock-tab">Skills</div>
+                        </div>
+                        <div class="mock-btns">
+                            <div class="mock-btn active">Full</div>
+                            <div class="mock-btn">Edit</div>
+                        </div>
+                    </div>
+                    <div class="mock-input-area">
+                        <input class="mock-input" placeholder="메시지..." readonly>
+                        <button class="mock-send">전송</button>
+                    </div>
+                </div>
+            </div>
+            <div class="theme-card theme-d">
+                <div class="card-header">
+                    <h2>After (Midnight Teal)</h2>
+                </div>
+                <div class="card-body">
+                    <div class="swatches">
+                        <div class="swatch" style="background:#2dd4bf;color:#000">#2dd4bf</div>
+                        <div class="swatch" style="background:#5eead4;color:#000">#5eead4</div>
+                    </div>
+                    <div class="gradient-bar"></div>
+                    <div class="mock-sidebar">
+                        <div class="mock-logo">cli-jaw</div>
+                        <div class="mock-tabs">
+                            <div class="mock-tab active">Settings</div>
+                            <div class="mock-tab">Skills</div>
+                        </div>
+                        <div class="mock-btns">
+                            <div class="mock-btn active">Full</div>
+                            <div class="mock-btn">Edit</div>
+                        </div>
+                    </div>
+                    <div class="mock-input-area">
+                        <input class="mock-input" placeholder="메시지..." readonly>
+                        <button class="mock-send">전송</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <p style="text-align:center;color:#6e6e8a;margin-top:32px;font-size:11px;padding-bottom:20px">
+        cli-jaw theme v2 — hover for glow · no emoji · refined palettes
+    </p>
+</body>
+</html>

package/skills_ref/1password/SKILL.md ADDED Viewed

@@ -0,0 +1,70 @@
+---
+name: 1password
+description: Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
+homepage: https://developer.1password.com/docs/cli/get-started/
+metadata:
+  {
+    "openclaw":
+      {
+        "emoji": "🔐",
+        "requires": { "bins": ["op"] },
+        "install":
+          [
+            {
+              "id": "brew",
+              "kind": "brew",
+              "formula": "1password-cli",
+              "bins": ["op"],
+              "label": "Install 1Password CLI (brew)",
+            },
+          ],
+      },
+  }
+---
+# 1Password CLI
+Follow the official CLI get-started steps. Don't guess install commands.
+## References
+- `references/get-started.md` (install + app integration + sign-in flow)
+- `references/cli-examples.md` (real `op` examples)
+## Workflow
+1. Check OS + shell.
+2. Verify CLI present: `op --version`.
+3. Confirm desktop app integration is enabled (per get-started) and the app is unlocked.
+4. REQUIRED: create a fresh tmux session for all `op` commands (no direct `op` calls outside tmux).
+5. Sign in / authorize inside tmux: `op signin` (expect app prompt).
+6. Verify access inside tmux: `op whoami` (must succeed before any secret read).
+7. If multiple accounts: use `--account` or `OP_ACCOUNT`.
+## REQUIRED tmux session (T-Max)
+The shell tool uses a fresh TTY per command. To avoid re-prompts and failures, always run `op` inside a dedicated tmux session with a fresh socket/session name.
+Example (see `tmux` skill for socket conventions, do not reuse old session names):
+```bash
+SOCKET_DIR="${OPENCLAW_TMUX_SOCKET_DIR:-${CLAWDBOT_TMUX_SOCKET_DIR:-${TMPDIR:-/tmp}/openclaw-tmux-sockets}}"
+mkdir -p "$SOCKET_DIR"
+SOCKET="$SOCKET_DIR/openclaw-op.sock"
+SESSION="op-auth-$(date +%Y%m%d-%H%M%S)"
+tmux -S "$SOCKET" new -d -s "$SESSION" -n shell
+tmux -S "$SOCKET" send-keys -t "$SESSION":0.0 -- "op signin --account my.1password.com" Enter
+tmux -S "$SOCKET" send-keys -t "$SESSION":0.0 -- "op whoami" Enter
+tmux -S "$SOCKET" send-keys -t "$SESSION":0.0 -- "op vault list" Enter
+tmux -S "$SOCKET" capture-pane -p -J -t "$SESSION":0.0 -S -200
+tmux -S "$SOCKET" kill-session -t "$SESSION"
+```
+## Guardrails
+- Never paste secrets into logs, chat, or code.
+- Prefer `op run` / `op inject` over writing secrets to disk.
+- If sign-in without app integration is needed, use `op account add`.
+- If a command returns "account is not signed in", re-run `op signin` inside tmux and authorize in the app.
+- Do not run `op` outside tmux; stop and ask if tmux is unavailable.