Skip to content

feat: Claude Code連携にタグ提案と関連アイテム連携を追加 #48

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
azu merged 3 commits into from
Jan 15, 2026
Merged

feat: Claude Code連携にタグ提案と関連アイテム連携を追加 #48

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ac139b7
feat: Claude Code連携にタグ提案と関連アイテム連携を追加
azu Jan 15, 2026
7dbd3d3
refactor: Claude CLI出力を--output-format jsonでパース
azu Jan 15, 2026
dc9086c
Revert "refactor: Claude CLI出力を--output-format jsonでパース"
azu Jan 15, 2026
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
8 changes: 8 additions & 0 deletions css/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -337,3 +337,11 @@
.ClaudeCodePreview--error .ClaudeCodePreview-content {
color: #c62828;
}

.ClaudeCodePreview-tags {
margin-top: 8px;
padding-top: 8px;
border-top: 1px dashed #ccc;
font-size: 12px;
color: #666;
}
28 changes: 23 additions & 5 deletions src/browser/Action/ServiceAction.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -195,7 +195,7 @@ export default class ServiceAction extends Action {
}

// Claude Code関連アクション
runClaudeCode(url, title, config) {
runClaudeCode(url, title, config, relatedItems = [], availableTags = []) {
if (!config?.enabled) return;
if (!fs.existsSync(config.cliPath)) return;
if (!fs.existsSync(config.workDir)) {
Expand All @@ -207,7 +207,7 @@ export default class ServiceAction extends Action {

const prompt =
typeof config.prompt === "function"
? config.prompt({ url, title })
? config.prompt({ url, title, relatedItems, availableTags })
: `${config.prompt}\n\nURL: ${url}\nTitle: ${title}`;

const args = [];
Expand All @@ -234,9 +234,27 @@ export default class ServiceAction extends Action {

claudeProcess.on("close", (code) => {
if (code === 0 && stdout) {
const match = stdout.match(/```(?:markdown)?\s*([\s\S]*?)```/);
const result = match ? match[1].trim() : stdout.trim();
this.dispatch(keys.claudeCodeComplete, { url, result });
// JSONコードブロックを抽出
const jsonMatch = stdout.match(/```(?:json)?\s*([\s\S]*?)```/);
let parsedResult = { comment: "", tags: [] };

if (jsonMatch) {
try {
parsedResult = JSON.parse(jsonMatch[1].trim());
} catch (e) {
// フォールバック: 従来のmarkdown形式
const markdownMatch = stdout.match(/```(?:markdown)?\s*([\s\S]*?)```/);
parsedResult.comment = markdownMatch ? markdownMatch[1].trim() : stdout.trim();
}
} else {
parsedResult.comment = stdout.trim();
}

this.dispatch(keys.claudeCodeComplete, {
url,
comment: parsedResult.comment,
tags: Array.isArray(parsedResult.tags) ? parsedResult.tags : []
});
} else {
this.dispatch(keys.claudeCodeError, { url, error: stderr || `Exit code: ${code}` });
}
Expand Down
25 changes: 23 additions & 2 deletions src/browser/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -187,15 +187,34 @@ class App extends React.Component {
};
const finishEditing = (relatedItem, value) => {
ServiceAction.finishEditingRelatedItem(relatedItem, value);

// 関連URL追加時に再推論
if (
this._claudeCodeConfig?.enabled &&
this.state.claudeCode.status !== "loading" &&
this.state.URL?.startsWith("http")
) {
// 少し遅延を入れてstateが更新されてから実行
setTimeout(() => {
const updatedRelatedItems = appContext.ServiceStore.state.relatedItems;
ServiceAction.runClaudeCode(
this.state.URL,
this.state.title,
this._claudeCodeConfig,
updatedRelatedItems,
this.state.tags
);
}, 100);
Comment on lines +198 to +207
Copy link

Copilot AI Jan 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The 100ms delay is a magic number without explanation. Consider adding a comment explaining why this delay is necessary, or extract it as a named constant like RELATED_ITEM_STATE_UPDATE_DELAY.

Copilot uses AI. Check for mistakes.
}
};
const addItem = () => {
ServiceAction.addRelatedItem();
};
const submitPostLink = this.postLink.bind(this);

// Claude Code関連
const runClaudeCode = (url, title, config) => {
ServiceAction.runClaudeCode(url, title, config);
const runClaudeCode = (url, title, config, relatedItems = [], availableTags = []) => {
ServiceAction.runClaudeCode(url, title, config, relatedItems, availableTags);
};
const insertClaudeCodeResult = () => {
ServiceAction.insertClaudeCodeResult();
Expand Down Expand Up @@ -224,6 +243,8 @@ class App extends React.Component {
insertResult={insertClaudeCodeResult}
clearResult={clearClaudeCodeResult}
claudeCodeConfig={this._claudeCodeConfig}
relatedItems={this.state.relatedItems}
availableTags={this.state.tags}
/>
</div>
<ViaURLInput URL={this.state.viaURL} updateURL={updateViaURL} />
Expand Down
36 changes: 24 additions & 12 deletions src/browser/Store/ServiceStore.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,8 @@ export default class ServiceStore extends Store {
claudeCode: {
status: "idle", // idle | loading | complete | error
url: null,
result: null,
comment: null,
tags: [],
error: null
}
};
Expand Down Expand Up @@ -86,7 +87,8 @@ export default class ServiceStore extends Store {
claudeCode: {
status: "idle",
url: null,
result: null,
comment: null,
tags: [],
error: null
}
});
Expand Down Expand Up @@ -137,18 +139,20 @@ export default class ServiceStore extends Store {
claudeCode: {
status: "loading",
url,
result: null,
comment: null,
tags: [],
error: null
}
});
});

this.register(keys.claudeCodeComplete, ({ url, result }) => {
this.register(keys.claudeCodeComplete, ({ url, comment, tags }) => {
this.setState({
claudeCode: {
status: "complete",
url,
result,
comment,
tags: tags || [],
error: null
}
});
Expand All @@ -159,7 +163,8 @@ export default class ServiceStore extends Store {
claudeCode: {
status: "error",
url,
result: null,
comment: null,
tags: [],
error
}
});
Expand All @@ -170,22 +175,29 @@ export default class ServiceStore extends Store {
claudeCode: {
status: "idle",
url: null,
result: null,
comment: null,
tags: [],
error: null
}
});
});

this.register(keys.claudeCodeInsert, () => {
const { claudeCode } = this.state;
if (claudeCode.result) {
// 結果でコメントを入れ替え
const { claudeCode, selectedTags } = this.state;
if (claudeCode.comment) {
// タグをマージ（重複排除）
const newTags = claudeCode.tags || [];
const mergedTags = [...new Set([...selectedTags, ...newTags])];

// 結果でコメントを入れ替え、タグも追加
this.setState({
comment: claudeCode.result,
comment: claudeCode.comment,
selectedTags: mergedTags,
claudeCode: {
status: "idle",
url: null,
result: null,
comment: null,
tags: [],
error: null
}
});
Expand Down
14 changes: 8 additions & 6 deletions src/browser/component/ClaudeCodeButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,9 @@ export default function ClaudeCodeButton({
runClaudeCode,
insertResult,
clearResult,
claudeCodeConfig
claudeCodeConfig,
relatedItems = [],
availableTags = []
}) {
const prevUrlRef = useRef(url);
const debounceTimerRef = useRef(null);
Expand All @@ -29,7 +31,7 @@ export default function ClaudeCodeButton({

// 1秒後に実行（入力中の連続変更を避ける）
debounceTimerRef.current = setTimeout(() => {
runClaudeCode(url, title, claudeCodeConfig);
runClaudeCode(url, title, claudeCodeConfig, relatedItems, availableTags);
}, 1000);
}

Expand All @@ -40,7 +42,7 @@ export default function ClaudeCodeButton({
clearTimeout(debounceTimerRef.current);
}
};
}, [url, title, claudeCodeConfig, runClaudeCode]);
}, [url, title, claudeCodeConfig, runClaudeCode, relatedItems, availableTags]);

const handleClick = useCallback(() => {
if (claudeCode.status === "complete") {
Expand All @@ -49,10 +51,10 @@ export default function ClaudeCodeButton({
} else if (claudeCode.status === "idle" || claudeCode.status === "error") {
// アイドルまたはエラー状態の場合は実行
if (url && url.startsWith("http")) {
runClaudeCode(url, title, claudeCodeConfig);
runClaudeCode(url, title, claudeCodeConfig, relatedItems, availableTags);
}
}
}, [claudeCode.status, url, title, claudeCodeConfig, runClaudeCode, insertResult]);
}, [claudeCode.status, url, title, claudeCodeConfig, runClaudeCode, insertResult, relatedItems, availableTags]);

// 設定が無効またはCLIが設定されていない場合は表示しない
if (!claudeCodeConfig?.enabled) {
Expand All @@ -70,7 +72,7 @@ export default function ClaudeCodeButton({
);
case "complete":
return (
<span className="ClaudeCodeButton-complete" title={claudeCode.result}>
<span className="ClaudeCodeButton-complete" title={claudeCode.comment}>
AI ✓
</span>
);
Expand Down
7 changes: 5 additions & 2 deletions src/browser/component/ClaudeCodePreview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export default function ClaudeCodePreview({ claudeCode, insertResult, clearResul
);
}

if (claudeCode.status === "complete" && claudeCode.result) {
if (claudeCode.status === "complete" && claudeCode.comment) {
return (
<div className="ClaudeCodePreview ClaudeCodePreview--complete">
<div className="ClaudeCodePreview-header">
Expand All @@ -32,8 +32,11 @@ export default function ClaudeCodePreview({ claudeCode, insertResult, clearResul
</button>
</div>
<div className="ClaudeCodePreview-content" onClick={insertResult} title="クリックで挿入">
{claudeCode.result}
{claudeCode.comment}
</div>
{claudeCode.tags && claudeCode.tags.length > 0 && (
<div className="ClaudeCodePreview-tags">Tags: {claudeCode.tags.join(", ")}</div>
)}
</div>
);
}
Expand Down