Skip to content

docs: record the settled ui direction and what it leaves open #34

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
smileygames merged 1 commit into from
Aug 21, 2026
Merged

docs: record the settled ui direction and what it leaves open #34

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,3 +28,5 @@ src-tauri/gen/

# Machine-local cargo override (see src-tauri/.cargo/config.toml.example)
src-tauri/.cargo/config.toml
# Seeded design canvas — 2.2MB of editor payload, regenerated from design/*.dc.html
design/liplus-chat-ui.html
190 changes: 190 additions & 0 deletions design/Main.dc.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,190 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="./support.js"></script>
</head>
<body>
<x-dc>
<helmet>
<style>
body { margin: 0; font-family: system-ui, "Segoe UI", "Yu Gothic UI", sans-serif; }
a { color: #3a6ea5; }
a:hover { color: #2c5580; }
.mono { font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace; }
</style>
</helmet>

<div style="width: 1120px; height: 760px; display: flex; flex-direction: column; background: #ffffff; color: #1b1b1f; font-size: 14px;">

<!-- titlebar -->
<div style="display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #d8d8de; padding: 8px 14px; font-size: 13.6px;">
<span style="font-weight: 600;">Li+ Chat</span>
<span style="flex: 1; color: #6b6b76; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">Claude Code / Lin</span>
<label style="display: flex; align-items: center; gap: 6px; color: #6b6b76;">
名前
<input value="マスター" style="width: 112px; font: inherit; color: #1b1b1f; background: #f4f4f7; border: 1px solid #d8d8de; border-radius: 4px; padding: 3px 6px;">
</label>
<button style="font: inherit; color: #1b1b1f; background: #f4f4f7; border: 1px solid #d8d8de; border-radius: 4px; padding: 3px 8px; cursor: pointer;">診断</button>
</div>

<!-- launcher -->
<div style="display: flex; align-items: center; gap: 8px; border-bottom: 1px solid #d8d8de; padding: 6px 14px; font-size: 12.8px;">
<select style="font: inherit; color: #1b1b1f; background: #f4f4f7; border: 1px solid #d8d8de; border-radius: 4px; padding: 4px 7px;">
<option>Claude Code</option>
</select>
<label style="display: flex; align-items: center; gap: 6px; flex: 1; color: #6b6b76;">
作業ディレクトリ
<input class="mono" value="C:\Users\smile\ClaudeCode" style="flex: 1; font-size: 12px; color: #1b1b1f; background: #f4f4f7; border: 1px solid #d8d8de; border-radius: 4px; padding: 4px 7px;">
</label>
<button style="font: inherit; color: #1b1b1f; background: #f4f4f7; border: 1px solid #d8d8de; border-radius: 4px; padding: 4px 10px; cursor: pointer;">セッション参加</button>
</div>

<!-- launch options -->
<div style="display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #d8d8de; padding: 6px 14px 8px; font-size: 12.5px;">
<label style="display: flex; align-items: center; gap: 6px; color: #6b6b76;">
起動オプション
<input class="mono" value="--dangerously-skip-permissions --dangerously-load-development-channels server:github-webhook-mcp" style="width: 352px; font-size: 12px; color: #1b1b1f; background: #f4f4f7; border: 1px solid #d8d8de; border-radius: 4px; padding: 4px 7px;">
</label>
<span class="mono" style="flex: 1; color: #6b6b76; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">claude --dangerously-skip-permissions --dangerously-load-development-channels server:liplus-chat-room server:github-webhook-mcp</span>
</div>

<!-- body: room + participants -->
<div style="flex: 1; display: flex; min-height: 0;">

<!-- room -->
<div style="flex: 1; display: flex; flex-direction: column; min-width: 0;">
<div style="flex: 1; overflow: hidden; padding: 16px; display: flex; flex-direction: column; gap: 12px;">

<div style="max-width: 640px; border-left: 3px solid #3a6ea5; padding-left: 11px;">
<div style="display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; color: #6b6b76;">
<span style="font-weight: 600; color: #1b1b1f;">マスター</span>
<span>10:15</span>
</div>
<div style="white-space: pre-wrap; line-height: 1.6; margin-top: 2px;">部屋の往復が通ったので、次は宛先を付けたい。</div>
</div>

<div style="max-width: 640px; border-left: 3px solid oklch(0.52 0.09 155); padding-left: 11px;">
<div style="display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; color: #6b6b76;">
<span style="font-weight: 600; color: #1b1b1f;">Lin</span>
<span style="color: oklch(0.52 0.09 155);">→ マスター</span>
<span>10:16</span>
</div>
<div style="white-space: pre-wrap; line-height: 1.6; margin-top: 2px;">say フレームに to を足すだけで、名指しされていない側が黙れるようになります。判定はエージェント側に置いたままで済みます。</div>
</div>

<div style="max-width: 640px; border-left: 3px solid #d8d8de; padding-left: 11px;">
<div style="display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; color: #6b6b76;">
<span style="font-weight: 600; color: #1b1b1f;">Lay</span>
<span>10:16</span>
</div>
<div style="white-space: pre-wrap; line-height: 1.6; margin-top: 2px;">（宛先なしの発言。作法により沈黙を選んでいる）</div>
</div>

<div style="max-width: 640px; border-left: 3px solid #3a6ea5; padding-left: 11px;">
<div style="display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; color: #6b6b76;">
<span style="font-weight: 600; color: #1b1b1f;">マスター</span>
<span style="color: #3a6ea5;">→ Lin</span>
<span>10:17</span>
</div>
<div style="white-space: pre-wrap; line-height: 1.6; margin-top: 2px;">じゃあそれで。</div>
</div>

</div>

<!-- composer -->
<div style="border-top: 1px solid #d8d8de; padding: 10px 14px 6px;">
<div style="display: flex; align-items: center; gap: 6px; padding-bottom: 6px; font-size: 12.5px; color: #6b6b76;">
<span>宛先</span>
<span style="display: inline-flex; align-items: center; gap: 5px; background: #f4f4f7; border: 1px solid #d8d8de; border-radius: 999px; padding: 2px 9px; color: #1b1b1f;">
<span style="width: 6px; height: 6px; border-radius: 999px; background: oklch(0.52 0.09 155);"></span>
Lin
<span style="color: #6b6b76;">×</span>
</span>
<span style="color: #6b6b76;">未指定なら部屋全体へ</span>
</div>
<div style="display: flex; gap: 8px; align-items: flex-end;">
<textarea style="flex: 1; height: 48px; font: inherit; color: #1b1b1f; background: #f4f4f7; border: 1px solid #d8d8de; border-radius: 6px; padding: 8px; resize: vertical;">@Lin </textarea>
<button style="font: inherit; color: #1b1b1f; background: #f4f4f7; border: 1px solid #d8d8de; border-radius: 6px; padding: 8px 16px; cursor: pointer;">送信</button>
</div>
</div>
<div style="min-height: 20px; padding: 0 14px 8px; font-size: 12.5px; color: #6b6b76;">Claude Code を起動しました。C:\Users\smile\ClaudeCode\.mcp.json に登録済み。</div>
</div>

<!-- participants -->
<div style="width: 264px; border-left: 1px solid #d8d8de; background: #f4f4f7; display: flex; flex-direction: column; min-height: 0;">
<div style="padding: 10px 14px 6px; font-size: 12.5px; font-weight: 600;">参加者</div>

<div style="display: flex; flex-direction: column;">
<div style="display: flex; align-items: center; gap: 8px; padding: 7px 14px; font-size: 12.5px;">
<span style="width: 7px; height: 7px; border-radius: 999px; background: #3a6ea5;"></span>
<span style="flex: 1;">マスター（あなた）</span>
</div>
<div style="display: flex; align-items: center; gap: 8px; padding: 7px 14px; font-size: 12.5px; background: #ffffff; border-top: 1px solid #d8d8de; border-bottom: 1px solid #d8d8de;">
<span style="width: 7px; height: 7px; border-radius: 999px; background: oklch(0.52 0.09 155);"></span>
<span style="flex: 1;">Lin</span>
<span class="mono" style="color: #6b6b76; font-size: 11px;">PTY</span>
</div>
<div style="display: flex; align-items: center; gap: 8px; padding: 7px 14px; font-size: 12.5px;">
<span style="width: 7px; height: 7px; border-radius: 999px; background: #d8d8de;"></span>
<span style="flex: 1; color: #6b6b76;">Lay</span>
<span class="mono" style="color: #6b6b76; font-size: 11px;">未起動</span>
</div>
</div>

<div style="border-top: 1px solid #d8d8de; margin-top: 6px; padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; font-size: 12px;">
<div style="display: flex; justify-content: space-between; gap: 8px;">
<span style="color: #6b6b76;">部屋ソケット</span>
<span class="mono" style="color: #3a6ea5;">127.0.0.1:64475</span>
</div>
<div style="display: flex; justify-content: space-between; gap: 8px;">
<span style="color: #6b6b76;">接続方法</span>
<span class="mono">PTY</span>
</div>
<div style="display: flex; justify-content: space-between; gap: 8px;">
<span style="color: #6b6b76;">起動コマンド</span>
<span class="mono">claude</span>
</div>
<div style="display: flex; flex-direction: column; gap: 2px;">
<span style="color: #6b6b76;">作業ディレクトリ</span>
<span class="mono" style="font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">C:\Users\smile\ClaudeCode</span>
</div>
<div style="display: flex; justify-content: space-between; gap: 8px;">
<span style="color: #6b6b76;">開始時刻</span>
<span class="mono">10:12</span>
</div>
<div style="display: flex; justify-content: space-between; gap: 8px;">
<span style="color: #6b6b76;">ウィンドウ</span>
<span class="mono">120×30</span>
</div>
</div>

<div style="padding: 0 14px 10px; display: flex; gap: 6px;">
<button style="flex: 1; font: inherit; font-size: 12px; color: #1b1b1f; background: #ffffff; border: 1px solid #d8d8de; border-radius: 4px; padding: 5px 0; cursor: pointer;">端末</button>
<button style="flex: 1; font: inherit; font-size: 12px; color: #1b1b1f; background: #ffffff; border: 1px solid #d8d8de; border-radius: 4px; padding: 5px 0; cursor: pointer;">リサイズ</button>
<button style="flex: 1; font: inherit; font-size: 12px; color: #a52a2a; background: #ffffff; border: 1px solid #d8d8de; border-radius: 4px; padding: 5px 0; cursor: pointer;">終了</button>
</div>

<div style="flex: 1;"></div>

<div style="border-top: 1px solid #d8d8de; padding: 8px 14px 10px;">
<div style="font-size: 11.5px; color: #6b6b76; padding-bottom: 5px;">端末（診断）</div>
<div class="mono" style="height: 96px; overflow: hidden; background: #ffffff; border: 1px solid #d8d8de; border-radius: 4px; padding: 7px; font-size: 10.5px; line-height: 1.5; color: #1b1b1f; white-space: pre-wrap;">room socket: connected as "Lin"
mcp: stdio transport connected
&gt; </div>
</div>
</div>

</div>
</div>
</x-dc>

<script data-dc-script data-props='{}'>
class Component extends DCLogic {
renderVals() {
return {};
}
}
</script>
</body>
</html>
13 changes: 13 additions & 0 deletions design/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
# design

UI 設計キャンバスの元ファイル。公開先は `docs/0-requirements.md` の「UI の方向」節にリンクがある。

- `Main.dc.html` — 次の一手（実装可能な範囲）
- `Vision.dc.html` — 全体像（到達点）
- `canvas.json` — 2 枚の配置、付箋、開く位置

色と寸法は `src/styles.css` の実値をそのまま使っている。実装側のトークンを変えたら、こちらも合わせること。

公開版は Claude Code の `/design` スキルから再生成する。`liplus-chat-ui.html`（約 2.2MB、エディタ本体を含む）は生成物なので追跡しない。

キャンバス側で編集された場合は、先に公開版を読み戻してからこちらを直す。手元の古い版で上書きしないため。
Loading
Loading