task-logs.html

<!DOCTYPE html>
<html lang="ja" data-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>タスク経緯ログ（task-log）| ループエンジニアリング</title>
<meta name="description" content="auto-loop が自律的に回したタスクの経緯ログ（task-log.md）を一覧表示する頁。実データが溜まったらスマホで読める形に集約。">
<meta property="og:title" content="タスク経緯ログ（task-log）| ループエンジニアリング">
<meta property="og:description" content="auto-loop が回したタスクの経緯ログを一覧表示">
<meta property="og:type" content="article">
<meta property="og:url" content="https://fukukei23.github.io/loop-engineering-guide/task-logs.html">
<link rel="canonical" href="https://fukukei23.github.io/loop-engineering-guide/task-logs.html">
<link rel="stylesheet" href="assets/style.css">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📋</text></svg>">
<style>
/* task-logs.html 固有スタイル */
.tasklog-empty {
    background: var(--accent-bg);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    padding: 2rem 1.4rem;
    text-align: center;
    margin: 1.5rem 0;
}
.tasklog-empty .empty-icon { font-size: 2.6rem; display: block; margin-bottom: .6rem; }
.tasklog-empty p { margin-bottom: .4rem; color: var(--text); }
.tasklog-empty .empty-sub { font-size: .85rem; color: var(--text-secondary); }

.tasklog-list { margin: 1.5rem 0; }
.tasklog-item {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 1rem;
    overflow: hidden;
    background: var(--bg-card);
    box-shadow: var(--shadow);
}
.tasklog-item > summary {
    list-style: none;
    cursor: pointer;
    padding: 1rem 1.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .6rem;
    font-weight: 700;
    color: var(--text);
    transition: background 0.15s;
}
.tasklog-item > summary::-webkit-details-marker { display: none; }
.tasklog-item > summary:hover { background: var(--accent-bg); }
.tasklog-item[open] > summary { border-bottom: 1px solid var(--border); }
.summary-left { display: flex; align-items: center; gap: .6rem; flex: 1; min-width: 0; }
.summary-id { font-family: var(--font-mono); font-size: .82rem; color: var(--text-secondary); }
.summary-title { font-size: .98rem; }
.summary-right { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.verdict-badge {
    font-size: .72rem;
    font-weight: 700;
    padding: .2rem .6rem;
    border-radius: 20px;
}
.verdict-pass { background: var(--green-bg); color: var(--green); }
.verdict-fail { background: var(--red-bg); color: var(--red); }
.verdict-wip  { background: var(--amber-bg); color: var(--amber); }
.summary-caret { transition: transform .2s; opacity: .6; font-size: .9rem; }
.tasklog-item[open] > summary .summary-caret { transform: rotate(180deg); }

.tl-body { padding: 1.2rem 1.4rem; }
.tl-section { margin-bottom: 1.2rem; }
.tl-section:last-child { margin-bottom: 0; }
.tl-section h3 {
    font-size: .92rem;
    color: var(--accent-dark);
    margin: 0 0 .4rem;
    padding-bottom: .2rem;
    border-bottom: 1px solid var(--border);
}
.tl-section p, .tl-section li { font-size: .88rem; line-height: 1.7; margin-bottom: .3rem; }
.tl-section ul { padding-left: 1.1rem; }
.tl-meta { font-size: .8rem; color: var(--text-secondary); }
.tl-code {
    background: var(--code-bg);
    color: var(--code-text);
    padding: .8rem 1rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: .78rem;
    line-height: 1.6;
    overflow-x: auto;
    margin: .3rem 0;
}
.sample-tag {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    padding: .15rem .55rem;
    border-radius: 6px;
    background: var(--amber-bg);
    color: var(--amber);
    margin-left: .4rem;
    vertical-align: middle;
}
.future-note {
    font-size: .82rem;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border-left: 3px solid var(--border);
    padding: .8rem 1rem;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    margin-top: 1.5rem;
}
.future-note strong { color: var(--accent-dark); }
</style>
</head>
<body>
<header class="site-header">
<a href="index.html" class="site-title">🔄 ループエンジニアリング</a>
<button class="theme-toggle" id="themeToggle" aria-label="テーマ切替"><span class="icon-light">☀️</span><span class="icon-dark">🌙</span></button>
</header>
<!-- NAV_START -->
<nav class="site-nav" aria-label="サイト内移動">
<a href="start.html">🔧 やさしい入口</a>
<a href="index.html">📖 概念教科書</a>
<a href="operation.html">⚙️ 運用ガイド</a>
</nav>
<!-- NAV_END -->

<main class="textbook">
<h1>📋 タスク経緯ログ（task-log）</h1>
<aside class="tldr">
<ol>
<li>auto-loopが自律的に回したタスク each の経緯を1ファイルにまとめたログ</li>
<li>目的・計画・レビュー指摘・ズレ検知を時系列で記録し、セッションまたぎの文脈を保持</li>
<li>スマホで読める形に集約（現在0件・auto-loop完走時に生成される）</li>
</ol>
</aside>
<p>auto-loop が自律的に回したタスク each の経緯を、目的・計画・レビュー指摘・ズレ検知と1ファイルにまとめたログ。スマホで読める形に集約します。</p>

<div class="tasklog-empty" role="note">
<span class="empty-icon">📡</span>
<p><strong>現在 task-log は 0 件です</strong></p>
<p class="empty-sub">auto-loop が最初のタスクを完走すると、ここに経緯ログが表示されます</p>
<p class="empty-sub">※ 下記はフォーマット見本（サンプル）です</p>
</div>

<h2 style="font-size:1.15rem; margin-top:2rem;">📌 フォーマット見本（サンプル）</h2>
<p style="font-size:.88rem; color:var(--text-secondary);">実データ生成時の各 task-log.md は、下記7セクション構成で出力されます。タップで展開。</p>

<div class="tasklog-list">

<details class="tasklog-item" open>
<summary>
<span class="summary-left">
<span class="summary-id">TASK-001</span>
<span class="summary-title">サンプル: APIレート制限のリトライ実装</span>
<span class="sample-tag">見本</span>
</span>
<span class="summary-right">
<span class="verdict-badge verdict-pass">✅ PASS</span>
<span class="summary-caret">▼</span>
</span>
</summary>
<div class="tl-body">

<div class="tl-section">
<h3>🎯 TL;DR（目的＋結果＋KPI達成度）</h3>
<ul>
<li><strong>目的</strong>: API呼び出し失敗時に自動リトライし、成功率を改善する</li>
<li><strong>KPI</strong>: 成功率 92% → 99% 以上</li>
<li><strong>結果</strong>: 成功率 99.4% 達成</li>
</ul>
</div>

<div class="tl-section">
<h3>🗺️ 計画（plan.md 要約）</h3>
<p>指数バックオフで3回リトライ。429/5xx のみ対象。ユニットテスト付き。</p>
</div>

<div class="tl-section">
<h3>🤔 別LLMレビュー指摘（実装後）</h3>
<div class="tl-code">指摘1: リトライのジッター追加を推奨（サンダリングハード回避）
指摘2: タイムアウト値がハードコード、定数化を推奨</div>
</div>

<div class="tl-section">
<h3>📋 ズレ検知履歴</h3>
<div class="tl-code">差分 142行（上限500行以内・正常）
機能要件とのズレ: 検出なし</div>
</div>

<div class="tl-section">
<h3>📦 詳細経緯</h3>
<ul>
<li>レビュー raw 出力: <code>logs/impl_review_*.txt</code></li>
<li>計画 raw 出力: <code>logs/plan_review_*.txt</code></li>
<li>diff: <code>git log --stat</code> 参照</li>
</ul>
</div>

<div class="tl-section">
<h3>🔗 関連</h3>
<p class="tl-meta">spec / plan / 詳細経緯ファイルへのリンク</p>
</div>

</div>
</details>

</div>

<div class="future-note">
<strong>🔧 拡張ポイント（実データが溜まったら）</strong><br>
現在は <em>静的雛形</em>（手動メンテ）です。task-log.md が複数件溜まった段階で、ビルドステップで <code>.auto-loop/*/task-log.md</code> を走査してこの頁を自動生成する仕組みへ移行します。セクション構成は auto-loop v1 の7セクですが、仕様変更時は本頁も追従します（未知セクション追加時は<code>.tl-section</code>ブロックを追加するだけで対応可能）。
</div>

</main>

<!-- NAV_FOOT_START -->
<footer class="site-footer">
<nav class="site-nav" aria-label="サイト内移動">
<a href="start.html">🔧 やさしい入口</a>
<a href="index.html">📖 概念教科書</a>
<a href="operation.html">⚙️ 運用ガイド</a>
</nav>
</footer>
<!-- NAV_FOOT_END -->

<script>
const themeToggle=document.getElementById('themeToggle');
const savedTheme=localStorage.getItem('theme')||'light';
document.documentElement.setAttribute('data-theme',savedTheme);
themeToggle.addEventListener('click',()=>{const cur=document.documentElement.getAttribute('data-theme');const next=cur==='dark'?'light':'dark';document.documentElement.setAttribute('data-theme',next);localStorage.setItem('theme',next);});
</script>
</body>
</html>